Use sidebar on specific pages

19 Views Asked by At

I want to use Sidebar only with the admin pages without it appearing on the rest of the pages, I tried this code, but the sidebar appears on all pages

function App() {

 return (
  <div className='flex'>
     <BrowserRouter>
     <SidebarAdmin/>
      <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/cart' element={<CartPage/>}/>
      <Route path='/menu/:menu' element={<MenuPage/>}/>
      <Route path='/brand' element={<BrandPage/>}/>
      <Route path='/category' element={<CategoryPage/>}/>
      <Route path='/*' element={<Error404Page/>}/>
      <Route path='/register' element={<RegisterUserPage/>}/>

      {/* route  admin */}
      <Route path="/" element={<ProtectedRouteAdmin/>}>
      <Route path='/admin-panel/secure/Dashboard' element={<Dashboard/>}/>
      <Route path='/admin-panel/secure/Dashboard/Setting' element={<SettingPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/users' element={<GetUserPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/brand' element={<GetBrandPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/brand/add' element={<AddBrandPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/brand/update/:id' element={<UpdateBrandPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/product' element={<GetProductPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/product/add' element={<AddProductPage/>}/>
      <Route path='/admin-panel/secure/Dashboard/product/update/:id' element={<UpdateProductPage/>}/>
      </Route>
      {/* end route  admin */}


      {/* route  user */}
      <Route path="/" element={<ProtectedRouteUser/>}>
      <Route path='/dashboard' element={<DashBoardUserPage/>}/>
      <Route path='/dashboard/profile' element={<UpdateProfileUserPage/>}/>
      <Route path='/dashboard/address' element={<UpdateAddressUserPage/>}/>
      <Route path='/dashboard/orders' element={<OrderUserPage/>}/>
      <Route path='/dashboard/order/:id' element={<MoreDetailsOrderUserPage/>}/>
      </Route>
      {/* end route  user */}


      </Routes>
      </BrowserRouter>
  </div>
 );
 }

export default App;

0

There are 0 best solutions below