Create Sidebar React js using React router dom

App.js

import "./App.css";
import Navbar from "./Navbar";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Products from "./Products";
import Contactus from "./Contactus";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/admin" exact={true} element={<Home/>}></Route>
          <Route path="/admin/products" exact={true} element={<Products/>}></Route>
          <Route path="/admin/contact" exact={true} element={<Contactus/>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

Home.js

import React from "react";
function Home() {
  return (
    <div className="comp">
      <h1>HOME</h1>
    </div>
  );
}
export default Home;

Contact.js

import React from "react";
function Contact() {
  return (
    <div className="comp">
      <h1>Contact Us</h1>
    </div>
  );
}
export default Contact;

Products.js

import React from "react";
function Products() {
  return (
    <div className="comp">
      <h1>Products</h1>
    </div>
  );
}
export default Products;

Navbar.js

import React, { useState } from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";
import { SidebarData } from "./SidebarData";
function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => {
    setSidebar(!sidebar);
  };
  return (
    <>
      <div className="navbar">
        <Link to="#" className="nav-menu-icon" onClick={showSidebar}>
          sidebar
        </Link>
      </div>
      <div
        className={sidebar ? "sidebar-container active" : "sidebar-container"}
      >
        <ul className="sidebar-items">
          <li className="sidebar-toggle">
            <Link to="#" className="nav-menu-icon" onClick={showSidebar}>
              sidebar
            </Link>
          </li>
          {SidebarData.map((sidebaritem) => {
            return (
              <li
                key={sidebaritem.id}
                className={sidebaritem.cName}
                onClick={showSidebar}
              >
                <Link to={sidebaritem.path}>
                  <span>{sidebaritem.title}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
}
export default Navbar;

Navbar.css

.navbar {
  background-color: #060b26;
  height: 8vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav-menu-icon {
  margin-left: 2rem;
  font-size: 2rem;
  color: white;
  max-height: 2rem;
  background: none;
}
.sidebar-container {
  background-color: #060b26;
  width: 14rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: -100%;
  transition: 1s;
}
.sidebar-container.active {
  left: 0;
  transition: 500ms;
}
.sidebar-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 3rem;
  list-style: none;
  padding: 8px 0px 8px 16px;
}
.sidebar-item a {
  text-decoration: none;
  color: white;
  font-size: 1rem;
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-radius: 4px;
}
.sidebar-item a:hover {
  background-color: rgb(69, 69, 197);
}
.sidebar-items {
  width: 100%;
}
.sidebar-container .sidebar-toggle {
  display: flex;
  height: 60px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.7rem;
}
span {
  padding-left: 1rem;
}

SidarData.js

export const SidebarData = [
  {
    id: 1,
    title: "Home",
    cName: "sidebar-item",
    path: "/admin",
  },
  {
    id: 2,
    title: "Products",
    cName: "sidebar-item",
    path: "/admin/products",
  },
  {
    id: 3,
    title: "Contact Us",
    cName: "sidebar-item",
    path: "/admin/contact",
  },
];