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!
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
I think you explained things well enough for people who are familiar with the hooks and tech stack you're using. I didn't have a problem at all. The title is "Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS" not "Let me hold your hand while we do something with 3+ layers of abstraction" Haters gonna hate, haha. Amazing job Hosna!
Hey, thanks for a great video. What if I want a slightly wider side nav? Can't get the wrappers to play ball. using w75 instead of w60. Even Cursor is at a loss.
Honey, you just gained a subscriber. Thanks for all you do. A quick one, I noticed that this side nav does not have a logout option. What If I want to have a logout option? And the side nav is for users mostly or maybe an admin. Any thoughts?
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?
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.
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.
@@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);
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
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"
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 }, }, };
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?
@@hqasmeiThis have a fix? Another cool thing I think its to add the animation of the mobile links (open close) to the dropdown menu of the desktop sidebar
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 RUclips ?
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🥹
Same. NextJs newbie, wished I started writing with NextJs last year.
Very beautiful! Simple, robust, flexible without much and able to be extended. Touching perfection. Well done!!!
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 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 ! :)
You are a great teacher. Love from Karachi Pakistan.
gracias, lo veo en spanish, y aun así se entiende, es excelente !! saludos desde uruguay!!
I think you explained things well enough for people who are familiar with the hooks and tech stack you're using. I didn't have a problem at all. The title is "Build a Responsive Side Navbar w/ Submenu using Next.js 13 and Tailwind CSS" not "Let me hold your hand while we do something with 3+ layers of abstraction"
Haters gonna hate, haha. Amazing job Hosna!
Wonderful Sidebar and Animations, wow!
This was very helpful, thank you for posting this.
This is something I've been looking for . Thank you 👍
You are so gifted thank you so much!
Excelent content. TY very much for share it with us.
Very nice!! Excellent job!!
Very good job
im having a issue, it seems the screen is not recognising the side bar when going reponsive
You answer my question mom 😁 thanks
Happy to help!
I wish you could explain further for some of the things you do but thanks!
Thanks for repo
Hey, thanks for a great video. What if I want a slightly wider side nav? Can't get the wrappers to play ball. using w75 instead of w60. Even Cursor is at a loss.
Amazing video. Helped me a lot. I just want to know if there's a posibloty to add a sign out button?
HOW DID THE HEADER NOT being stick at the top and not scrolling as well? what did you do?
THANK YOU!
Hello, can this be achieved in react and react-router-dom?
Help me so much, but i thinks it's better to show the whole code after copy pasting. Thanks so much
Honey, you just gained a subscriber. Thanks for all you do.
A quick one, I noticed that this side nav does not have a logout option. What If I want to have a logout option? And the side nav is for users mostly or maybe an admin. Any thoughts?
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?
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.
Really nice, would be better if the side bar is retractable.
You read my mind, made another video here that is retractable ruclips.net/video/0QPXqRifh-c/видео.html
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);
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
Anyone - any ideas on how it can be ported to React?
Thanks.
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!!
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!
can you please do this with next js 14
Merc Hosna!
Super
Hello sister I want to learn nextjs . Your video is good .
I need drawer in this sidenav bar
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?
@@hqasmeiThis have a fix? Another cool thing I think its to add the animation of the mobile links (open close) to the dropdown menu of the desktop sidebar
go to kitchen for cooke mahshy (this it egyption food)
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 RUclips ?
is this a "watch me build" kinda vid or a tutorial. everything was poorly explained
if you're just gonna copy and paste literally EVERYTHING, then don't make a video about it at all.
Appreciate the feedback!