hide Navbar if user inside dashboard using React js

Question

I am creating my collage project and I want to hide the navbar if the user in window.location.pathname === "/admin" || "/employee" || "/publisher" basically if used in the admin dashboard or employee dashboard or publisher dashboard

this is how my Admin dashboard looks like when I login into admin

My Navbar.js file looks like this:

import React, { useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import './Navbar.css'
import LoginRounded from '@mui/icons-material/LoginRounded'
import Button from '@mui/material/Button';


const Navbar = () => {
  
  //Navbar active color change
  let location = useLocation();
  useEffect(() => {
  }, [location]);


  return (
    <div >
      <nav className="navbar navbar-expand-lg navbar-dark" style={{ backgroundColor: "#063970" }}>
        <div className="container-fluid">
          <Link className="navbar-brand" to="/">Evalue Content</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link className={`nav-link ${location.pathname === "/" ? "active" : ""}`} to="/">Home</Link>
              </li>
              <li className="nav-item"><Link className={`nav-link ${location.pathname === "/service" ? "active" : ""}`} to="/service">Service</Link></li>
              <li className="nav-item"><Link className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`} to="/contact">contact us</Link></li>

            </ul>
            <Button component={Link} to="/Login" variant="contained" size="medium" startIcon={<LoginRounded />} sx={{ marginLeft: 'auto' }} >Login</Button>
          </div>
        </div>
      </nav>
    </div>
  )
}

export default Navbar

if anyone knows how to achieve this please let me know

Answer 1

import { useLocation, BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  const location = useLocation()

  return (
    <Router>
        {!["/admin", "/employee", "/publisher"].includes(location.pathname) && <Navbar/>}
        <Routes>
           <Route path="" element={<Homepage />} />
        </Routes>
    </Router>
  )
}

Answer 2

A good approach that you can take is using React Hook useState and assigning it a value of true.

const [navBar, setNavBar] = useState(true);

and then create a button to handle when this is open and close whit

onClick={() => setNavBar(navBar => !navBar)}

button example

<button type="button" onClick={() => setNavBar(navBar => !navBar)}> <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg></button>

Answer 3

It's probably cleanest to handle this sort of behaviour using the tools that are provided to you by React Router.

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route path="admin" element={<Admin />} />
    <Route path="employee" element={<Employee />} />
    <Route path="publisher" element={<Publisher />} />
  </Route>
  <Route path="/" element={<Dashboard navbar />}>
    <Route path="other" element={<Other />} />
    {/* ... */}
  </Route>
</Routes>

This would allow you to do the following in dashboard.jsx:

import { Outlet } from 'react-router-dom';

export default function Dashboard({ navbar }) {
  return (
    <>
      {navbar && <Navbar />}
      <Outlet />
    </>
  );
}

Instead of one single Dashboard component that can be rendered with and without navbar, you could also just use two different components for the two different layouts.

<Outlet /> will be filled with the element provided under the nested route. (<Admin />, <Other /> etc.)

For a more details about nested routes checkout the relevant section in the React Router tutorial.