Hello Pradip, this tutorial is jam packed with knowledge, not only did i learn how to implement the toggle functionality the proper way but also these cool animations that we can add on to it. Keep it up! 👍
Awesome tutorial. I try some way, but can not add the animation in the submenu level ("project") when expand it. It will be perfect if we could add animation when expand the submenu and make it smoothly
Very Beautiful now Guyz let do one more thing add an on click function to your content side to set open to false. When you click anywhere in the mail page this will hide side sidebar for you automatically happy coding and you can do more depending on device size
I think you are having wonderfull knowledge on front end ,Iam having good knowledge on javascript but not on css , so could you please suggest me a good way to get command on css
Add hover on the icons when minimized so that a user can know what the icon means, also do you have one for the top nav in Tailwind,and also which plugin are you using for Tailwind. Thanks
It is good tutorial thank you but one thing to mention - it is not good to use boolean in sebMenuOpen since we can have more than one dropdown menu and it set to true it will open all the dropdown menus instead it is clear to use menu Id or name and then open according to name or ID. Despite that it is useful tutorial
Hi! , Thanks for the video!!! ... I found a simple Bug, it shows an error in console for the "Key" atribute , but it solves adding insted of the shorthand use the "Fragment" and adding the Key atribute on it like: insted of adding it on . Thanks again for the video!!!, please convert it on a Responsive mobile first sidebar!
Hi, first of all thanks for the tutorial it was helpful :) But i need help because i did the submenu part but i have more than one category who has submenus . So when i click the arrow it runs all three categories' submenus. But i only want to see the one i clicked. Do you mind help me? Pls
i had similar problem in a vue project. the way I solved it was to add a property to the sidebar links object of open: false. Whenerver I click on the link, I run a func that takes the index as a parameter and iterate through the links. if link !== sidebarLinks[index] i would set it's value to false, otherwise set to it's opposite. then you have to implement the collapse logic for the link the way you like, since i use vue it wouldn't apply to react
Hello Pradip, this tutorial is jam packed with knowledge, not only did i learn how to implement the toggle functionality the proper way but also these cool animations that we can add on to it. Keep it up! 👍
Thank you for the detailed guidance. It's easy to follow. Good job.
Simple, clear and robust. Awesome tutorial.
great tutorial man, and thank you for no background music. This is the right video format!
This is amazing! great design, good explanation and easy to follow. Thank you so much for this tutorial!
Thanks for this simple and useful tutorial 🔥
Simple and straight to the point. Thank you Pradip.
Great tutorial. Well explained. Just what I was looking for
10K claps for video content. Thanks for sharing!
Thanks, I had to modify it a bit as I use Laravel/Livewire but the Tutorial is easily convertible to other platforms. Great job!
Thanks for sharing your use case!
Awesome side bar with cool translation, Awesome👍👍👍
Would be awesome if you could provide the code. It would be much easier to test it out.
Thank You for these helpful video, I always use to watch your react native tutorial.
Thank you Pradip ! 🙏
20:09 where did you declare the element menu and index??
Awesome tutorial. I try some way, but can not add the animation in the submenu level ("project") when expand it. It will be perfect if we could add animation when expand the submenu and make it smoothly
i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head
Great vid. Exactly what i needed. Thank you for sharing. Its a sub.
const Menus = [
{ title: "Dashboard" },
{ title: "Pages" },
{ title: "Media", spacing: true },
{
title: "Projects",
submenu: true,
submenuItems: [{ title: "Submenu 1" }, { title: "Submenu 2" }, { title: "Submenu 3" }],
},
{ title: "Analytics" },
{ title: "Profile", spacing: true },
{ title: "Setting" },
{ title: "Logout" },
];
Thanks for your excellent tutorial.. was trying to implement smooth transition in one of the sidebar but was confused.. thanks to you
Amazing tutorial, really appreciate it.. keep up the good work
thank you for your tutorial
thanks for this! really good tutorial
Hi, thank you for this great tutorial, is there a way to do this without react and use just pure js and css? Thank you.
Good video , similar to me but I am using React js and tailwind css
Keep it up
Thanks to Code A Program for sharing the repo!!!
Amazing, thank you for tutorial
Great video. Thanks for sharing
Very Beautiful now Guyz let do one more thing add an on click function to your content side to set open to false. When you click anywhere in the mail page this will hide side sidebar for you automatically happy coding and you can do more depending on device size
Hi - do you have the source code from this video somewhere? I could not find it in your github repos. Thanks!
Thanks for this great one.....❤
How about if we have 2 or much submenus? there's open all when I click one
I too bumped into this issue... found a solution? Please share...
Great tutorial. I'm using Vuejs but could easily follow the tailwind bit that I was interested in.
I think you are having wonderfull knowledge on front end ,Iam having good knowledge on javascript but not on css , so could you please suggest me a good way to get command on css
This is fantastic. thank you so much
Awesome tutorial. Thank you!
Add hover on the icons when minimized so that a user can know what the icon means, also do you have one for the top nav in Tailwind,and also which plugin are you using for Tailwind. Thanks
Wonderful. Thank you for sharing this.
Excellent tutorial!
Awesome, thank you!
Great video!! Thanks a lot!!!
Very nice tutorial !! Thank you very much. How to make entire "Project" clickable instead of just arrow icon ? Please help
Best tutorial
Really nice and helpful... Thanks!
Loved it!!
Man thank you your a great teACHER, curious I noticed you used the sequencer for drums, but can't I just play those softs via the
simpl clear and super super
Great video as always, how about the mobile view of this sidebar?
its very simple and usefull
Thanks for liking
Background-color doens't fill all elements if the size of elements is larger than the size of the screen. Need to do adjustments related to h-screen
It is good tutorial thank you but one thing to mention - it is not good to use boolean in sebMenuOpen since we can have more than one dropdown menu and it set to true it will open all the dropdown menus instead it is clear to use menu Id or name and then open according to name or ID. Despite that it is useful tutorial
Hi! , Thanks for the video!!! ... I found a simple Bug, it shows an error in console for the "Key" atribute , but it solves adding insted of the shorthand use the "Fragment" and adding the Key atribute on it like: insted of adding it on . Thanks again for the video!!!, please convert it on a Responsive mobile first sidebar!
great stuff thank you very much
great work
very very nice... Thank you
What if there are multiple submenus, when sunmenuOpen = true all submenus are opened
Have you been able to fix this issue? If not i can show you my work around
@@Jazz__Dev Hi... Please share the workaround... many ppl are facing this issue...🙏
@@vasudevg1165 Not sure I'm following again please. Could you be more details regarding what the main issue is so that I can know where to look.
@@Jazz__Dev the issue of all submenus expanding when any top-level item is clicked
Opening the inspect tool at the bottom, misalign the height of sidebar.
from where can I get its code?
Hi, first of all thanks for the tutorial it was helpful :) But i need help because i did the submenu part but i have more than one category who has submenus . So when i click the arrow it runs all three categories' submenus. But i only want to see the one i clicked. Do you mind help me? Pls
Same problem
Me, too... did anyone find a way around the issue?
got the same problem
Thank you, but i have a problem . if i have two menu has submenus when click on one, both of submenus open. how can i solve this
i had similar problem in a vue project. the way I solved it was to add a property to the sidebar links object of open: false. Whenerver I click on the link, I run a func that takes the index as a parameter and iterate through the links. if link !== sidebarLinks[index] i would set it's value to false, otherwise set to it's opposite. then you have to implement the collapse logic for the link the way you like, since i use vue it wouldn't apply to react
Awesome Video ++++++++++++++++++++++++ 😃
merci beaucoup a toi :))
Helpful Thankyou
my problem is when menus have multiple dropdown and then all submenu is open
Thx you very muchhhhhhhh
Awesome
very nice
where can i get the code of this...pls anyone can share it.
Iam asking same
TY
Hiii bro in this video please add routing whis is must important for us as soon as possible
How to add routing in this menus
How to place navigation links?
thanks
please did more videos like this
Sure. Thanks for your comment & support.
how to make it scrollable on the menu?
I made h-fit instead of h-screen and the size of the sidebar became dynamic
@@vasudevg1165 thank you
is there any repo bro?
16:22 bookmark
Is this device responsive
the font that you are using in the code it is really annoying try to use the normal font aside from this , good work thank you and goodluck .
❤
where is the source code?
Where is code please send me
Superb! It is interesting why when you choose w-18 instead of w-20 duration-300 not works. Thank you
Well... I found the issue. w-18 no exists in tailwind.
code please
greatg
where's the mobile layout
source code ?
all workеd
thank you bro
Source code
need code
eror in console
BEEST!!!
Post source code bro
Thanks for the excellent tutorial!