Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion

Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion
Code A Program...
GitHub src link :github.com/Sridhar-C-25/sideb...
Thanks for watching,
Follow us on :
Github : github.com/Sridhar-C-25
Instagram: / codeaprogram
#reactjs
#reactjs

[@rudrakshya1]

This is called perfect professional coding. Its helps me so much.

[@nicolassuarez2933]

Outstanding!!!

[@shivanand0297]

it would be game changer if you have would have added your voice over in this with the explanations of code :)

[@oketafred]

Awesome content

[@Deus-lo-Vuilt]

nice video bro

[@shivanand0297]

awesome bro thank you so much

[@lebidhacalaye5818]

perfect , thanks

[@BarklegneGatahun]

Thank you brother you saved me! You have got a new subscriber.

[@CodeAProgram]

❤️❤️❤️

[@GopinathM-gz2jm]

This is perfect sidebar, but there is an issue, when i add any pages with space like(new profile) inside sumbmenu, its not routing to that page, please tell me an solution

[@aryansrivastava6692]

Thank You for this tutorial

[@CodeAProgram]

Share and subscribe

[@broken_jail2506]

how do I make the sidebar fixed to the screen such that even when I scroll down its still there???

[@nitinbansal9961]

Good Sidebar, thanks for sharing the code. I found few problems, but apart from its good.
1) The Sidebar is not sticky on big screen. When the new content is added scrolls with the content.
2) The responsiveness works on browser dev mode but on actual mobile browser the text next to icon disappears from some reason. I'm trying to find out the reason but if you have quick solution, please share. Thanks.

[@nitinbansal9961]

The problem is with lists:

Authentication

for some reason, the mobile browser is unable to read the text pasted between Navlink tag from react-router-dom. Weird behaviour, never seen it. :)

[@alexanderpetkov97]

@@nitinbansal9961 did you manage to find a solution for this? I think the problem is with the min-w-max class of the icon, changing it to w-10 for example looks better in my case.

[@amirawebsystems5217]

@@alexanderpetkov97 it worked for me here too w-10 thanks

[@broken_jail2506]

how did you fix the sidebar to be fixed on the page, even when you add new content and scroll down??

[@alexggk]

You can add something like this, but I need to check the mobile form

[@divyasingh6981]

Tailwind css use in commercial website, so it will be free or paid

[@QhoirulAnwar]

please add sweipe gesture on mobile, to show sidebar menu

[@unpamprogramming4497]

how route to login?

[@perspectivelevel7969]

The code is excelent, but i have a cuestion, if i create the page Login.jsx how do I leave it out of the ?
gpt chat did not know how to give me the answer no matter how many times I tried jaja
thx in advance!

[@CodeAProgram]

Great question, you want to write some condition using current path url '/login'
You have multiple url restrictions
Let excludeLayoutURLS = [/login, /signup]
Write condition excludeLayoutURLS include current pathname not render navbar and footer
Like this,
excludeLayoutURLS.includes(pathname) === false ? : null

[@03015988221]

How to add submenu page