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;