how to create sidebar in react JS | dashboard sidebar | responsive sidebar | navbar react router v6

that was awesome

obrigado pelo conhecimento, me ajudou muito!

Thank you so much for sharing this sidebar

I followed this tutorial and it helped me a lot in less time. Thankyou sooo much

Can i get this in html ,php,css

Plzz donot write . container {display:flex}

Thank you boss manh

Thanks bro

Great video, Thanks a lot!!!

Thank you very much

absolutely life-changing it really helped me a lot thank you

thank you so much for the tutorial

Turned out really well! Changed some styling and other things to fit in my project but it got better than expected!

thanks a lot

I have both navbar and sidebar how i can code?? Coz my sidebar is nt wrkng as i click on link it redirect to page not found

Thanks a lot brother

Thank you so much bro. What font do you have in your vs code?

dude this is amazing

life changing ,such a nice way of explaining ,golden gem

This is super. Thank You!

What if I need this in wordpress

Good job Man !!👍

How do you make it position fixed

Thanks

I try this code but I have one issue that when I use
<BrowserRouter>
<sidebar>
<Routes>
<Route path="/" element={<Dashboard/>}/>
<Route path="/dashboard" element={<Dashboard/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/comment" element={<Comment/>}/>
<Route path="/analytics" element={<Analytics/>}/>
<Route path ="/products" element={<Products/>}/>
<Route path ="/productlist" element={<ProductList/>}/>
</Routes>
</sidebar>
</BrowserRouter>
in app.js page path only change but it doesn't navigate to another page.


Instead I try this
<BrowserRouter>
<Sidebar> </Sidebar>
<Routes>
<Route path="/" element={<Dashboard/>}/>
<Route path="/dashboard" element={<Dashboard/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/comment" element={<Comment/>}/>
<Route path="/analytics" element={<Analytics/>}/>
<Route path ="/products" element={<Products/>}/>
<Route path ="/productlist" element={<ProductList/>}/>
</Routes>

</BrowserRouter>



It navigates but display:flex ; property does not work; navigation page shows below the side bar. Can you please give suggestion to fix this.

Нормальные люди: используют GitHub
Автор: - Загружу-ка код на странный файлообменник

Thanks

hellow.. i was able to create and understand how you made this but i dont know how am i supposed to create a dropdown in Dashboard ..

Thank you for the video 🤝

very helpful, thanks.

hello am facing an issue ....like when i use <main>{children}</main> then my whole side bar gets repeated dont know how
pls help me and thanks in advance! happy coding

❤️

thank you !!!! Needed this for an Electron app perfect

This is super cool, i have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website

This is really helpful. Thank you.

What if I have submenu, how do I handle the navigation of the submenu?

kudos webcoder 🤗

activeclassName is not working for me

Awesome bro
If you explain this then it will be outstanding

Hie so using

<BrowserRouter>
<Sidebar>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/dashboard" element={<Dashboard />} />

</Routes>
</Sidebar>
</BrowserRouter>

its taken as a component right ? and it displays on the main page. So if that sidebar to be displayed on localhost:/3000/dashboard/ only how do i do it ?

What if I want to align one item at bottom of sidebar can you please help ?
example: Lets say I want only product list at bottom of sidebar.

Thank you for sharing this, it was just what I was looking for. Much appreciated!

keep it up bro.. that's awesome for beginers

how will you add login page? in this as login page as no sidebar,

thanks man!

Thank you sir

Thank you

thanx men

Thnks bro

Well done