Coding

ReactJS – Build a Responsive Navigation Bar & Side Drawer Tutorial

  • 00:00:01 welcome to this video in this video we
  • 00:00:04 will use react J s to build a responsive
  • 00:00:06 navigation bar in this one here with a
  • 00:00:09 hamburger icon as you can see which we
  • 00:00:11 can click to bring up that side drawer
  • 00:00:14 and that therefore it gives us a nice
  • 00:00:16 page looking good on both desktop and
  • 00:00:18 mobile devices we'll build this entirely
  • 00:00:21 from scratch without any third-party
  • 00:00:23 library except for a react I guess we'll
  • 00:00:25 write the components on our own we'll
  • 00:00:27 write the CSS code on our own and we
  • 00:00:30 will wire everything up on our own so
  • 00:00:32 let's start
  • 00:00:36 so let me start building that responsive
  • 00:00:39 navigation inside drawer and for that
  • 00:00:41 I'll create a new react project I'll do
  • 00:00:44 that with create react app a tool which
  • 00:00:47 I already installed link can be found in
  • 00:00:49 the video description of course and the
  • 00:00:51 command simply is create react app and
  • 00:00:53 then the name of the project I'll name
  • 00:00:55 it responsive nav bar and hit enter
  • 00:00:59 and now this will create a new project
  • 00:01:01 for me and install all the dependencies
  • 00:01:03 we need like for example well react
  • 00:01:06 definitely one of the more important
  • 00:01:08 dependencies we could have so this will
  • 00:01:10 take a little while let's wait for that
  • 00:01:12 to finish and now that it finished I
  • 00:01:14 opened it in my IDE visual studio code
  • 00:01:17 and in there all use the integrated
  • 00:01:19 terminal to run that project now we can
  • 00:01:21 see the run command in the package.json
  • 00:01:23 with the start script we can bring up
  • 00:01:26 that development mode development server
  • 00:01:28 basically we can run that with NPM start
  • 00:01:31 or also with yarn
  • 00:01:33 start if you use yarn instead of NPM
  • 00:01:36 ever works and that opens up a new page
  • 00:01:40 in your browser this one here and this
  • 00:01:42 is our starting react project as create
  • 00:01:44 react app gives us now in there we find
  • 00:01:48 some starting files and as I said I
  • 00:01:50 wanna focus on that responsive
  • 00:01:52 navigation bar so I'll not build
  • 00:01:53 anything else here instead let's just
  • 00:01:55 build that and for that all first of all
  • 00:01:58 create a new folder in that source
  • 00:02:00 folder and alignment components to store
  • 00:02:02 my components in there which I'll build
  • 00:02:03 and the first component of one I built
  • 00:02:05 is my navbar or the tool bar so
  • 00:02:08 basically the toolbar at the top and
  • 00:02:10 that will then have a hamburger icon
  • 00:02:12 which will open it site drawer so I'll
  • 00:02:15 add a new component folder and I'll name
  • 00:02:19 that tool bar starting with a capital T
  • 00:02:21 arm to indicate that this is a react
  • 00:02:24 component which we will also use with a
  • 00:02:26 capital character in JSX and in that
  • 00:02:29 folder I'll create my tool bar dot J as
  • 00:02:33 file which will hold that component you
  • 00:02:35 could let it end with J as X but that is
  • 00:02:38 optional you don't need that to write
  • 00:02:39 JSX code in that foul so I'll just go
  • 00:02:42 with J s so in there I want to create a
  • 00:02:45 react component and for that I first of
  • 00:02:48 all need to import react from
  • 00:02:50 react this pulls in the package and
  • 00:02:53 allows us to write JSX code in here
  • 00:02:55 besides the build workflow which will
  • 00:02:57 compile that to JavaScript of course and
  • 00:02:59 now I'll create my component in there
  • 00:03:02 and I'll create a functional component
  • 00:03:04 storing it in a toolbar constant where I
  • 00:03:07 will get some props and where I will
  • 00:03:10 then return some JSX and that is just a
  • 00:03:12 shortcut for using curly braces and
  • 00:03:16 return statement if we use an arrow
  • 00:03:19 function we can omit that and just
  • 00:03:22 return our well return statement or the
  • 00:03:25 value we want to return and I'll wrap it
  • 00:03:27 in normal parentheses so that I can
  • 00:03:29 return one statement but Dad will
  • 00:03:32 actually be multi-line JSX code so in
  • 00:03:35 there I'll then return a header like
  • 00:03:39 this and in that header I'll add a nav
  • 00:03:43 element and in that nav element I will
  • 00:03:47 have my my hamburger I can basically and
  • 00:03:50 some other navigation items which I
  • 00:03:52 could have so let's add that and now in
  • 00:03:56 there let's first of all add a couple of
  • 00:03:58 segments so to say because I will then
  • 00:04:00 add flexbox to position these elements
  • 00:04:03 in the toolbar the first segment will be
  • 00:04:05 my my hamburger I can basically so add a
  • 00:04:09 div here for that then I'll add a div
  • 00:04:14 with my logo which may be should be
  • 00:04:16 clickable so let's set this to a link
  • 00:04:20 which goes to the root page where I say
  • 00:04:22 the logo let's close that and maybe also
  • 00:04:28 close that string here on the anchor tag
  • 00:04:30 and then last but not least I'll have
  • 00:04:33 another div which can hold fervor
  • 00:04:36 navigation elements to the right of that
  • 00:04:39 and of course that's just one possible
  • 00:04:41 mark-up variant you could use here you
  • 00:04:44 can position things in all kinds of ways
  • 00:04:46 this should work really well though now
  • 00:04:49 let me add an unordered list in there to
  • 00:04:51 hold all these navigation items like
  • 00:04:55 that
  • 00:04:56 and that every navigation item for me
  • 00:04:58 here will just be a link pointing to the
  • 00:05:00 root page because I don't have other
  • 00:05:02 pages that could alt be a link
  • 00:05:04 controlled with react router though so
  • 00:05:06 you could add the router link there I'll
  • 00:05:08 use normal anchor tags and then maybe we
  • 00:05:11 have products and now let me duplicate
  • 00:05:14 this and then we have users something
  • 00:05:16 like this let me now export this toolbar
  • 00:05:20 so export this as the default off this
  • 00:05:22 file and now I want to use it now to use
  • 00:05:26 it I'll go to my app J's file and in
  • 00:05:28 there I don't need anything of that
  • 00:05:30 maybe leave that rapping death but at
  • 00:05:34 then I want to have my toolbar here at
  • 00:05:35 the top don't need the logo now for the
  • 00:05:38 app CSS I will actually not need
  • 00:05:43 anything of that so actually I can just
  • 00:05:44 get rid of that CSS file remove it here
  • 00:05:47 too and now instead import my toolbar
  • 00:05:51 component from dot slash components
  • 00:05:54 toolbar and there it's the toolbar file
  • 00:05:57 we can omit the file extension here and
  • 00:05:59 create react app projects it will add
  • 00:06:02 this automatically so to say now we can
  • 00:06:04 add our toolbar component here like this
  • 00:06:07 and if I save all of that it should work
  • 00:06:10 and here is my toolbar and not looking
  • 00:06:12 too pretty but hey we didn't add any
  • 00:06:14 styling yet so let's add some styling
  • 00:06:17 and for that I'll add my toolbar dot CSS
  • 00:06:20 file in the same folder as the Jas file
  • 00:06:23 and I'll import it here and this import
  • 00:06:25 will work due to project setup we have
  • 00:06:28 here which is able to also add CSS files
  • 00:06:31 or understand imports two days falls and
  • 00:06:34 then automatically inject the CSS code
  • 00:06:37 into our running application so this
  • 00:06:39 will handle the CSS code correctly now
  • 00:06:42 I'll add a class here a class name as it
  • 00:06:45 is in J's X naught class class name
  • 00:06:47 that's important and this will be my
  • 00:06:50 toolbar now the navier– that could be
  • 00:06:56 toolbar navigation using some BM CSS
  • 00:07:01 style here then here I'll leave that out
  • 00:07:05 I'll do that later I'll take care about
  • 00:07:07 that hamburger button later my logo
  • 00:07:10 here I'll give this a class name off
  • 00:07:14 toolbar logo and then here I'll have my
  • 00:07:18 whoops class name toolbar navigation
  • 00:07:25 items may be absurd ends we have the
  • 00:07:29 unordered list in there which we could
  • 00:07:31 also then select with the child selector
  • 00:07:35 basically and then we have our
  • 00:07:37 individual list items in there now let's
  • 00:07:38 add some styling for the overall toolbar
  • 00:07:42 class which was added to the header I
  • 00:07:44 want to give this a width of 100%
  • 00:07:47 let's also maybe make this fixed so
  • 00:07:50 let's give it a position fixed here and
  • 00:07:53 let's give it a background color and I
  • 00:07:56 will use this purple color our Academy
  • 00:07:59 and purple of course you can use any
  • 00:08:00 other color and now we get a colored
  • 00:08:02 toolbar the text color maybe not perfect
  • 00:08:05 yet but we'll get there but we have the
  • 00:08:08 toolbar in one color at least now let's
  • 00:08:12 also add some content below the toolbar
  • 00:08:14 in our app J's file there I'll add a
  • 00:08:18 paragraph where I say this is the page
  • 00:08:20 content and all I'm doing that for a
  • 00:08:24 specific reason because if I save that
  • 00:08:26 we don't see that here we see some
  • 00:08:28 margin from that paragraph but we see
  • 00:08:30 that the paragraph somehow is hidden
  • 00:08:32 beneath the toolbar and that is because
  • 00:08:34 the toolbar is fixed and that does not
  • 00:08:37 work together with the paragraph or put
  • 00:08:39 in other words the paragraph does not
  • 00:08:41 respect the toolbar it does not place
  • 00:08:45 itself beneath the toolbar because that
  • 00:08:47 is not how fixed positioning works
  • 00:08:49 instead if you want to keep some space
  • 00:08:51 for the toolbar we can give it a height
  • 00:08:56 here maybe 56 pixels like this and then
  • 00:09:01 we can add that as some spacing above
  • 00:09:05 our paragraph so we could add a main
  • 00:09:08 element here and then move our paragraph
  • 00:09:12 in there and then give dad some styling
  • 00:09:15 and now I will well I guess reintroduce
  • 00:09:18 the app CSS file or we add some inline
  • 00:09:20 style here so there whoops we could add
  • 00:09:22 some style add
  • 00:09:24 javascript object now this is a syntax
  • 00:09:26 which confuses a lot of people by the
  • 00:09:27 way we get to double curly braces not
  • 00:09:30 because we have some fancy double curly
  • 00:09:33 brace mustache syntax as we have it in
  • 00:09:35 angular but because we use the normal
  • 00:09:38 curly braces to indicate that we have
  • 00:09:40 some dynamic value here and then we have
  • 00:09:43 inner curly braces to indicate or to
  • 00:09:46 simply create a JavaScript object like
  • 00:09:49 this so this is creating a JavaScript
  • 00:09:51 object and now on that object I can add
  • 00:09:54 a margin top now written in camel case
  • 00:09:56 because we're now in JavaScript not CSS
  • 00:09:59 and assigning a string value of 56
  • 00:10:02 pixels or maybe 64 to have the height of
  • 00:10:06 the toolbar plus some extra spacing it
  • 00:10:08 affects our toolbar because on the
  • 00:10:11 toolbar CSS I need to get that atop
  • 00:10:14 position of zero and the same for left
  • 00:10:17 so that this book gets positioned in the
  • 00:10:19 top left corner now this looks better
  • 00:10:21 obviously the items don't fit into the
  • 00:10:23 toolbar but at least we have some
  • 00:10:25 spacing here between the paragraph and
  • 00:10:28 the toolbar so now this is working now
  • 00:10:30 back to the toolbar let's work on that
  • 00:10:32 and let's make sure that we control our
  • 00:10:36 text color there now actually all the
  • 00:10:39 text I have in there are links so what I
  • 00:10:42 want to do is I want to control toolbar
  • 00:10:45 links I guess or to be precise I want to
  • 00:10:49 style the logo and I want to style the
  • 00:10:52 other links in different ways so we
  • 00:10:54 can't install the toolbar logo and then
  • 00:10:56 we can target toolbar navigation items
  • 00:10:58 and any link which is nested in that
  • 00:11:01 class so let's do that here let's target
  • 00:11:04 toolbar logo first the toolbar logo is
  • 00:11:08 placed on that diff so let's target an
  • 00:11:11 anchor tag inside of that simply like
  • 00:11:14 this normal CSS selector let's give it a
  • 00:11:17 color which is white remove the text
  • 00:11:20 decoration maybe since it's a logo
  • 00:11:23 increase the font size to let's say two
  • 00:11:26 REM like that if we now save this look
  • 00:11:30 at the logo it's very big let's maybe
  • 00:11:33 use 1.5 Ram and I also want to work on
  • 00:11:37 the
  • 00:11:37 sessioning of all of that with flexbox
  • 00:11:40 so i want to ensure that my navier–
  • 00:11:43 which holds all my diffs uses flexbox
  • 00:11:47 so for the tool bar navigation CSS class
  • 00:11:50 here which I'll add here I'll set the
  • 00:11:53 display to Flex if I now save this now
  • 00:11:58 if we already fixed some positioning now
  • 00:12:00 I want to Center everything in the
  • 00:12:02 middle vertically and the default flex
  • 00:12:05 direction is from left to right so it's
  • 00:12:08 a row and therefore the positioning I
  • 00:12:11 wanna fix is the positioning on the
  • 00:12:12 cross axis so to say and you can watch
  • 00:12:15 our flexbox videos links can be found in
  • 00:12:18 the video description to learn more
  • 00:12:19 about that so here I will set this cross
  • 00:12:24 access positioning with a line items and
  • 00:12:29 I'll set this to center with this added
  • 00:12:33 now the logo and all the other elements
  • 00:12:36 are centered vertically we still see
  • 00:12:39 that the spacing is a bit off and to
  • 00:12:41 find the reason we can open the
  • 00:12:44 developer tools and then simply inspect
  • 00:12:47 that and we see that our nav here simply
  • 00:12:50 is not following the height of the
  • 00:12:52 header so the fix is of course simple
  • 00:12:56 for toolbar navigation which is placed
  • 00:12:58 on that nav element
  • 00:12:59 I set the high to 100% and since this is
  • 00:13:02 nested in toolbar we take the height set
  • 00:13:05 up there so now with that that looks a
  • 00:13:08 lot better
  • 00:13:09 I can now also go to the navigation and
  • 00:13:12 give this some left and right padding so
  • 00:13:14 padding should be zero from top and
  • 00:13:16 bottom but maybe one rim from left and
  • 00:13:18 right awesome so now we got that logo
  • 00:13:21 here that's looking good now let's work
  • 00:13:24 on our other links and these links are
  • 00:13:28 placed in the toolbar navigation items
  • 00:13:30 class so let me add that here oops that
  • 00:13:34 class selector and now I want to target
  • 00:13:36 the links in there give them some white
  • 00:13:39 color and some text decoration on I also
  • 00:13:44 want to target them in the hover State
  • 00:13:47 and I want to target them in the act
  • 00:13:51 of state and you could easily add
  • 00:13:53 another selector when they have an
  • 00:13:55 active class for example if you want to
  • 00:13:57 change their styling when they are
  • 00:13:58 selected and their I will give them a
  • 00:14:01 color of our Academy and orange so if
  • 00:14:05 dad if I save this now it looks better
  • 00:14:07 but obviously I don't want to have them
  • 00:14:09 in a list like that they are inside an
  • 00:14:12 unordered list which in turn is a child
  • 00:14:14 of toolbar navigation items so let's add
  • 00:14:18 our toolbar navigation item selector and
  • 00:14:22 there the unordered list and they're all
  • 00:14:24 set the list style to non I'll remove
  • 00:14:27 all margin and padding that list would
  • 00:14:29 have and I'll also give this a display
  • 00:14:33 of flex to position the list items in
  • 00:14:36 that unordered list next to jabbering so
  • 00:14:39 now they're positioned next to each
  • 00:14:41 other but obviously some spacing would
  • 00:14:43 be nice
  • 00:14:44 so let's target our list items now
  • 00:14:46 toolbar navigation items list item and
  • 00:14:49 they're all simply assign some let's say
  • 00:14:52 padding left and right off dot five RAM
  • 00:14:56 we could say and now we got some spacing
  • 00:14:59 between the list items the next thing is
  • 00:15:02 that I want you to have some space in
  • 00:15:03 between the logo and these navigation
  • 00:15:05 items to be very precise
  • 00:15:07 they should be well pushed away from
  • 00:15:10 each other so logo should be on the left
  • 00:15:12 the average items should be on the right
  • 00:15:14 we can achieve this with the help of
  • 00:15:17 flex box I can add an additional div
  • 00:15:20 here between the logo and our navigation
  • 00:15:23 items and I'll give it a class name of
  • 00:15:27 spacer the class name is totally up to
  • 00:15:29 you by the way and this will not hold
  • 00:15:32 any content now I'll take that spacer
  • 00:15:34 class here maybe added here and give it
  • 00:15:38 a flex value of one and this simply
  • 00:15:40 means this will take all available space
  • 00:15:42 and as you can see now it takes all the
  • 00:15:45 free space between the space which is
  • 00:15:47 occupied by the logo and the navigation
  • 00:15:49 items so this is really taking shape and
  • 00:15:52 not looking too bad in my opinion what
  • 00:15:54 we're of course missing is that
  • 00:15:56 hamburger button which allows us to open
  • 00:15:58 our site drawer anti side drawer is also
  • 00:16:01 missing I'd say now let's add that
  • 00:16:03 hamburger button first and I'll actually
  • 00:16:05 stored it in a separate component it's a
  • 00:16:07 new components folder I'll add a side
  • 00:16:10 drawer folder and this will hold the
  • 00:16:14 side drawer itself and I'll also add the
  • 00:16:17 drawer toggle button dot JS file you can
  • 00:16:22 of course name these things however you
  • 00:16:24 want now let's work on that button first
  • 00:16:26 here I'll also import react from react
  • 00:16:29 this will be a stateless component a
  • 00:16:32 functional component and I'll name the
  • 00:16:35 constant drawer toggle button like the
  • 00:16:38 file name but starting with a lowercase
  • 00:16:39 D just a convention you can name it
  • 00:16:41 however you want and there we receive
  • 00:16:44 the props and I will return some JSX
  • 00:16:47 code and I will finally also export that
  • 00:16:50 constant as default of that file now in
  • 00:16:54 there how should this back button look
  • 00:16:56 like how should it work well it should
  • 00:16:58 be a button also for accessibility
  • 00:17:00 reasons so I want to use a normal button
  • 00:17:02 here but of course in that button I want
  • 00:17:04 to have these free lines which make up
  • 00:17:07 my hamburger so we can't add free dips
  • 00:17:11 in here you could also use spans so free
  • 00:17:14 dips are added and now each diff whips
  • 00:17:18 class name will receive a class toggle
  • 00:17:23 button line maybe so let's add this to
  • 00:17:29 all these dips and the button itself
  • 00:17:32 will receive the toggle button class
  • 00:17:37 here I'll then add my drawer toggle
  • 00:17:41 button dot CSS file and I will also
  • 00:17:45 import that in that JavaScript file so
  • 00:17:47 here let's import drawer toggle button
  • 00:17:55 dot CSS this will add the CSS code to
  • 00:17:59 the final app which will run in the
  • 00:18:02 browser and now we can style it now
  • 00:18:06 let's add that button to our toolbar
  • 00:18:08 first of all so that we can see it so in
  • 00:18:10 the toolbar I'll add an import where I
  • 00:18:12 pull in that button by going to decide
  • 00:18:15 our folder and importing the drawer
  • 00:18:17 toggle button
  • 00:18:18 and then here in that first death I will
  • 00:18:23 add my drawer toggle button component
  • 00:18:27 like this and of course I need to import
  • 00:18:30 drawer toggle button from that path here
  • 00:18:33 for that to work
  • 00:18:34 so with that adjusted import and the
  • 00:18:37 button being used here let's go back and
  • 00:18:39 here's the button it's not there yet but
  • 00:18:42 at least we see it now first of all let
  • 00:18:46 me ensure that we got some spacing
  • 00:18:47 between the logo and the button so on
  • 00:18:49 the toolbar logo not on the anchor tag
  • 00:18:54 in there but on the diff itself I'll add
  • 00:18:57 some margin left of maybe dot v REM to
  • 00:19:01 ensure that there is some spacing to the
  • 00:19:03 button on the left and now let's work on
  • 00:19:05 the button itself we get these free devs
  • 00:19:08 in there now let's start with the button
  • 00:19:11 which has two toggle button clasp here
  • 00:19:15 this button could have a height of let's
  • 00:19:18 say 48 pixels we can treat this later so
  • 00:19:22 now we see that as the height of the
  • 00:19:23 button it's very big actually
  • 00:19:25 so let's reduce that to just 30 pixels I
  • 00:19:28 guess it's centered by default again we
  • 00:19:31 can change that height and I will change
  • 00:19:34 it right now even to 24 yeah let's see
  • 00:19:38 if that is good I will also give the
  • 00:19:40 width off let's say 36 pixels so 1.5
  • 00:19:45 times the height yeah we can see if that
  • 00:19:49 works well maybe reduced it to 30 but
  • 00:19:52 now I wanna well turn this into a button
  • 00:19:54 with horizontal lines obviously for that
  • 00:19:57 I need to remove the background so the
  • 00:20:00 background will be transparent I'll set
  • 00:20:02 a border of Nan here and I will also use
  • 00:20:06 my toggle button to control the focus
  • 00:20:10 state where I want to set the outline to
  • 00:20:14 none I will give it a cursor which is a
  • 00:20:17 pointer though so now this button is
  • 00:20:20 invisible and if I click it we also
  • 00:20:22 don't see an outline which is what I
  • 00:20:23 want now it's time to add these lines so
  • 00:20:26 we get the toggle button line class and
  • 00:20:30 if we want to use the divs in the back
  • 00:20:32 I first of all have to change that
  • 00:20:34 button to be of display flex and then
  • 00:20:38 I'll set the Flex direction to column
  • 00:20:40 because default is a row but obviously I
  • 00:20:42 want to position these divs not next to
  • 00:20:45 each other but beneath each other below
  • 00:20:46 each other
  • 00:20:47 so let's now add this toggle button line
  • 00:20:51 class and let's give each line a width
  • 00:20:54 of 100% and a height of maybe one pixel
  • 00:20:59 I'll then give it a background which is
  • 00:21:03 white if I do that we don't see anything
  • 00:21:07 there let's change the width to 30
  • 00:21:10 pixels and that changes now that's
  • 00:21:14 important if you have two deaths inside
  • 00:21:16 that button 100% won't work in that
  • 00:21:19 setup instead you need to give these
  • 00:21:23 items explicit height width excuse me so
  • 00:21:27 now we have that with on our elements
  • 00:21:30 there we all see that they are not
  • 00:21:33 inside the button and that the button
  • 00:21:36 actually if I moved it up a bit has some
  • 00:21:41 default padding now let's get rid of
  • 00:21:43 that heading and on the same end I'll
  • 00:21:46 add box-sizing of border box here to
  • 00:21:52 make sure that the lines really stay
  • 00:21:54 inside of that button now they're all
  • 00:21:57 clumped up on each other basically to
  • 00:22:00 change this we can work with the Flex
  • 00:22:02 box and set justify content which
  • 00:22:04 positions elements along the main axis
  • 00:22:06 which for a column is from top to bottom
  • 00:22:09 we can set this to space between and now
  • 00:22:13 it will basically make sure that the
  • 00:22:15 free space so the freely available space
  • 00:22:18 in that flex box is distributed between
  • 00:22:20 these elements and now we see we got
  • 00:22:24 something which looks a bit like a
  • 00:22:25 hamburger icon now I can change this to
  • 00:22:28 space around to not only have the free
  • 00:22:30 space between these lines but also
  • 00:22:32 before and after the first and last line
  • 00:22:35 if I save that that looks much better
  • 00:22:37 now let's try using two pixels instead
  • 00:22:41 of one here and this doesn't look too
  • 00:22:45 bad
  • 00:22:45 now we got that Hamburg
  • 00:22:46 I can may be a bit too close to the logo
  • 00:22:49 so let's go back to our toolbars CSS and
  • 00:22:53 for the logo I'll give it a margin left
  • 00:22:55 of one rim to make sure we have more
  • 00:22:57 distance and with that I'm happy now I
  • 00:22:59 want to make sure that when we click
  • 00:23:01 this we see a side drawer and for that
  • 00:23:03 we obviously need to add a side drawer
  • 00:23:05 so let's go to the side drawer and let's
  • 00:23:08 also import react
  • 00:23:10 they're from react and let's create a
  • 00:23:15 side draw constant which receives props
  • 00:23:18 return subjects in the end and we'll
  • 00:23:21 export the side drawer constant as a
  • 00:23:23 default now let's add the J's Xcode here
  • 00:23:27 and there I really just want to have an
  • 00:23:29 F element that will be my side drawer in
  • 00:23:33 there an unordered list and in that
  • 00:23:36 unordered list here I'll add my list
  • 00:23:38 items and there I'll have my anchor tags
  • 00:23:41 which leads to the starting page where I
  • 00:23:44 have products and where I have users now
  • 00:23:51 I'll give that a class name of side
  • 00:23:53 drawer and I'll add my side drawer dot
  • 00:23:58 CSS file here let's import that side
  • 00:24:01 drawer CSS file into the JavaScript file
  • 00:24:04 import side drawer CSS and now we can
  • 00:24:10 start styling this now I also want to
  • 00:24:12 add it to my components so that we see
  • 00:24:14 it and the question is where do I add it
  • 00:24:16 you could add it to the toolbar but it's
  • 00:24:20 not part of the toolbar actually it's in
  • 00:24:22 the pendant of the toolbar we can use
  • 00:24:24 the toolbar standalone if you want so
  • 00:24:27 instead I'll add it to the app.js file
  • 00:24:29 here there I want to add my side drawer
  • 00:24:31 so here I'll add my import import side
  • 00:24:35 drawer from and I'll go to the
  • 00:24:37 components folder import the side drawer
  • 00:24:40 and here we can then add side drawer
  • 00:24:44 like this now this means that if I save
  • 00:24:47 that we can see the side drawer here and
  • 00:24:51 the Dom at least here it is but we don't
  • 00:24:54 see it visually now we can change that
  • 00:24:57 first of all I want to ensure that for
  • 00:25:00 my entire app I set an inline style like
  • 00:25:04 this where I set the height to 100% this
  • 00:25:09 will become important to conveniently
  • 00:25:12 give this side drawer a height of 100
  • 00:25:14 percent for the full page because if you
  • 00:25:17 want to have a nested element that has
  • 00:25:19 100% of the page height you could use
  • 00:25:22 the relatively new VH unit but that does
  • 00:25:27 not support it in all browsers or you
  • 00:25:29 use 100% but then the parent element
  • 00:25:31 also has to have a height of 100 percent
  • 00:25:34 so we give this a height of 100 percent
  • 00:25:37 and then we have to ensure that in our
  • 00:25:39 index CSS file which Styles the overall
  • 00:25:42 page we also give our body a height of
  • 00:25:45 100 percent and the same for HTML itself
  • 00:25:50 all to give that a height of 100 percent
  • 00:25:53 with that we should be able to go to the
  • 00:25:55 side drawer and there we use the side
  • 00:25:57 drawer class we can now style that in
  • 00:26:01 our CSS file gift at a height of 100
  • 00:26:04 percent give it a background color of
  • 00:26:06 white maybe give it some box shadow some
  • 00:26:10 slight drop shadow to the right not
  • 00:26:14 really to the bottom some blur and then
  • 00:26:20 let's use some RGB a color some
  • 00:26:24 transparent black and important I'll
  • 00:26:27 give it a position of fixed because I
  • 00:26:29 don't want to scroll it with the page it
  • 00:26:31 should always be there and overlap the
  • 00:26:34 page I'll give it a position top of 0
  • 00:26:37 and left of 0 and let's give the width
  • 00:26:41 which could be let's say free or yeah
  • 00:26:44 since I typed it 400 pixels if we now
  • 00:26:47 save that here's our site drawer now
  • 00:26:50 obviously we always have that site
  • 00:26:52 drawer now and it would be nice to have
  • 00:26:54 some backdrop so some grayed out area
  • 00:26:57 behind the side drawer now that can also
  • 00:27:00 be added and you can add it as part of
  • 00:27:04 the side drawer or as a separate
  • 00:27:06 component now I will edit as a separate
  • 00:27:08 component as you could use that reuse
  • 00:27:11 that in a real react app too
  • 00:27:13 example all to show it behind some modal
  • 00:27:15 which you might want to open so I will
  • 00:27:18 add a new folder here in components
  • 00:27:21 backdrop and in there I'll add my
  • 00:27:23 backdrop dot JS file and my backdrop dot
  • 00:27:26 CSS file and in the backdrop dot JS file
  • 00:27:30 I'll import react from react and then
  • 00:27:33 I'll create a new Const backdrop which
  • 00:27:36 gets props and returns some JSX
  • 00:27:40 and you know the game I export this as
  • 00:27:42 the default of that file and now in
  • 00:27:45 there a backdrop can simply just be a
  • 00:27:47 div with no content inside of it with a
  • 00:27:51 class name of backdrop let's say and
  • 00:27:53 then we can import that CSS file here to
  • 00:27:56 stall that so import backdrop dot CSS go
  • 00:28:01 into the backdrop CSS file and add that
  • 00:28:03 backdrop class which I'm using in the
  • 00:28:05 JavaScript file and now what should a
  • 00:28:07 backdrop me now a backdrop should take
  • 00:28:10 the full page width and height it should
  • 00:28:13 also have some background color and it
  • 00:28:16 should overlap the other elements but of
  • 00:28:18 course not the side drawer so let's
  • 00:28:21 start by giving it a position of fixed
  • 00:28:23 so that you also can't scroll it away
  • 00:28:26 give it a width of 100% and a height of
  • 00:28:30 100% give it a background of rgba and
  • 00:28:34 then although that transparent black
  • 00:28:37 here may be a little little bit less
  • 00:28:40 black more transparent and let's give it
  • 00:28:43 a set in the X of 100 now let's go to
  • 00:28:48 the side drawer CSS file and let's give
  • 00:28:50 the side drawer a set index of 200 so
  • 00:28:54 that it's above the backdrop and then we
  • 00:28:57 can go to the App J's file and import
  • 00:29:00 our backdrop here so import backdrop
  • 00:29:03 from components backdrop backdrop and in
  • 00:29:10 that component here I'll then add my
  • 00:29:12 backdrop like this and if I save that we
  • 00:29:18 see that backdrop here but obviously
  • 00:29:20 it's below our heading now the reason
  • 00:29:24 for there is that I have to go to the
  • 00:29:26 backdrop CSS
  • 00:29:27 and I should all to make sure that it
  • 00:29:29 sits in the top-left corner this is
  • 00:29:32 where it starts with that it overlaps
  • 00:29:35 everything but not our sight drawer now
  • 00:29:38 with that let's go back to the side
  • 00:29:39 drawer and I will actually shrink that
  • 00:29:41 with a little bit and I will not only
  • 00:29:44 shrink it I'll set it to 70 percent of
  • 00:29:46 the page but I'll give it a max width of
  • 00:29:49 400 pixels now and that ensures that we
  • 00:29:53 have that maximum width but now if we go
  • 00:29:55 to mobile mode by clicking this button
  • 00:29:56 here we also have it here on the mobile
  • 00:29:59 device which looks nicer
  • 00:30:01 now obviously the elements are installed
  • 00:30:03 in there so let's work on these elements
  • 00:30:05 in this side drawer first let me
  • 00:30:08 increase that in size a little bit so
  • 00:30:10 let's work on these elements in there
  • 00:30:12 now in that side drawer we have these
  • 00:30:15 navigation items and therefore I'll
  • 00:30:19 style the unordered list first of all
  • 00:30:22 that unordered list will have a list
  • 00:30:24 style of Nan and I'll set it to display
  • 00:30:26 flex I'll again give it a flex direction
  • 00:30:29 of column because now here the elements
  • 00:30:32 the navigation items should be
  • 00:30:33 positioned below each other and then
  • 00:30:36 here I'll also style my links to give
  • 00:30:40 them a purple color here maybe and also
  • 00:30:44 remove their text decoration by setting
  • 00:30:47 it to non now this looks better now some
  • 00:30:50 spacing between the items would be nice
  • 00:30:52 and also maybe I want to Center them so
  • 00:30:55 here I'll go to my unordered list which
  • 00:30:57 uses the Flex box and justify content
  • 00:31:00 which we previously used to space the
  • 00:31:02 elements or distribute the space evenly
  • 00:31:04 with space around there we can also set
  • 00:31:06 center to center the elements on their
  • 00:31:10 main axis for that to work we just need
  • 00:31:12 to make sure that the flexbox container
  • 00:31:14 the unordered list takes the full height
  • 00:31:16 of the surrounding container so here
  • 00:31:19 I'll give this a height of 100% so that
  • 00:31:22 it takes the height of the full sidebar
  • 00:31:25 now let's increase the font size here a
  • 00:31:28 little bit maybe to 1.2 R M and I want
  • 00:31:32 to add some spacing between my list
  • 00:31:34 items for each list item
  • 00:31:36 I'll give it a margin of let's say dot 5
  • 00:31:41 REM top and bottom and Cyril left and
  • 00:31:44 right we now say if this this looks
  • 00:31:47 better now some hover effect would be
  • 00:31:49 nice because we have non on non mobile
  • 00:31:52 devices so let's go to the side drawer
  • 00:31:55 add a hover effect and also an active
  • 00:31:58 effect when we click on it and they're
  • 00:32:01 all again just change the color to be FR
  • 00:32:03 fa 9 to 3 f so now we get that hover
  • 00:32:07 effect we also see that effect if we
  • 00:32:10 click on an item here on the mobile
  • 00:32:12 screen and therefore this is working one
  • 00:32:15 big thing which is not working is of
  • 00:32:17 course that we can't open and close that
  • 00:32:19 drawer dynamically now that is something
  • 00:32:22 we control with react with JavaScript
  • 00:32:25 now we got all the components and
  • 00:32:28 they're all functional components which
  • 00:32:29 means they're not doing anything or
  • 00:32:32 there are doing something they are
  • 00:32:33 rendering content but they don't have
  • 00:32:35 any logic attached yet but that is
  • 00:32:37 exactly what we can change now the
  • 00:32:40 drawer toggle button obviously should
  • 00:32:42 open the drawer and clicking on the
  • 00:32:43 backdrop should close it that is the
  • 00:32:46 logic as I want to have it I want to
  • 00:32:48 control that in the app JIS file because
  • 00:32:50 there I got access to both the toolbar
  • 00:32:53 which holds the drawer toggle button and
  • 00:32:55 to the side drawer and backdrop and I
  • 00:32:58 need to work with these free components
  • 00:33:00 because I need to be able to listen to a
  • 00:33:03 click to the button in the toolbar and
  • 00:33:04 then I need to be able to remove the
  • 00:33:07 side drawer and the backdrop
  • 00:33:10 let's start by reacting to a click on
  • 00:33:13 the toolbar
  • 00:33:14 first of all I'll add a method here to
  • 00:33:16 my app component I'll name that drawer
  • 00:33:20 toggle click handler and I'll define
  • 00:33:24 that function with this modern arrow
  • 00:33:26 function syntax here which adds it as a
  • 00:33:29 property to the app component to the app
  • 00:33:32 object but ensures that that this
  • 00:33:34 keyword keeps its scope and will always
  • 00:33:37 refer to this component and then in
  • 00:33:40 there I want to change my state of
  • 00:33:42 course now let's set up the state here
  • 00:33:44 my initial state which we can set up
  • 00:33:47 like this in modern react my initial
  • 00:33:49 state has the information whether the
  • 00:33:52 toolbar
  • 00:33:53 excuse me whether the side drawer is
  • 00:33:55 or not so here I'll just add side drawer
  • 00:33:58 open and set that to false initially now
  • 00:34:03 here in draw or toggle click handler
  • 00:34:05 I'll therefore call this set state and
  • 00:34:07 I'll use the function form of the set
  • 00:34:10 state method because I need to access
  • 00:34:13 the previous state and it's a bad
  • 00:34:15 practice to do that like this you
  • 00:34:18 shouldn't do side drawer this state side
  • 00:34:22 drawer open and reverses like this this
  • 00:34:25 will probably work but due to the wave
  • 00:34:28 react now updates the state since it
  • 00:34:31 batches these updates you're not
  • 00:34:33 guaranteed that your state changed
  • 00:34:35 whenever this execute is the next time
  • 00:34:37 so a better way is to use the function
  • 00:34:40 form where you pass a function to set
  • 00:34:42 state and in that function here you will
  • 00:34:45 receive the previous state as an
  • 00:34:47 argument this is passed into the
  • 00:34:49 function by react and then here you
  • 00:34:52 return your object which updates the
  • 00:34:54 state and there you can now set the
  • 00:34:56 sight or open to the opposite of
  • 00:34:58 previous state side drawer open so now
  • 00:35:02 this will basically make sure that if
  • 00:35:04 the side drawer was open so if that was
  • 00:35:07 true it will now be saved as false and
  • 00:35:09 the other way around
  • 00:35:11 now that's my drawer toggle click
  • 00:35:13 handler I can now use the side drawer
  • 00:35:16 open state to decide whether the side
  • 00:35:18 drawer and the back drop are shown so we
  • 00:35:21 can do that by simply using a ternary
  • 00:35:24 expression here or more elegantly use a
  • 00:35:27 if statement and add a variable side
  • 00:35:31 drawer which is null by default or
  • 00:35:34 simply undefined and another one back
  • 00:35:37 drop which is also undefined and then
  • 00:35:40 I'll add a if check and see if this
  • 00:35:41 state privy excuse me side drawer open
  • 00:35:45 if that is true if it is true then side
  • 00:35:50 drawer will be equal to well side drawer
  • 00:35:53 like this and back drop will be equal to
  • 00:35:56 back drop and we can of course storage
  • 00:35:59 JSX in JavaScript variables like this
  • 00:36:01 because JSX is just JavaScript in the
  • 00:36:04 end now we can reference these variables
  • 00:36:07 here
  • 00:36:08 side drawer and backdrop like this so
  • 00:36:12 I'm pointing at these variables and I'm
  • 00:36:14 separating the two because I want to be
  • 00:36:17 able to control the backdrop independent
  • 00:36:19 from this side drawer for the reason I
  • 00:36:21 mentioned you could reuse that backdrop
  • 00:36:23 for Averell components like modal's with
  • 00:36:26 that saved we don't see the side row and
  • 00:36:29 we don't see the backdrop because
  • 00:36:30 initially this is false side drawer open
  • 00:36:34 is false now I need to make sure that
  • 00:36:37 the drawer toggle click handler can get
  • 00:36:39 triggered and therefore I'll pass it to
  • 00:36:41 the toolbar because the toolbar will
  • 00:36:44 hold the button which triggers that so I
  • 00:36:46 need to pass a prop to the toolbar and
  • 00:36:49 I'll name it drawer click handler and
  • 00:36:52 I'll point to this draw our target click
  • 00:36:56 handler now in the toolbar we can work
  • 00:36:58 with that prop with the drawer click
  • 00:37:00 handler prop in the toolbar we receive
  • 00:37:03 props of course and now I just need to
  • 00:37:05 forward this to my drawer toggle button
  • 00:37:07 there let's say we have the click
  • 00:37:10 property and I've forward props and then
  • 00:37:14 draw a click handler so the prop name I
  • 00:37:17 used in my app JS file now we'll have to
  • 00:37:20 click prop here in the drawer toggle
  • 00:37:23 button so let's move to the drawer
  • 00:37:25 toggle button and there I'll add on
  • 00:37:28 click the normal on click oops on click
  • 00:37:31 listener and when that gets fired I'll
  • 00:37:34 execute the method which I have received
  • 00:37:38 on props click so in case you're
  • 00:37:41 relatively new to react what we're doing
  • 00:37:43 here is I'm passing around a reference
  • 00:37:46 to this method the drawer target click
  • 00:37:48 handler is this method and please note
  • 00:37:51 I'm not executing it here I'm not adding
  • 00:37:53 parentheses this would execute it
  • 00:37:55 immediately I don't want to be executed
  • 00:37:58 immediately instead I pass a reference
  • 00:38:00 like this which means I passed the
  • 00:38:03 address to that method I passed it with
  • 00:38:06 props concept you should know otherwise
  • 00:38:09 take my full react course so I passed
  • 00:38:11 that with props to toolbar and there I
  • 00:38:14 simply forward it to the drawer toggle
  • 00:38:16 button by using the function reference
  • 00:38:18 which I receive on these props and
  • 00:38:19 passing it to the click props on the
  • 00:38:22 drawer
  • 00:38:22 hoggle button and their I'm assigning it
  • 00:38:24 to the onclicklistener so props click in
  • 00:38:27 the end holds a reference the address of
  • 00:38:29 a method of a function which should get
  • 00:38:32 executed when this gets clicked with
  • 00:38:36 death let's save this and if I now click
  • 00:38:39 that hamburger
  • 00:38:40 we need see our backdrop and a side
  • 00:38:42 drawer now we can't close it because we
  • 00:38:45 haven't done anything to ensure that the
  • 00:38:47 backdrop would close this for that let's
  • 00:38:50 go back to the App J's file and let's
  • 00:38:52 add another method the backdrop click
  • 00:38:56 handler and I'll register this in a more
  • 00:38:58 generic way because you could do
  • 00:39:00 multiple things when it is clicked maybe
  • 00:39:02 you also want to close modal's if you
  • 00:39:04 have any so in there what I will do is I
  • 00:39:07 will close my sight drawer but you could
  • 00:39:10 also add our functionalities here so I
  • 00:39:13 will call this set state and now I don't
  • 00:39:15 need the function form because I don't
  • 00:39:17 care about the previous state of the
  • 00:39:19 side drawer
  • 00:39:19 I'll just set side drawer open to false
  • 00:39:24 like this so this will always close it
  • 00:39:26 and now I just need to register this on
  • 00:39:28 my backdrop so I will pass it to my
  • 00:39:31 backdrop component here there I will
  • 00:39:34 pass the click prop you can name this
  • 00:39:37 however you want of course and I'll
  • 00:39:39 point to my backdrop click handler again
  • 00:39:41 the same logic as before we're passing a
  • 00:39:43 reference to this function so with that
  • 00:39:47 let's go to the backdrop component and
  • 00:39:51 there we have the props we have that div
  • 00:39:53 let's add the onclicklistener
  • 00:39:56 which we of course can add there to are
  • 00:39:58 not limited to buttons and listen or
  • 00:40:00 execute whatever we have in the click
  • 00:40:03 prop and there we will have our address
  • 00:40:06 to the drawer toggle to the backdrop
  • 00:40:08 click handler excuse me save everything
  • 00:40:11 and now we can open that and we can
  • 00:40:14 click that backdrop to close it so this
  • 00:40:16 now where it's now let's finish this up
  • 00:40:19 by adding a nice animation this side
  • 00:40:22 drawer should slide in from the left
  • 00:40:24 let's say and let me decrease that drop
  • 00:40:26 shadow that really is a bit too much so
  • 00:40:29 there I will actually reduce that
  • 00:40:31 blurriness to 3 pixels
  • 00:40:34 and gif that one pixel here now maybe
  • 00:40:37 seven pixels actually yeah I like that
  • 00:40:41 more it's a nicer box shadow in my
  • 00:40:43 opinion but back to the animation that
  • 00:40:46 is what I want to do now to play an
  • 00:40:48 animation a for decider or only by the
  • 00:40:50 way not for the backdrop I can't add it
  • 00:40:53 and remove it as I'm currently doing it
  • 00:40:55 instead the side drawer should always be
  • 00:40:59 present so let's get rid of that side
  • 00:41:02 drawer variable here and let's get rid
  • 00:41:05 of that assignment I only want to
  • 00:41:07 control the backdrop like this the side
  • 00:41:09 drawer should always be present but I
  • 00:41:11 want to pass it the information whether
  • 00:41:14 it should be shown or not and then I can
  • 00:41:16 use some CSS transitions to move it out
  • 00:41:19 of the screen and transition that
  • 00:41:20 movement and move it back in so here
  • 00:41:23 let's add a prop
  • 00:41:24 maybe name it show and bind to this to
  • 00:41:28 this state side drawer open so this will
  • 00:41:31 be true or false now in the side drawer
  • 00:41:34 we can use that there I want to add some
  • 00:41:38 class depending on whether this is true
  • 00:41:41 or false and then I want to add some CSS
  • 00:41:44 to that class to make sure this looks
  • 00:41:46 correct for that I'll actually use curly
  • 00:41:49 braces because I'll write more than just
  • 00:41:52 that return statement now I will still
  • 00:41:54 return my navier– and wrap that in
  • 00:41:57 parenthesis to ensure that I can't write
  • 00:42:00 multi-line JSX code here but before I
  • 00:42:02 return I want to construct the classes I
  • 00:42:05 want to attach here that will be my side
  • 00:42:07 drawer but also an additional class if
  • 00:42:09 it is open so here I'll have a let
  • 00:42:11 statement drawer classes maybe that is
  • 00:42:15 an array where I have two side drawer so
  • 00:42:18 the class which is currently attached to
  • 00:42:19 class name of the class which is
  • 00:42:21 currently attached and then I'll check
  • 00:42:23 if props and now the prop we used was
  • 00:42:27 showed right it's this proper show so
  • 00:42:33 that is the name if that is true then
  • 00:42:35 I'll add another class here by pushing
  • 00:42:38 it or better by simply setting drawing
  • 00:42:43 classes now to a new array which is the
  • 00:42:45 old array and an additional class
  • 00:42:49 open and of course I could all just
  • 00:42:52 manage a string here
  • 00:42:53 to be honest um I was thinking about
  • 00:42:56 doing it like this I cannot use my
  • 00:42:58 drawer classes here and join them with
  • 00:43:01 an empty space between the elements and
  • 00:43:03 this will take my arrays and convert
  • 00:43:06 this to a string this is good if you
  • 00:43:08 push and pop and do things like that but
  • 00:43:10 since I really only have two scenarios
  • 00:43:12 here I can all just work with a string
  • 00:43:15 so I ever have that string with one
  • 00:43:17 class or I have that string here with
  • 00:43:21 side drawer and open and then I just use
  • 00:43:23 that string here so my class name is a
  • 00:43:26 string with one or with two classes and
  • 00:43:29 now we can use the open class to change
  • 00:43:33 the positioning off that side drawer so
  • 00:43:35 let's go back and here I will add side
  • 00:43:38 drawer dot open to make sure that I only
  • 00:43:41 style elements which have an open class
  • 00:43:43 and the side drawer class and then I
  • 00:43:46 will you transform this I will transform
  • 00:43:49 this to translate it on the x axis so to
  • 00:43:52 move it to the left or right from its
  • 00:43:55 original position now we'll use
  • 00:43:58 translate X minus 100 excuse me zero
  • 00:44:01 here dad is the position where I want to
  • 00:44:02 have it so its default position or the
  • 00:44:05 normal position it would normally have
  • 00:44:07 but by default if open is not added I'll
  • 00:44:10 now set is to minus 100 percent you move
  • 00:44:15 it to the left by its full width now if
  • 00:44:18 I save that we don't see the drawer but
  • 00:44:20 if it click that we see it and now it
  • 00:44:22 disappears but it still pops in the
  • 00:44:25 reason for this is that we don't animate
  • 00:44:26 this transition from transform translate
  • 00:44:30 X minus 100% to transform translate X 0
  • 00:44:34 thankfully CSS makes such an animation
  • 00:44:36 easy it has built-in transitions you add
  • 00:44:39 them with the transition property then
  • 00:44:42 you define which property so changes in
  • 00:44:45 which property do you want to animate
  • 00:44:47 and I want to change an image changes in
  • 00:44:49 the transform property so listen to
  • 00:44:52 transform so to say
  • 00:44:54 then I'll define
  • 00:44:57 the duration of the transition so how
  • 00:44:59 long should the animation be how slowly
  • 00:45:01 should I be transitioning from state a
  • 00:45:04 to state B and I'll use about three
  • 00:45:06 seconds and you can also define a timing
  • 00:45:09 function to define how fast should it
  • 00:45:12 move or not how fast but how it should
  • 00:45:14 the available time be distribute it so
  • 00:45:16 should it start fast and an slow start
  • 00:45:19 slow and and fast I'll use ease out to
  • 00:45:23 start fast and an slow and with that if
  • 00:45:27 I now save this now you'll see it slides
  • 00:45:30 in and it disappears and I really like
  • 00:45:33 this style now and that is our
  • 00:45:36 navigation here with a side drawer the
  • 00:45:39 only missing thing is that I want to use
  • 00:45:40 a media query to remove my items here in
  • 00:45:43 the toolbar if I'm in mobile view I only
  • 00:45:45 want to have them in desktop view and on
  • 00:45:48 the other hand remove my site drawer and
  • 00:45:50 the toggle button in desktop view and
  • 00:45:52 only have dead in mobile view so let's
  • 00:45:55 add this to finish this app for that
  • 00:45:58 let's first go to the toolbar and I want
  • 00:46:00 to make sure that we don't see toolbar
  • 00:46:02 navigation items if we're in mobile mode
  • 00:46:05 well that is relatively easy we can add
  • 00:46:08 a media query here at the end of the
  • 00:46:10 file maybe with add media and define min
  • 00:46:16 excuse me a max width of let's say 768
  • 00:46:23 pixels so if I'm below that mark I'll
  • 00:46:26 set the display to nan and of course I
  • 00:46:31 need to define for what so that for what
  • 00:46:33 will be my toolbar navigation items then
  • 00:46:36 I'll set display to nan and this means I
  • 00:46:40 don't see them here but I do see them
  • 00:46:43 here on the desktop now and this looks
  • 00:46:45 wrong here but I'm just zoomed in so
  • 00:46:48 this normally would be more than 768
  • 00:46:50 pixels but since I assumed in so that
  • 00:46:52 you can read it a bit better it's
  • 00:46:54 actually less so I need to decrease the
  • 00:46:56 size of my dev tools to be on a desktop
  • 00:46:59 mode but that's just because I assume
  • 00:47:01 then so that is working now on mobile
  • 00:47:04 that also looks good the side drawer is
  • 00:47:07 always available there this should not
  • 00:47:09 be available on desktop mode
  • 00:47:11 and therefore I'll go to my site drawer
  • 00:47:14 first of all and add a media query there
  • 00:47:16 to add media and Darryl say if we are
  • 00:47:19 having a minimum width of 696 pixels so
  • 00:47:25 one above the other criteria if we do
  • 00:47:28 have that then I'll take my site drawer
  • 00:47:31 and add display non certain will never
  • 00:47:34 be visible then so even if we somehow
  • 00:47:37 had expanded it and we then are on
  • 00:47:40 desktop mode we have to back drop but
  • 00:47:42 not the side drawer and the backdrop
  • 00:47:44 should always be there if we want it
  • 00:47:46 because we could use it for modal's and
  • 00:47:48 so on of course that toggle button
  • 00:47:50 should also disappear and I can control
  • 00:47:53 that in the toolbar if I want you could
  • 00:47:55 always do it on the button itself and
  • 00:47:57 set this platoon on there whatever you
  • 00:47:59 prefer I'll do it on the toolbar and
  • 00:48:01 there I can say that first div here and
  • 00:48:06 I'll give it a class name now toggle
  • 00:48:09 whoops toolbar toggle button that should
  • 00:48:15 not be visible on big screens so here
  • 00:48:18 I'll make sure that I add another media
  • 00:48:21 query min width 769 pixels if I got that
  • 00:48:29 then my newly added class will have a
  • 00:48:31 display of Nan so they are saved we
  • 00:48:35 don't have that button on big screens
  • 00:48:37 but we do have it on small screens now
  • 00:48:40 let's find him the logo we don't need
  • 00:48:42 the margin left then so that logo
  • 00:48:46 toolbar logo which has margin left on
  • 00:48:49 big screens if we don't have a button
  • 00:48:52 well then there is no need to have a
  • 00:48:54 margin right so in this case I'll set
  • 00:48:59 margin left to zero
  • 00:49:02 to avoid this unnecessary margin so if
  • 00:49:05 that saved no margin here looking fine
  • 00:49:08 here everything working on mobile no
  • 00:49:11 site or on desktop and that is the
  • 00:49:14 response of navigation with the site or
  • 00:49:16 finished on react obviously you can do
  • 00:49:19 more you can for example animate that
  • 00:49:22 hamburger I can here
  • 00:49:25 style that site or differently style the
  • 00:49:28 toolbar differently I'm happy with the
  • 00:49:30 current setup and I hope that this was
  • 00:49:31 useful that you liked it I liked it I
  • 00:49:34 liked videos like this I hope you
  • 00:49:36 learned something useful and I hope to
  • 00:49:38 see you in our videos too bye