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

add `display:none` to the navbar if the condition is met. use a state to do this and change the state value based on condition — Roohullah Kazmi, Apr 21 '22 at 16:28

codmitu · Answer 1 · 2022-04-23T11:00:36.767

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>
  )
}

edited Apr 23 '22 at 11:00

answered Apr 22 '22 at 10:16

codmitu

636
7
9

The code in which place i put in the `App.js` under the navbar Route??? – vinod sharma Apr 22 '22 at 17:58
the code above should replace your simple `` where you render it, im guessing you have it in App.js – codmitu Apr 22 '22 at 18:00
Yes i rendered in the App.js – vinod sharma Apr 22 '22 at 18:10
i edited the code, is it working as supposed to? – codmitu Apr 22 '22 at 18:17
hey after doing that My website did not work and Found an error on the console. `Uncaught Error: useLocation() may be used only in the context of a component` – vinod sharma Apr 23 '22 at 10:38
yes you need to import the Router eg: `import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'` thats how you use it – codmitu Apr 23 '22 at 10:59
I already import that – vinod sharma Apr 23 '22 at 11:00
are you sure the navbar is in the router? [https://stackoverflow.com/a/70094611/14548500](https://stackoverflow.com/a/70094611/14548500), I don't know how else to help you – codmitu Apr 23 '22 at 11:04
This is condsandbox please check `[condesanbox](https://codesandbox.io/embed/reverent-jackson-tzdz7m?fontsize=14&hidenavigation=1&theme=dark) – vinod sharma Apr 23 '22 at 11:19
id don't know what's UserState but i think you shouldn't wrap Router in other elements, try putting UserState in index.js and wrap it and if you want to wrap something like the Router and ToastContainer add an empty <>> instead of a div – codmitu Apr 23 '22 at 11:44
`UsereState` is the Context that wrap ***App.js*** – vinod sharma Apr 23 '22 at 12:14

score 0 · Answer 2 · edited Apr 22 '22 at 09:34

0

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>

edited Apr 22 '22 at 09:34

3limin4t0r

19,353
2
31
52

answered Apr 21 '22 at 16:38

Ihang Ching

1

I want to hide the navbar if a user is login and the pathname is `/admin` `/employee` `/publisher` – vinod sharma Apr 21 '22 at 16:53

3limin4t0r · Answer 3 · 2022-04-22T10:58:43.843

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.

score 0 · Answer 4 · answered Jun 14 '23 at 07:32

0

  // Check if the current page is the dashboard page
  
const isDashboardPage = router.pathname.startsWith("/dashboard");

{!isDashboardPage && ( 
<nav>
//enter code here
</nav>
)}

answered Jun 14 '23 at 07:32

kkg

1
2

I am using NextJs – kkg Jun 14 '23 at 07:33
You should add explanation. – Super Kai - Kazuya Ito Jun 15 '23 at 07:15

hide Navbar if user inside dashboard using React js

4 Answers4