I would like all the elements nested inside of the first Nav tag to be on the left side of the NavBar, and all in the second Nav tag to float right. How can I achieve this using react Bootstrap?
I tried doing Nav className="float-right" on the second Nav tag but it didn't work. I also tried className="ml-auto".
<Nav>
<Nav.Link>
{" "}
<Link
to="/booklets"
className="nav-link"
onClick={() => setExpanded(false)}
>
Booklets
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/form"
className="nav-link"
onClick={() => setExpanded(false)}
>
Upload New Booklet
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/about"
className="nav-link"
onClick={() => setExpanded(false)}
>
About
</Link>
</Nav.Link>
</Nav>
<Nav>
<Nav.Link>
{" "}
<Link
to="/login"
className="nav-link"
onClick={() => {
setExpanded(false);
currentUser && logout();
}}
>
{currentUser ? "Logout" : "Login"}
</Link>
</Nav.Link>
<Nav.Link>
{" "}
<Link
to="/register"
className="nav-link"
onClick={() => setExpanded(false)}
>
{!currentUser ? "Register" : ""}
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Assuming that the direct parent of the two <Nav> is <Navbar.Collapse>, perhaps try style the parent to have it place the items each on one side, with flex display.
Example with Bootstrap classes:
<Navbar.Collapse className="d-flex justify-content-between">
Example with inline styles:
<Navbar.Collapse style={{ display: 'flex', justifyContent: 'space-between' }}>
Related
I'm using #tanstack/react-location in React Typescript project + 'react-redux'.
When I change redux auth state (login, logout) I also make my MainNavigation changing. Some Links are added or removed. And when it happens the router stops working.
Updated Links are working, url is changing, but Router isn't responding.
After refresh Router works again.
App.tsx
...
<Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
MainNavigation.tsx
<header className="header">
<Link to="/" getActiveProps={getActiveProps}>
<div className="logo">RS Lang</div>
</Link>
<nav>
<ul>
<li>
<Link to="/" getActiveProps={getActiveProps}>
Home
</Link>
</li>
<li>
<Link to="/team" getActiveProps={getActiveProps}>
Team{' '}
</Link>
</li>
<li>
<Link to="/textbook" getActiveProps={getActiveProps}>
Textbook
</Link>
</li>
{isLoggedIn && (
<li>
<Link to="/dictionary" getActiveProps={getActiveProps}>
Dictionary
</Link>
</li>
)}
<li>
<Link to="/games" getActiveProps={getActiveProps}>
Games
</Link>
</li>
{!isLoggedIn && (
<li>
<Link to="/auth" getActiveProps={getActiveProps}>
Login|SignUp
</Link>
</li>
)}
{isLoggedIn && (
<li>
<Link to="/profile" getActiveProps={getActiveProps}>
Profile {authState.user.name}
</Link>
</li>
)}
{isLoggedIn && (
<li>
<button type="button" onClick={logoutHandler}>
Logout
</button>
</li>
)}
</ul>
</nav>
</header>
for me the issue was that the definition of the ReactLocation was not in the main.tsx. So I fixed it like so:
main.tsx
export const reactLocation = new ReactLocation();
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
App.tsx
import { reactLocation} from './main.tsx';
export const App = () => {
return <Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
}
Hope that helps :)
(I was using vite as build tool)
Im building a react app and I want every route to have a different background color.
But the only way to change the background color of the whole page is by using the * {} tag. Is there some kind of theme library or anything I can do to pass a variable from my routes to the * {} tag to change its background color?
Other solutions would include putting a min-height on my root component but that just feels wrong and I will not do it.
I think you can use this as well
function App() {
const [color, changeColor] = useState("#282c34");
document.body.style.backgroundColor = color;
return (
<div>
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/" onClick={() => changeColor("#282c34")}>
Home
</Link>
</li>
<li>
<Link to="/about/" onClick={() => changeColor("#9c27b0")}>
About
</Link>
</li>
<li>
<Link to="/users/" onClick={() => changeColor("#007bff")}>
Users
</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</div>
</Router>
</div>
);
}
You can use a state color and pass it to each Route.
This is an exemple to illustrate what i ve told you :
function App() {
const [color, changeColor] = useState("#282c34");
return (
<div style={{ background: color }} id="main">
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/" onClick={() => changeColor("#282c34")}>
Home
</Link>
</li>
<li>
<Link to="/about/" onClick={() => changeColor("#9c27b0")}>
About
</Link>
</li>
<li>
<Link to="/users/" onClick={() => changeColor("#007bff")}>
Users
</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Index} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</div>
</Router>
</div>
);
}
I am trying to place the last Nav.Link (logOut) to the right on the nav bar (see picture) without affecting the other nav.links. I have tried with d-flex and so on but it does not work. What to do in the specific nav.link for getting it to stay right, and still included in the Navbar.collapse?
import "./NavBar.css"
import '#fortawesome/fontawesome-free/css/all.min.css';
export const NavBar = () =>{
return (
<Navbar className="nav-bar" expand="lg" sticky="top">
<Container>
<Navbar.Brand href="#home">Scancar</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="find">Find booking</Nav.Link>
<Nav.Link href="book">Book</Nav.Link>
<Nav.Link href="pricing">Overview</Nav.Link>
<Nav.Link href="pricing">Release</Nav.Link>
<Nav.Link href="pricing">Request</Nav.Link>
<Nav.Link href="logOut"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
See the navbar
You can add ms-auto
<Nav.Link href="logOut" className="ms-auto"> <i className="fas fa-sign-out-alt"></i> </Nav.Link>
When I import Bootstrap CSS it adds extra CSS to the navbar. As it is shown in the image below. I am using bootstrap cards in this code but not for Navbar. When I remove the Bootstrap CSS It works fine.
You can check the code here
Please help me resolve this.
if your problem is the under line you can omit that using
style={{ textDecoration: 'none' }}
here is your modified navbar.jsx file
// eslint-disable-next-line
import React from 'react';
import { NavLink } from 'react-router-dom';
function Navbar(){
return(
<>
<header className="l-header">
<div className="navi bd-grid">
<div>
<NavLink to="#" className="navi__logo">Portfolio</NavLink>
</div>
<div className="navi__menu" id="navi-menu">
<ul className="navi__list">
<li className="navi__item">
<NavLink to="#home" className="navi__link menu" style={{ textDecoration: 'none' }}>Home</NavLink>
</li>
<li className="navi__item">
<NavLink to="#about" className="navi__link" style={{ textDecoration: 'none' }}>About</NavLink>
</li>
<li className="navi__item">
<NavLink to="#skills" className="navi__link" style={{ textDecoration: 'none' }}>Skills</NavLink>
</li>
<li className="navi__item">
<NavLink to="#work" className="navi__link" style={{ textDecoration: 'none' }}>Work</NavLink>
</li>
<li className="navi__item">
<NavLink to="#contact" className="navi__link" style={{ textDecoration: 'none' }}>Contact</NavLink>
</li>
</ul>
</div>
<div className="navi__toggle" id="navi-toggle">
<i className='bx bx-menu'></i>
</div>
</div>
</header>
</>
);
};
export default Navbar;
output will be something like this
Try to import the bootstrap on your index.js file and it should solve the problem.
How would I set the registered as and logout button to align it to the right? I tried to use justify content on the navbar.text and set it to align the right. BTW the parent is already set to flex:
<Navbar onToggle={()=>setExpanded(!expanded)} expanded={expanded} bg="primary" variant="dark" expand="lg" fixed="top">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav>
<Nav.Link as={Link} to="/" className='header-router-a' onClick={() => setExpanded(false)}>
Home
</Nav.Link>
<Nav.Link as={Link} to="/quiz" className='header-router-a' onClick={() => setExpanded(false)}>
Personality Quiz
</Nav.Link>
<Nav.Link as={Link} to="/shopper" className='header-router-a' onClick={() => setExpanded(false)}>
Shopper
</Nav.Link>
<Nav.Link as={Link} to="/contact" className='header-router-a' onClick={() => setExpanded(false)}>
Contact
</Nav.Link>
</Nav>
{loggedin ?
<Nav>
<Navbar.Text className="auth"as={Link} to={`/profile/${state.user}`} onClick={() => setExpanded(false)} >
Signed in as: {state.user}
</Navbar.Text >
<Button onClick = {() => {
localStorage.removeItem("jwtToken");
setExpanded(false)
setAuthToken(false);
dispatch({
type: 'SET_CURRENT_USER',
payload : {}
});
}} >
Log Out
</Button>
</Nav>
: <Button onClick={() => {history.push("/login"); setExpanded(false)}}>
LOG IN
</Button>
}
</Navbar.Collapse>
</Navbar>
.bg-primary{
background-color: #33DBFF;
opacity: 0.95;
}
/*not working*/
.auth {
margin-right: auto;
justify-content: end;
}
this is what it looks like currently:
Child was not nested properly!!!!