ReactJS – Build a Responsive Navigation Bar & Side Drawer Tutorial
- May 24, 2024
- Posted by: MainInstructor
- Category: Angular Go JavaScript React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703965132_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS – Build a Responsive Navigation Bar & Side Drawer Tutorial
welcome to this video in this video we will use react J s to build a responsive navigation bar in this one here with a hamburger icon as you can see which we can click to bring up that side drawer and that therefore it gives us a nice page looking good on both desktop and mobile devices we’ll build this entirely from scratch without any third-party library except for a react I guess we’ll write the components on our own we’ll write the CSS code on our own and we will wire everything up on our own so let’s start so let me start building that responsive navigation inside drawer and for that I’ll create a new react project I’ll do that with create react app a tool which I already installed link can be found in the video description of course and the command simply is create react app and then the name of the project I’ll name it responsive nav bar and hit enter and now this will create a new project for me and install all the dependencies we need like for example well react definitely one of the more important dependencies we could have so this will take a little while let’s wait for that to finish and now that it finished I opened it in my IDE visual studio code and in there all use the integrated terminal to run that project now we can see the run command in the package.json with the start script we can bring up that development mode development server basically we can run that with NPM start or also with yarn start if you use yarn instead of NPM ever works and that opens up a new page in your browser this one here and this is our starting react project as create react app gives us now in there we find some starting files and as I said I wanna focus on that responsive navigation bar so I’ll not build anything else here instead let’s just build that and for that all first of all create a new folder in that source folder and alignment components to store my components in there which I’ll build and the first component of one I built is my navbar or the tool bar so basically the toolbar at the top and that will then have a hamburger icon which will open it site drawer so I’ll add a new component folder and I’ll name that tool bar starting with a capital T arm to indicate that this is a react component which we will also use with a capital character in JSX and in that folder I’ll create my tool bar dot J as file which will hold that component you could let it end with J as X but that is optional you don’t need that to write JSX code in that foul so I’ll just go with J s so in there I want to create a react component and for that I first of all need to import react from react this pulls in the package and allows us to write JSX code in here besides the build workflow which will compile that to JavaScript of course and now I’ll create my component in there and I’ll create a functional component storing it in a toolbar constant where I will get some props and where I will then return some JSX and that is just a shortcut for using curly braces and return statement if we use an arrow function we can omit that and just return our well return statement or the value we want to return and I’ll wrap it in normal parentheses so that I can return one statement but Dad will actually be multi-line JSX code so in there I’ll then return a header like this and in that header I’ll add a nav element and in that nav element I will have my my hamburger I can basically and some other navigation items which I could have so let’s add that and now in there let’s first of all add a couple of segments so to say because I will then add flexbox to position these elements in the toolbar the first segment will be my my hamburger I can basically so add a div here for that then I’ll add a div with my logo which may be should be clickable so let’s set this to a link which goes to the root page where I say the logo let’s close that and maybe also close that string here on the anchor tag and then last but not least I’ll have another div which can hold fervor navigation elements to the right of that and of course that’s just one possible mark-up variant you could use here you can position things in all kinds of ways this should work really well though now let me add an unordered list in there to hold all these navigation items like that and that every navigation item for me here will just be a link pointing to the root page because I don’t have other pages that could alt be a link controlled with react router though so you could add the router link there I’ll use normal anchor tags and then maybe we have products and now let me duplicate this and then we have users something like this let me now export this toolbar so export this as the default off this file and now I want to use it now to use it I’ll go to my app J’s file and in there I don’t need anything of that maybe leave that rapping death but at then I want to have my toolbar here at the top don’t need the logo now for the app CSS I will actually not need anything of that so actually I can just get rid of that CSS file remove it here too and now instead import my toolbar component from dot slash components toolbar and there it’s the toolbar file we can omit the file extension here and create react app projects it will add this automatically so to say now we can add our toolbar component here like this and if I save all of that it should work and here is my toolbar and not looking too pretty but hey we didn’t add any styling yet so let’s add some styling and for that I’ll add my toolbar dot CSS file in the same folder as the Jas file and I’ll import it here and this import will work due to project setup we have here which is able to also add CSS files or understand imports two days falls and then automatically inject the CSS code into our running application so this will handle the CSS code correctly now I’ll add a class here a class name as it is in J’s X naught class class name that’s important and this will be my toolbar now the navier– that could be toolbar navigation using some BM CSS style here then here I’ll leave that out I’ll do that later I’ll take care about that hamburger button later my logo here I’ll give this a class name off toolbar logo and then here I’ll have my whoops class name toolbar navigation items may be absurd ends we have the unordered list in there which we could also then select with the child selector basically and then we have our individual list items in there now let’s add some styling for the overall toolbar class which was added to the header I want to give this a width of 100% let’s also maybe make this fixed so let’s give it a position fixed here and let’s give it a background color and I will use this purple color our Academy and purple of course you can use any other color and now we get a colored toolbar the text color maybe not perfect yet but we’ll get there but we have the toolbar in one color at least now let’s also add some content below the toolbar in our app J’s file there I’ll add a paragraph where I say this is the page content and all I’m doing that for a specific reason because if I save that we don’t see that here we see some margin from that paragraph but we see that the paragraph somehow is hidden beneath the toolbar and that is because the toolbar is fixed and that does not work together with the paragraph or put in other words the paragraph does not respect the toolbar it does not place itself beneath the toolbar because that is not how fixed positioning works instead if you want to keep some space for the toolbar we can give it a height here maybe 56 pixels like this and then we can add that as some spacing above our paragraph so we could add a main element here and then move our paragraph in there and then give dad some styling and now I will well I guess reintroduce the app CSS file or we add some inline style here so there whoops we could add some style add javascript object now this is a syntax which confuses a lot of people by the way we get to double curly braces not because we have some fancy double curly brace mustache syntax as we have it in angular but because we use the normal curly braces to indicate that we have some dynamic value here and then we have inner curly braces to indicate or to simply create a JavaScript object like this so this is creating a JavaScript object and now on that object I can add a margin top now written in camel case because we’re now in JavaScript not CSS and assigning a string value of 56 pixels or maybe 64 to have the height of the toolbar plus some extra spacing it affects our toolbar because on the toolbar CSS I need to get that atop position of zero and the same for left so that this book gets positioned in the top left corner now this looks better obviously the items don’t fit into the toolbar but at least we have some spacing here between the paragraph and the toolbar so now this is working now back to the toolbar let’s work on that and let’s make sure that we control our text color there now actually all the text I have in there are links so what I want to do is I want to control toolbar links I guess or to be precise I want to style the logo and I want to style the other links in different ways so we can’t install the toolbar logo and then we can target toolbar navigation items and any link which is nested in that class so let’s do that here let’s target toolbar logo first the toolbar logo is placed on that diff so let’s target an anchor tag inside of that simply like this normal CSS selector let’s give it a color which is white remove the text decoration maybe since it’s a logo increase the font size to let’s say two REM like that if we now save this look at the logo it’s very big let’s maybe use 1.5 Ram and I also want to work on the sessioning of all of that with flexbox so i want to ensure that my navier– which holds all my diffs uses flexbox so for the tool bar navigation CSS class here which I’ll add here I’ll set the display to Flex if I now save this now if we already fixed some positioning now I want to Center everything in the middle vertically and the default flex direction is from left to right so it’s a row and therefore the positioning I wanna fix is the positioning on the cross axis so to say and you can watch our flexbox videos links can be found in the video description to learn more about that so here I will set this cross access positioning with a line items and I’ll set this to center with this added now the logo and all the other elements are centered vertically we still see that the spacing is a bit off and to find the reason we can open the developer tools and then simply inspect that and we see that our nav here simply is not following the height of the header so the fix is of course simple for toolbar navigation which is placed on that nav element I set the high to 100% and since this is nested in toolbar we take the height set up there so now with that that looks a lot better I can now also go to the navigation and give this some left and right padding so padding should be zero from top and bottom but maybe one rim from left and right awesome so now we got that logo here that’s looking good now let’s work on our other links and these links are placed in the toolbar navigation items class so let me add that here oops that class selector and now I want to target the links in there give them some white color and some text decoration on I also want to target them in the hover State and I want to target them in the act of state and you could easily add another selector when they have an active class for example if you want to change their styling when they are selected and their I will give them a color of our Academy and orange so if dad if I save this now it looks better but obviously I don’t want to have them in a list like that they are inside an unordered list which in turn is a child of toolbar navigation items so let’s add our toolbar navigation item selector and there the unordered list and they’re all set the list style to non I’ll remove all margin and padding that list would have and I’ll also give this a display of flex to position the list items in that unordered list next to jabbering so now they’re positioned next to each other but obviously some spacing would be nice so let’s target our list items now toolbar navigation items list item and they’re all simply assign some let’s say padding left and right off dot five RAM we could say and now we got some spacing between the list items the next thing is that I want you to have some space in between the logo and these navigation items to be very precise they should be well pushed away from each other so logo should be on the left the average items should be on the right we can achieve this with the help of flex box I can add an additional div here between the logo and our navigation items and I’ll give it a class name of spacer the class name is totally up to you by the way and this will not hold any content now I’ll take that spacer class here maybe added here and give it a flex value of one and this simply means this will take all available space and as you can see now it takes all the free space between the space which is occupied by the logo and the navigation items so this is really taking shape and not looking too bad in my opinion what we’re of course missing is that hamburger button which allows us to open our site drawer anti side drawer is also missing I’d say now let’s add that hamburger button first and I’ll actually stored it in a separate component it’s a new components folder I’ll add a side drawer folder and this will hold the side drawer itself and I’ll also add the drawer toggle button dot JS file you can of course name these things however you want now let’s work on that button first here I’ll also import react from react this will be a stateless component a functional component and I’ll name the constant drawer toggle button like the file name but starting with a lowercase D just a convention you can name it however you want and there we receive the props and I will return some JSX code and I will finally also export that constant as default of that file now in there how should this back button look like how should it work well it should be a button also for accessibility reasons so I want to use a normal button here but of course in that button I want to have these free lines which make up my hamburger so we can’t add free dips in here you could also use spans so free dips are added and now each diff whips class name will receive a class toggle button line maybe so let’s add this to all these dips and the button itself will receive the toggle button class here I’ll then add my drawer toggle button dot CSS file and I will also import that in that JavaScript file so here let’s import drawer toggle button dot CSS this will add the CSS code to the final app which will run in the browser and now we can style it now let’s add that button to our toolbar first of all so that we can see it so in the toolbar I’ll add an import where I pull in that button by going to decide our folder and importing the drawer toggle button and then here in that first death I will add my drawer toggle button component like this and of course I need to import drawer toggle button from that path here for that to work so with that adjusted import and the button being used here let’s go back and here’s the button it’s not there yet but at least we see it now first of all let me ensure that we got some spacing between the logo and the button so on the toolbar logo not on the anchor tag in there but on the diff itself I’ll add some margin left of maybe dot v REM to ensure that there is some spacing to the button on the left and now let’s work on the button itself we get these free devs in there now let’s start with the button which has two toggle button clasp here this button could have a height of let’s say 48 pixels we can treat this later so now we see that as the height of the button it’s very big actually so let’s reduce that to just 30 pixels I guess it’s centered by default again we can change that height and I will change it right now even to 24 yeah let’s see if that is good I will also give the width off let’s say 36 pixels so 1.5 times the height yeah we can see if that works well maybe reduced it to 30 but now I wanna well turn this into a button with horizontal lines obviously for that I need to remove the background so the background will be transparent I’ll set a border of Nan here and I will also use my toggle button to control the focus state where I want to set the outline to none I will give it a cursor which is a pointer though so now this button is invisible and if I click it we also don’t see an outline which is what I want now it’s time to add these lines so we get the toggle button line class and if we want to use the divs in the back I first of all have to change that button to be of display flex and then I’ll set the Flex direction to column because default is a row but obviously I want to position these divs not next to each other but beneath each other below each other so let’s now add this toggle button line class and let’s give each line a width of 100% and a height of maybe one pixel I’ll then give it a background which is white if I do that we don’t see anything there let’s change the width to 30 pixels and that changes now that’s important if you have two deaths inside that button 100% won’t work in that setup instead you need to give these items explicit height width excuse me so now we have that with on our elements there we all see that they are not inside the button and that the button actually if I moved it up a bit has some default padding now let’s get rid of that heading and on the same end I’ll add box-sizing of border box here to make sure that the lines really stay inside of that button now they’re all clumped up on each other basically to change this we can work with the Flex box and set justify content which positions elements along the main axis which for a column is from top to bottom we can set this to space between and now it will basically make sure that the free space so the freely available space in that flex box is distributed between these elements and now we see we got something which looks a bit like a hamburger icon now I can change this to space around to not only have the free space between these lines but also before and after the first and last line if I save that that looks much better now let’s try using two pixels instead of one here and this doesn’t look too bad now we got that Hamburg I can may be a bit too close to the logo so let’s go back to our toolbars CSS and for the logo I’ll give it a margin left of one rim to make sure we have more distance and with that I’m happy now I want to make sure that when we click this we see a side drawer and for that we obviously need to add a side drawer so let’s go to the side drawer and let’s also import react they’re from react and let’s create a side draw constant which receives props return subjects in the end and we’ll export the side drawer constant as a default now let’s add the J’s Xcode here and there I really just want to have an F element that will be my side drawer in there an unordered list and in that unordered list here I’ll add my list items and there I’ll have my anchor tags which leads to the starting page where I have products and where I have users now I’ll give that a class name of side drawer and I’ll add my side drawer dot CSS file here let’s import that side drawer CSS file into the JavaScript file import side drawer CSS and now we can start styling this now I also want to add it to my components so that we see it and the question is where do I add it you could add it to the toolbar but it’s not part of the toolbar actually it’s in the pendant of the toolbar we can use the toolbar standalone if you want so instead I’ll add it to the app.js file here there I want to add my side drawer so here I’ll add my import import side drawer from and I’ll go to the components folder import the side drawer and here we can then add side drawer like this now this means that if I save that we can see the side drawer here and the Dom at least here it is but we don’t see it visually now we can change that first of all I want to ensure that for my entire app I set an inline style like this where I set the height to 100% this will become important to conveniently give this side drawer a height of 100 percent for the full page because if you want to have a nested element that has 100% of the page height you could use the relatively new VH unit but that does not support it in all browsers or you use 100% but then the parent element also has to have a height of 100 percent so we give this a height of 100 percent and then we have to ensure that in our index CSS file which Styles the overall page we also give our body a height of 100 percent and the same for HTML itself all to give that a height of 100 percent with that we should be able to go to the side drawer and there we use the side drawer class we can now style that in our CSS file gift at a height of 100 percent give it a background color of white maybe give it some box shadow some slight drop shadow to the right not really to the bottom some blur and then let’s use some RGB a color some transparent black and important I’ll give it a position of fixed because I don’t want to scroll it with the page it should always be there and overlap the page I’ll give it a position top of 0 and left of 0 and let’s give the width which could be let’s say free or yeah since I typed it 400 pixels if we now save that here’s our site drawer now obviously we always have that site drawer now and it would be nice to have some backdrop so some grayed out area behind the side drawer now that can also be added and you can add it as part of the side drawer or as a separate component now I will edit as a separate component as you could use that reuse that in a real react app too example all to show it behind some modal which you might want to open so I will add a new folder here in components backdrop and in there I’ll add my backdrop dot JS file and my backdrop dot CSS file and in the backdrop dot JS file I’ll import react from react and then I’ll create a new Const backdrop which gets props and returns some JSX and you know the game I export this as the default of that file and now in there a backdrop can simply just be a div with no content inside of it with a class name of backdrop let’s say and then we can import that CSS file here to stall that so import backdrop dot CSS go into the backdrop CSS file and add that backdrop class which I’m using in the JavaScript file and now what should a backdrop me now a backdrop should take the full page width and height it should also have some background color and it should overlap the other elements but of course not the side drawer so let’s start by giving it a position of fixed so that you also can’t scroll it away give it a width of 100% and a height of 100% give it a background of rgba and then although that transparent black here may be a little little bit less black more transparent and let’s give it a set in the X of 100 now let’s go to the side drawer CSS file and let’s give the side drawer a set index of 200 so that it’s above the backdrop and then we can go to the App J’s file and import our backdrop here so import backdrop from components backdrop backdrop and in that component here I’ll then add my backdrop like this and if I save that we see that backdrop here but obviously it’s below our heading now the reason for there is that I have to go to the backdrop CSS and I should all to make sure that it sits in the top-left corner this is where it starts with that it overlaps everything but not our sight drawer now with that let’s go back to the side drawer and I will actually shrink that with a little bit and I will not only shrink it I’ll set it to 70 percent of the page but I’ll give it a max width of 400 pixels now and that ensures that we have that maximum width but now if we go to mobile mode by clicking this button here we also have it here on the mobile device which looks nicer now obviously the elements are installed in there so let’s work on these elements in this side drawer first let me increase that in size a little bit so let’s work on these elements in there now in that side drawer we have these navigation items and therefore I’ll style the unordered list first of all that unordered list will have a list style of Nan and I’ll set it to display flex I’ll again give it a flex direction of column because now here the elements the navigation items should be positioned below each other and then here I’ll also style my links to give them a purple color here maybe and also remove their text decoration by setting it to non now this looks better now some spacing between the items would be nice and also maybe I want to Center them so here I’ll go to my unordered list which uses the Flex box and justify content which we previously used to space the elements or distribute the space evenly with space around there we can also set center to center the elements on their main axis for that to work we just need to make sure that the flexbox container the unordered list takes the full height of the surrounding container so here I’ll give this a height of 100% so that it takes the height of the full sidebar now let’s increase the font size here a little bit maybe to 1.2 R M and I want to add some spacing between my list items for each list item I’ll give it a margin of let’s say dot 5 REM top and bottom and Cyril left and right we now say if this this looks better now some hover effect would be nice because we have non on non mobile devices so let’s go to the side drawer add a hover effect and also an active effect when we click on it and they’re all again just change the color to be FR fa 9 to 3 f so now we get that hover effect we also see that effect if we click on an item here on the mobile screen and therefore this is working one big thing which is not working is of course that we can’t open and close that drawer dynamically now that is something we control with react with JavaScript now we got all the components and they’re all functional components which means they’re not doing anything or there are doing something they are rendering content but they don’t have any logic attached yet but that is exactly what we can change now the drawer toggle button obviously should open the drawer and clicking on the backdrop should close it that is the logic as I want to have it I want to control that in the app JIS file because there I got access to both the toolbar which holds the drawer toggle button and to the side drawer and backdrop and I need to work with these free components because I need to be able to listen to a click to the button in the toolbar and then I need to be able to remove the side drawer and the backdrop let’s start by reacting to a click on the toolbar first of all I’ll add a method here to my app component I’ll name that drawer toggle click handler and I’ll define that function with this modern arrow function syntax here which adds it as a property to the app component to the app object but ensures that that this keyword keeps its scope and will always refer to this component and then in there I want to change my state of course now let’s set up the state here my initial state which we can set up like this in modern react my initial state has the information whether the toolbar excuse me whether the side drawer is or not so here I’ll just add side drawer open and set that to false initially now here in draw or toggle click handler I’ll therefore call this set state and I’ll use the function form of the set state method because I need to access the previous state and it’s a bad practice to do that like this you shouldn’t do side drawer this state side drawer open and reverses like this this will probably work but due to the wave react now updates the state since it batches these updates you’re not guaranteed that your state changed whenever this execute is the next time so a better way is to use the function form where you pass a function to set state and in that function here you will receive the previous state as an argument this is passed into the function by react and then here you return your object which updates the state and there you can now set the sight or open to the opposite of previous state side drawer open so now this will basically make sure that if the side drawer was open so if that was true it will now be saved as false and the other way around now that’s my drawer toggle click handler I can now use the side drawer open state to decide whether the side drawer and the back drop are shown so we can do that by simply using a ternary expression here or more elegantly use a if statement and add a variable side drawer which is null by default or simply undefined and another one back drop which is also undefined and then I’ll add a if check and see if this state privy excuse me side drawer open if that is true if it is true then side drawer will be equal to well side drawer like this and back drop will be equal to back drop and we can of course storage JSX in JavaScript variables like this because JSX is just JavaScript in the end now we can reference these variables here side drawer and backdrop like this so I’m pointing at these variables and I’m separating the two because I want to be able to control the backdrop independent from this side drawer for the reason I mentioned you could reuse that backdrop for Averell components like modal’s with that saved we don’t see the side row and we don’t see the backdrop because initially this is false side drawer open is false now I need to make sure that the drawer toggle click handler can get triggered and therefore I’ll pass it to the toolbar because the toolbar will hold the button which triggers that so I need to pass a prop to the toolbar and I’ll name it drawer click handler and I’ll point to this draw our target click handler now in the toolbar we can work with that prop with the drawer click handler prop in the toolbar we receive props of course and now I just need to forward this to my drawer toggle button there let’s say we have the click property and I’ve forward props and then draw a click handler so the prop name I used in my app JS file now we’ll have to click prop here in the drawer toggle button so let’s move to the drawer toggle button and there I’ll add on click the normal on click oops on click listener and when that gets fired I’ll execute the method which I have received on props click so in case you’re relatively new to react what we’re doing here is I’m passing around a reference to this method the drawer target click handler is this method and please note I’m not executing it here I’m not adding parentheses this would execute it immediately I don’t want to be executed immediately instead I pass a reference like this which means I passed the address to that method I passed it with props concept you should know otherwise take my full react course so I passed that with props to toolbar and there I simply forward it to the drawer toggle button by using the function reference which I receive on these props and passing it to the click props on the drawer hoggle button and their I’m assigning it to the onclicklistener so props click in the end holds a reference the address of a method of a function which should get executed when this gets clicked with death let’s save this and if I now click that hamburger we need see our backdrop and a side drawer now we can’t close it because we haven’t done anything to ensure that the backdrop would close this for that let’s go back to the App J’s file and let’s add another method the backdrop click handler and I’ll register this in a more generic way because you could do multiple things when it is clicked maybe you also want to close modal’s if you have any so in there what I will do is I will close my sight drawer but you could also add our functionalities here so I will call this set state and now I don’t need the function form because I don’t care about the previous state of the side drawer I’ll just set side drawer open to false like this so this will always close it and now I just need to register this on my backdrop so I will pass it to my backdrop component here there I will pass the click prop you can name this however you want of course and I’ll point to my backdrop click handler again the same logic as before we’re passing a reference to this function so with that let’s go to the backdrop component and there we have the props we have that div let’s add the onclicklistener which we of course can add there to are not limited to buttons and listen or execute whatever we have in the click prop and there we will have our address to the drawer toggle to the backdrop click handler excuse me save everything and now we can open that and we can click that backdrop to close it so this now where it’s now let’s finish this up by adding a nice animation this side drawer should slide in from the left let’s say and let me decrease that drop shadow that really is a bit too much so there I will actually reduce that blurriness to 3 pixels and gif that one pixel here now maybe seven pixels actually yeah I like that more it’s a nicer box shadow in my opinion but back to the animation that is what I want to do now to play an animation a for decider or only by the way not for the backdrop I can’t add it and remove it as I’m currently doing it instead the side drawer should always be present so let’s get rid of that side drawer variable here and let’s get rid of that assignment I only want to control the backdrop like this the side drawer should always be present but I want to pass it the information whether it should be shown or not and then I can use some CSS transitions to move it out of the screen and transition that movement and move it back in so here let’s add a prop maybe name it show and bind to this to this state side drawer open so this will be true or false now in the side drawer we can use that there I want to add some class depending on whether this is true or false and then I want to add some CSS to that class to make sure this looks correct for that I’ll actually use curly braces because I’ll write more than just that return statement now I will still return my navier– and wrap that in parenthesis to ensure that I can’t write multi-line JSX code here but before I return I want to construct the classes I want to attach here that will be my side drawer but also an additional class if it is open so here I’ll have a let statement drawer classes maybe that is an array where I have two side drawer so the class which is currently attached to class name of the class which is currently attached and then I’ll check if props and now the prop we used was showed right it’s this proper show so that is the name if that is true then I’ll add another class here by pushing it or better by simply setting drawing classes now to a new array which is the old array and an additional class open and of course I could all just manage a string here to be honest um I was thinking about doing it like this I cannot use my drawer classes here and join them with an empty space between the elements and this will take my arrays and convert this to a string this is good if you push and pop and do things like that but since I really only have two scenarios here I can all just work with a string so I ever have that string with one class or I have that string here with side drawer and open and then I just use that string here so my class name is a string with one or with two classes and now we can use the open class to change the positioning off that side drawer so let’s go back and here I will add side drawer dot open to make sure that I only style elements which have an open class and the side drawer class and then I will you transform this I will transform this to translate it on the x axis so to move it to the left or right from its original position now we’ll use translate X minus 100 excuse me zero here dad is the position where I want to have it so its default position or the normal position it would normally have but by default if open is not added I’ll now set is to minus 100 percent you move it to the left by its full width now if I save that we don’t see the drawer but if it click that we see it and now it disappears but it still pops in the reason for this is that we don’t animate this transition from transform translate X minus 100% to transform translate X 0 thankfully CSS makes such an animation easy it has built-in transitions you add them with the transition property then you define which property so changes in which property do you want to animate and I want to change an image changes in the transform property so listen to transform so to say then I’ll define the duration of the transition so how long should the animation be how slowly should I be transitioning from state a to state B and I’ll use about three seconds and you can also define a timing function to define how fast should it move or not how fast but how it should the available time be distribute it so should it start fast and an slow start slow and and fast I’ll use ease out to start fast and an slow and with that if I now save this now you’ll see it slides in and it disappears and I really like this style now and that is our navigation here with a side drawer the only missing thing is that I want to use a media query to remove my items here in the toolbar if I’m in mobile view I only want to have them in desktop view and on the other hand remove my site drawer and the toggle button in desktop view and only have dead in mobile view so let’s add this to finish this app for that let’s first go to the toolbar and I want to make sure that we don’t see toolbar navigation items if we’re in mobile mode well that is relatively easy we can add a media query here at the end of the file maybe with add media and define min excuse me a max width of let’s say 768 pixels so if I’m below that mark I’ll set the display to nan and of course I need to define for what so that for what will be my toolbar navigation items then I’ll set display to nan and this means I don’t see them here but I do see them here on the desktop now and this looks wrong here but I’m just zoomed in so this normally would be more than 768 pixels but since I assumed in so that you can read it a bit better it’s actually less so I need to decrease the size of my dev tools to be on a desktop mode but that’s just because I assume then so that is working now on mobile that also looks good the side drawer is always available there this should not be available on desktop mode and therefore I’ll go to my site drawer first of all and add a media query there to add media and Darryl say if we are having a minimum width of 696 pixels so one above the other criteria if we do have that then I’ll take my site drawer and add display non certain will never be visible then so even if we somehow had expanded it and we then are on desktop mode we have to back drop but not the side drawer and the backdrop should always be there if we want it because we could use it for modal’s and so on of course that toggle button should also disappear and I can control that in the toolbar if I want you could always do it on the button itself and set this platoon on there whatever you prefer I’ll do it on the toolbar and there I can say that first div here and I’ll give it a class name now toggle whoops toolbar toggle button that should not be visible on big screens so here I’ll make sure that I add another media query min width 769 pixels if I got that then my newly added class will have a display of Nan so they are saved we don’t have that button on big screens but we do have it on small screens now let’s find him the logo we don’t need the margin left then so that logo toolbar logo which has margin left on big screens if we don’t have a button well then there is no need to have a margin right so in this case I’ll set margin left to zero to avoid this unnecessary margin so if that saved no margin here looking fine here everything working on mobile no site or on desktop and that is the response of navigation with the site or finished on react obviously you can do more you can for example animate that hamburger I can here style that site or differently style the toolbar differently I’m happy with the current setup and I hope that this was useful that you liked it I liked it I liked videos like this I hope you learned something useful and I hope to see you in our videos too bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
when I open the sidebar it shows the right arrow of the backend carousel. how to do that carousel right arrow should hide when the sidebar is opened. please give me solution for this as possible as
46:29 Here I can say I am not only one who can make such mistakes often 🤣🤣🤣
Please help me out;
Everything worked fine but now it shows an uncaught error: state is not defined ( App.js)
How can I fix it?
great tutorial sir!
Good one!
Hello thank you so much for this video it was so helpful for my project! Is it possible to do the "ease in" for the backdrop?
Thanks a lot! Your lessons are very helpful !
Ooo Maximilian Baba
These techniques are so clever. I had a nice 'a ha' moment watching this. Just what I needed to continue working on my project sir thank you
you had created many futures Thanks man
You are awesome man. learnt a lot from this
So cool tutorial.Thanks you.
This tutorial is super awesome.
Would anyone mind sharing a full source code of this?
amazing dude! really. i love it
So helpful! Thank you so much!
Thank u for this tutorial! helped me a lot! +1 sub 😀
Great Tutorial, instead of using external library I watch this tutorial and built it by myself. Thanks man.
Excellent explanation how to create your own nav
How can you nest and create sub navigation that will be a dropdown on hover?
How did you get the image of a phone in your inspector? Very awesome
Thank u, I really appreciate this tutorial, it was the best, but I have one question, please
how can I none display the back drop when I click on link in ul?
45:40 media queries
one question? so once the website gets bigger how to make sure it always appears under the navbar
SEU MERDAS