ReactJS Sidebar Navigation Tutorial Using React Router and Hooks
HTML-код
- Опубликовано: 13 июн 2021
- Hi Friends,
In this tutorial we will create sidebar navigation for a dashboard project using reactjs react router and hooks.
Source Code
webscript.info/rizwan/reactjs...
Please Like, Share and Subscribe for Support.
You can connect with me on social media sites.
Instagram: / riizzzwann
linkedin: / rizwankhan2
facebook: www. webscript.info
github: www.github.com/Rizwan17
youtube: / rizwankhandeveloper
ReactJS Beginners Series
• ReactJS Fundamental 2021
MERN Stack Series
• Mern Stack | Ecommerce...
Digital Ocean Deployment Tutorial
• How to deploy a React,...
![Oscar Maydon x Junior H - Volver Al Futuro [Official Video]](http://i.ytimg.com/vi/sa52xabMSB8/mqdefault.jpg)
You saved me by showing how to to the sidebar collapse trick. So damn good
Great course, I learned a lot, I was waiting for code in the search box, thanks teacher Rizwan,
Thank you man, this video clear out some of my doubts.
Once again thank you.
For anyone looking for specific part:
00:00:35 - 00:01:47 - Demo
00:01:48 - 01:20:40 - Styling
1:20:41 - React router
u r too good and
ur cs skill is also too good
this helped me a lot
This is impressive. Thanks Rizwan, i've subscribed.
amazing one was much needed right now thank you
good one
Good job bro
Thank you a lot, I learned more than react here thank you
Nice video
Thanks for your effort bro...
buddy... u r literally saving my life from my team leader...😂😂😂... thank u so much.... u r an inspiration to me...❤❤😍❤😍
Glad it helped you 😍
Timeline: 41:23
So here, you added 1 more toggle-menu-btn which faces to right(outside one) & second one which faces towards left.
It's not good to increase more javascript code if you can fix it with 1 lime of css
Here's my solution to turn left arrow towards right direction whenever clicked:
Instead of this in your ".side-menu.inactive .toggle-menu-btn " you can add
transform: scaleX(-1);
Making the css code look like:
.side-menu.inactive .top-section .toggle-menu-btn {
right: -60px;
transform: scaleX(-1);
color: blue;
top: 10%;
}
Thanks for this tutorial. I learned a lot from this. Keep your amazing works. Best wishes.
Thank you so much
tks guy !!
thank you bro
Great tutorial and it's very easy to follow.
I would like to ask how change the code, so it works on the new version of react (it has a problem wih the router)
Thank you so much
i am from bangladesh.your content is very nice
Its need lot of passion to invest 2hours and upload if view is less it demotivate but you know it will help you to improve your skills
Thank you for such an informative video. You are a great teacher. Please keep up the good work !! :"))
Thanks for motivation. i will keep posting the videos
Awesome bhai
Thank you 😊
Can you do a video about merging this dashboard with mern store with some functionality
Great course, please add with tailwindcss, thanks
Hi Rizwan,
I can definitely say, you are the best teacher of online channels. In this tutorial, when sidemenu increased (15 menu items along with submenu) means, how can we show the menus in fixed sidemenu area? when one submenu open, another submenu should not open anyway, Please cover these scenario in your future tutorial please.
This is my request Rizwan. whenever you create any tutorial, please cover all the scenario, after that you will get more subscribers. --------> Note : Subscribed
upload regularly ...
Add More Functionality to MERN E-Commerce Brother please
Hi , Rizwan
Your mern series is awesome
But in the url bar when access sign in page manually after login it shown for half sec or 1 sec how to do loading instead of signed component
Pls reply soon m working on project
Did your keyboard survive after this tutorial? hahaha Thanks a lot for this video (=
Nice project and we shall be needing the header section. to be included...Thanks
I will implement in another version of it
@@RizwanKhanDeveloper please how soon is the next version coming...
I think I found my guruji!
merci pour ce magnifique explication sur bootstrap sur d'être bref mais j'ai une question pour vous, comment faire une menubar responsive comme celui d'amazone? pour plus de détails le menubar d'amazone est glissante en responsive sans burger. merci answer even in english please
Hoi!
You can do it different(responsive) for different screens, such as normal(phone screen) 768px(computer/tab) screens.
With this css code:
@media screen and (min-width: 768px) {
.your-class {
your-css-code: for-bigger-screen;
}
}
/* You can keep increasing the min-width from 768px to as much as you want */
please, work on search functionality as well
Thanks, dear friend! How make it responsive?
Hi Rizwan,
How can MenuItems.js can written in class component instead of function component.
const{name, subMenus, to} = props;
const [expand, setExpand] = useState(false);
const [inactive, setInactive] = useState(false);
How to convert these into class component?
What extensions are you using in VS Code?
Bro , please make it mobile responsive .overall awesome video
Sure I will update
Hi Rizwan
I am currently working on web-application developing tab-section similar to web-browser tab using reactis.
My requirements are-Tab-section similar to browser tab. On selecting a feature in side-navbar, a tab has to pop in the tab-section. On selecting a new feature in side-navbar, a new tab has to pop in the tab-section. Closing of tab.
I have gone through react-draggable-tabs, but it does'nt have on selecting a feature a tab has to pop instead it shows entire tab.
Please help me out in it.
I have not used react-draggable-tabs but if it gives you tab features then stick with this and implement your own popup on the top of tab section
@@RizwanKhanDeveloper could you tell me the logic for this pop up works. Thanks in advance.
please can you continue the Flipcart clone
Hi Rizwan, getting an error while adding the button icon
Hi Rizwan,
How can I give permission for role-based ( admin and superadmin) using this sidemenu.Can you please help me
the back groun color is not good i can't see the items ,but at all your toutorial is good ,Thanks
Sir can u show how to hide the default chrome scroll bar when we open sidebar
Yes we have css properties to design scrollbar just do google to find some css code. I actually missed it in the video but I will update the in repo not pushed yet
hello :) i realy liked the tutto you're so talented but please how i can convert it to react native
I'm currently working on an android app and i need this side menu
can you please help me?
You cannot use this in react native as this based on css and JavaScript DOM but I would suggest you to use react-navigation or search react native drawer
You better remove src folder once and create again. time saver
pls can we get same tutorial for next js... search all over youtube for dropdown sidebar with nextjs
Sure I will create one
Attempted import error:Switch is not exported from react-router-dom
How to resolve this issue.
Hi,at 39:15 onClick doesnt work for me what can i do?
Wordpress + react ke upar ek video banao bhai bahut dino se bol raha hu
Don’t know much about Wordpress
@@RizwanKhanDeveloper frontity.org me dekho
Wordpress rest api se react kar sakte hai but i don't know how to deploy frontity in WordPress
@@RizwanKhanDeveloper please frontity.org ke upar video banao deployment kaise karenge usme sample theme diya hai
how to highlight active page icon
Did your keyboard survive after this tutorial?
Responsive?
github repo please, Thanks
Sure I will update the link in description
Bro I have a request. Please make it mobile responsive. Please
Sure I will update it
@@RizwanKhanDeveloper thank you bro
I'll waiting bro
plzzzzz
Please give me suggestions for this issue
Also not a bad video to create sidebar
ruclips.net/video/-uoyljRyhEk/видео.html
Click bait TF not cool