I did the navbar offcanvas across all breakpoints using the attribute expand={false} like the image below.
However i want the navbar items to be like the normal navigation on (min-width: 992px) OR expand="lg" like the image below. Im using reactrouter v6 and react-bootstrap.
Below is my code and also here is the working sandbox code https://codesandbox.io/.
import React, { useState } from "react";
import { Container, Navbar, Nav, Offcanvas } from "react-bootstrap";
import { NavLink, Outlet } from "react-router-dom";
const NavbarContent = () => {
const [isOpen, setOpen] = useState(false);
return (
<>
<Navbar
expanded={isOpen}
expand={false}
bg="light"
fixed="top"
className="bg-white text-the-primary bg-gradient shadow py-3"
>
<Container>
<Navbar.Brand href="/">
<span className="d-block fs-1">Offcanvas</span>{" "}
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
onClick={() => setOpen(isOpen ? false : "expanded")}
/>
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header
closeButton
className="justify-content-end"
onClick={() => setOpen(false)}
></Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-0">
<NavLink to="/" onClick={() => setOpen(false)}>
Home
</NavLink>
<NavLink to="/About" onClick={() => setOpen(false)}>
About
</NavLink>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
<Outlet />
</>
);
};
export default NavbarContent;
I'm not sure if I missed something on useState and expand attribute of the navbar.
Set the expand break point to large using the command
<Navbar
expanded={isOpen}
expand='lg'
...
/>
Works for me
Related
I want to update the text color of the content inside the bar, but for some reason it doesn't work.
What I've tried so far: Link a css stylesheet (it doesn't work for some reason)
inline style (it only works for the company name and the cart, not for the user's name)
Here is the code to my header:
import React from 'react'
import { Route } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer } from 'react-router-bootstrap'
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap'
import SearchBox from './SearchBox'
import { logout } from '../actions/userActions'
import '../index.css' //changes in index.css do not update in header.js
const Header = () => {
const dispatch = useDispatch()
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const logoutHandler = () => {
dispatch(logout())
}
return (
<header>
<Navbar style={{ backgroundColor: '#0a4275' }} variant="light" expand='lg' collapseOnSelect >
<Container >
<LinkContainer to='/'>
<Navbar.Brand><span style={{ color: 'white' }}> CFM Système</span></Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Route render={({ history }) => <SearchBox history={history} />} />
<Nav className='ml-auto'>
<LinkContainer to='/cart'>
<Nav.Link>
<span style={{ color: 'white' }}> <i className='fas fa-shopping-cart'></i> Panier</span>
</Nav.Link>
</LinkContainer>
{userInfo ? (
<NavDropdown title={userInfo.name} id='username'>
<LinkContainer to='/profile'>
<NavDropdown.Item>Profil</NavDropdown.Item>
</LinkContainer>
<NavDropdown.Item onClick={logoutHandler}>
Se déconnecter
</NavDropdown.Item>
</NavDropdown>
) : (
<LinkContainer to='/login'>
<Nav.Link>
<i className='fas fa-user'></i> Se connecter
</Nav.Link>
</LinkContainer>
)}
{userInfo && userInfo.isAdmin && (
<NavDropdown title='Admin' id='adminmenu'>
<LinkContainer to='/admin/userlist'>
<NavDropdown.Item>Utilisateurs</NavDropdown.Item>
</LinkContainer>
<LinkContainer to='/admin/productlist'>
<NavDropdown.Item>Produits</NavDropdown.Item>
</LinkContainer>
<LinkContainer to='/admin/orderlist'>
<NavDropdown.Item>Commandes</NavDropdown.Item>
</LinkContainer>
</NavDropdown>
)}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</header>
)
}
export default Header
I'm clearly missing something, but I'm out of solutions?
I'm trying a double nested for loop but it's not quite unraveling how I predict, advice? am i not allowed to call a double for loop in function? Essentially it suppose to create a navbar from an array of objects i.e [{name:['Jonathan,'bob']},{dob:['may 21','june 22']}]
import React,{Component} from "react";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
export function navBar(content){
return(
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{content.map((cont) => {
<NavDropdown title="Dropdown" id={Object.keys(cont)[0]}>
{
Object.values(cont).map((key)=>{<a href={"http://localhost:3000/"+key}>{key}</a>})
}
</NavDropdown>
})}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
You are not returning from your map functions:
<Nav className='me-auto'>
{content.map((cont) => {
// from here
<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => {
// and from here
<a href={'http://localhost:3000/' + key}>{key}</a>;
})}
</NavDropdown>;
})}
</Nav>
Solution:
<Nav className='me-auto'>
{content.map((cont) => {
return (<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => {
return <a href={'http://localhost:3000/' + key}>{key}</a>;
})}
</NavDropdown>);
})}
</Nav>;
Since you are using arrow functions, you can omit the curly brackets and the return:
<Nav className='me-auto'>
{content.map((cont) => (
<NavDropdown title='Dropdown' id={Object.keys(cont)[0]}>
{Object.values(cont).map((key) => (
<a href={'http://localhost:3000/' + key}>{key}</a>
))}
</NavDropdown>
))}
</Nav>;
Also, the content parameter of your navBar is not an array but the props object, so you shouldn't be able to call map on it.
If you use navBar like: <navBar content={...}/>, you have to update its code like:
export function navBar({ content }){
// ...
}
I have used the code below to have navbar with reactstrap but it shows in 2 rows and not inline.
I have installed react strap and imported the CSS in app.js
import React, { Component } from 'react';
import {Collapse,Navbar,NavbarToggler,NavbarBrand,Nav,NavLink,NavItem,Container} from 'reactstrap';
state = {
isOpen: false
}
toggle = () => {
this.setState({
isOpen: !this.state.isOpen
})
}
render(){
return (
<Navbar color="dark" dark expand="sm" className="mb-5">
<Container>
<NavbarBrand href="/">ShoppingList</NavbarBrand>
<NavbarToggler onClick={this.toggle}></NavbarToggler>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="https://www.google.com">google</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
)
}
}
export default Appnavbar;
I want to simply highlight the tab selected from the NavBar. I had used the Navbar Component of React-bootstrap and used the state to change the bgColor and textColor of the selected tab. But it is still NOT working? Any corrections?
import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap"
import { LogOut } from "./LogOut"
const NavbarComponent = () => {
const [bgcolor, setBgcolor] = useState('black');
const [textcolor, setTextcolor] = useState('white');
function handleHighlightTab() {
setBgcolor('white');
setTextcolor('black');
}
return (
<>
<Navbar bg="dark" variant="dark" fixed='top' className='nav-pills'>
<Container>
<Navbar.Brand href="/">Verticals</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="/grocery" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Grocery</Nav.Link>
<Nav.Link href="/fashion" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Fashion</Nav.Link>
<Nav.Link href="/footwear" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }}>Footwear</Nav.Link>
</Nav>
<LogOut />
</Container>
</Navbar>
</>
)
}
export default NavbarComponent;
could somone help i'm stuck in such problem with next.js here is my code
this is the error i get in the console
Error: Export encountered errors on following paths:
/admin
/user
in pages in folder named admin/index.js
import Layout from "../../components/Layout";
import Admin from "../../components/auth/Admin";
import Link from "next/link";
const AdminIndex = () => {
return (
<Layout>
<Admin>
<div className="container-fluid">
<div className="row">
<div className="col-md-12 pt-5 pb-5">
<h2>Admin Dashboard</h2>
</div>
<div className="col-md-4">
<ul class="list-group">
<li className="list-group-item">
<Link href="/admin/crud/project">
<a>Create Project</a>
</Link>
</li>
</ul>
</div>
<div className="col-md-8">right</div>
</div>
</div>
</Admin>
</Layout>
);
};
export default AdminIndex;
in folder pages/user/index.js
Error: Export encountered errors on following paths:
/admin
/user
import Layout from "../../components/Layout";
import Private from "../../components/auth/Private";
import Link from "next/link";
const UserIndex = () => {
return (
<Layout>
<Private>
<div className="container-fluid">
<h2>User Dashboard</h2>
</div>
</Private>
</Layout>
);
};
export default UserIndex;
and finally this is my header
import React, { useState } from "react";
import Link from "next/link";
import Router from "next/router";
import nProgress from "nprogress";
import { APP_NAME } from "../config";
import { signout, isAuth } from "../actions/auth";
import {
Collapse,
Navbar,
NavbarToggler,
Nav,
NavItem,
NavLink,
} from "reactstrap";
Router.onRouteChangeStart = (url) => nProgress.start();
Router.onRouteChangeComplete = (url) => nProgress.done();
Router.onRouteChangeError = (url) => nProgress.done();
//next.js giving us the option to use such option
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavLink className="font-weight-bold">{APP_NAME}</NavLink>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuth() && (
<React.Fragment>
<NavItem>
<Link href="/signin">
<NavLink>Signin</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signup">
<NavLink>Signup</NavLink>
</Link>
</NavItem>
</React.Fragment>
)}
{isAuth() && isAuth().role === 0 && (
<NavItem>
<Link href="/user">
<NavLink style={{ cursor: "pointer" }}>
{`${isAuth().name}'s Dashboard`}
</NavLink>
</Link>
</NavItem>
)}
{isAuth() && isAuth().role === 1 && (
<NavItem>
<Link href="/admin">
<NavLink style={{ cursor: "pointer" }}>{`${
isAuth().name
}'s Dashboard`}</NavLink>
</Link>
</NavItem>
)}
{isAuth() && (
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
onClick={() => signout(() => Router.replace(`/signin`))}
>
Signout
</NavLink>
</NavItem>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;