Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS
2024 ж. 10 Мам.
40 056 Рет қаралды
Learn to Responsive Side Navigation with Submenu dropdowns using Next.js 13 and Tailwind CSS in this tutorial. I'll explain each section of the code, highlighting key components, and provide insights on how everything works together to create the side nav.
📚 Resources
- GitHub Repo: github.com/hqasmei/youtube-tu...
- Icon Library: icon-sets.iconify.design/
👩💻 Let's Connect
- Discord: / discord
- Github: github.com/hqasmei
- Twitter: / hqasmei
- LinkedIn: / hosnaqasmei
⌛ Timestamps
00:00 Intro
00:19 Prerequisites
03:19 Routes
05:17 Header
14:50 Side Nav
20:24 End
I took me soo much scrolling even after searching with exact title. Great tutorial.
Your content is so underrated ! I learned a lot through your videos ! :)
This is something I've been looking for . Thank you 👍
This tutorial is truly exceptional! I've learned so much. The content is well organized and follows best practices. Please, keep creating such fantastic videos
hablou
I really like that youve put the constants into a separated file. I sometimes struggle with figuring out what props will the component be carrying and where it would be "tidier" to define them. (A nextjs newbie here) Thank you!
and like i even found it helpful to "visualise" what routes we will eventually need by putting them all out like that first. Great job, for real🥹
Wonderful Sidebar and Animations, wow!
Excelent content. TY very much for share it with us.
You are a great teacher. Love from Karachi Pakistan.
You are so gifted thank you so much!
THANK YOU!
Very good job
Finally... thanks.
thank you so much!
Awesome tutorial! I really like the straightforwardness in your tutorials. Though may I ask is there a way to disable the sidebar in a specific page such as /login?
Yes, great question! So you are going to want to have a different layout that the one I had. Right now I am using the root layout isn't setup to not have the sidebar. You can checkout this repo, better example github.com/hqasmei/site-muse Let me know if you have any other questions!
One interesting thought I would have here would to use, usePathname which is a client component hook allowing you to check if (!isLoginURL) return ( ); return ( ); Or whatever you want to render when there This is a really hacky way though since the server cannot read URL in Nextjs you would have a layout shift since it’ll render either your fallback because usePathname can return null or the return statement that with until the component mounts on the client and can read the URL. Another hacky way would be to set a cookie using server actions, which are stable as of Next14, specifically for the /login route. So essentially you could on your app load set a cookie { name: “loginRoute” value: “false”, path:”/login” } then prop drill the reading of this cookie and then your client component would know if it needs to render that sidebar based on the value of that cookie. See nextjs.org/docs/app/api-reference/functions/cookies and nextjs.org/docs/app/api-reference/functions/server-actions. I do still agree with having a different layout, just interesting ways you could solve your problem. They are hacky but it’s just a cool thought process on the different solutions.
Great video I followed your amazing tutorial. Thought I'd challenge myself and add some more items in the dashboard page but I've ran into an issue with responsiveness. The table I placed in my Dashbaord page does not want to resize based on the "device" or me shrinking the browser screen. Has anyone else ran into this issue?
Super
Great video, thank you. Curious, what VS code theme are you using?
Thanks Donald, I'm just using the default theme.
@@hqasmei thank you, keep up the great work!!
Anyone - any ideas on how it can be ported to React? Thanks.
You answer my question mom 😁 thanks
Happy to help!
Help me so much, but i thinks it's better to show the whole code after copy pasting. Thanks so much
Merc Hosna!
can you please do this with next js 14
It was a really helpful tutorial. I have kind of a silly question . Where are all the components and files being rendered cauz I wasn't able to locate an index.tsx file during the entire tutorial
Nextjs app router uses layout.tsx
I know it sound stupid, but how can I change the menuhamburger color?
No, not a stupid question Lucas. If you go inside header-mobile.tsx file and find the Path component, change "stroke" to whatever hex color you like, like stroke="#22c55e"
It's not stupid, it is a very valid question. Happy coding!
I need drawer in this sidenav bar
💗💗
This was going so well. But when you open and close the mobile menu a few times you get error errors.mjs:19 Uncaught Error: Only two keyframes currently supported with spring and inertia animations. It doesn't seem to like const sidebar having two 'spring' transiton types. So I set the first type to 'tween' which is the default and all work fine now.
Looks like someone else got a similar issue, let me look into it. Not sure if any of the packages changed.
@@hqasmei Hi, I did use the most up to date versions of all packages. I also noticed that NPM run dev, the first time the page loads, I see no chevrons in the sidebar and the mobile menu toggle wont work. I have to refresh to get everything going. Running Build does get everything working on first load though.
I think the reason the chevrons dont appear on the first page load is there must be a delay in getting the info from the usePathname() hook. I manage to get round this by setting useState to when we have a path. so under the MenuItem compoenent, we can say const pathname = usePathname(); const isCurrentPath = item.path === pathname; const [subMenuOpen, setSubMenuOpen] = useState(isCurrentPath);
I was not able to use "SPRING" type animation it keeps crashing saying '' Error: Only two keyframes currently supported with spring and inertia animations. '' so I switch it for tween type it does not look as good as yours haha... here is the code if anyone has the same problem const sidebar = { open: { width: '100%', transition: { type: 'tween', duration: 0.3, // Adjust duration as needed }, }, closed: { width: 0, transition: { type: 'tween', duration: 0.3, // Adjust duration as needed }, }, };
Looks like someone else got a similar issue, looking it to it will get back to you.
this is a very bad example. cool animation though. if i have a lot of menu items then i'm unable to scroll through the navigation on mobile. same thing for desktop
Appreciate the feedback! Good point if there are many menu items. Will think about how it should function for that use case. If you got any suggestions?
Too complecated. Ha ha ! That's what React.js making any simple things complecated ? Hello ! Is there any one who teach things simple and easy on KZhead ?
if you're just gonna copy and paste literally EVERYTHING, then don't make a video about it at all.
Appreciate the feedback!