React Navbar Tutorial - Responsive Navbar in React JS (Advance)

hi everyone welcome back in our another react js  tutorial and in this tutorial i am going to show   you how to create a responsive network using  react.js and in my screen here you can see   that we have a beautiful level and inside our  network in the left side we have our react logo   and our react icon and in the right side we have  some nav links with some beautiful hover effect   and then here you can see  that we have a sign up button   after this one in the center of our screen we have  a heading and then we have a text difficulty level   one in our previous tutorial we have created  a network using basic react syntax that's why   it was difficulty level zero but now today in  this tutorial i am going to use some advanced   react functionalities to create this responsive  network so that's why it is difficulty level one   now as i said earlier this is a responsive network  so what i will do i will inspect the website   and from the setting i will  choose a mobile phone device   and here you can see that in our small screen  device our never is looking so beautiful   on the top here you can see that we have  our react logo and icon and in the right   side we don't have our nav links but instead  of our nav links now we have a hamburger menu   if i click on this hamburger menu here you can see  that our nav links is sliding from the left side   and this time we have a beautiful background  for our navlinks and this type of background   also known as glassy background and we will see  how to create a beautiful background like this   in this tutorial and here you can see that  now we have our nav links one by one in one   column and then we have a sign up button also  after this we have our hover effect as well so this navbar is looking so  beautiful in our small screen device   now in a few moments i will show you how  to create this beautiful never using react   jazz but before we get started if you guys are  new in my channel then please please subscribe   like this video and press the bell icon for  the future videos and if you guys have any   question about this video please let me know in my  comment section that's it guys let's get started first of all you have to open your favorite code  editor but for this project i am not going to use   any local code editor like vs code i am going to  use code sandbox and if you guys don't know about   code sandbox then please do check out my previous  tutorial i have discussed about how to use code   sandbox for your project so please do check out  that video link will be given in the description   but if you want to use vs code then you can  do that also for installing react inside vs   code first you have to create a new folder and  then inside that folder you have to open cmd and then you have to write a command npx  create react app and then your project name   and then type enter your react project  will be installed inside your computer   now if you want to use code sandbox  then please visit code sandbox dot io   so this is the website this is the url code  sandbox dot io after visiting code sandbox   what you have to do is you have to open a free  account and after creating an account you will   find a dashboard like this and from here now we  have to create a new sandbox so that's why we have   to click in this option and as you can see that  besides react we have so many previewed templates   we can use all of this but now for this tutorial  i'm going to use react.js so that's why click on   this react and in just a few seconds your  react will be installed inside your browser   and here you can see that we have similar  design like our vs code in the left side   we have our these settings and we have our  project folder structure and here we have   our coding section and here we have our preview  and inside our folders here you can see that we   have a public folder we have a source folder and  inside the source folder we have app.js index.js   style.css and then package.json and then here  you can see that we have our this dependencies   if you want to install any other dependencies  you can install youtube contenders from here   suppose if i want to use react icon so  what i have to do is just search here react   icon and here you can see that you will find  the react icon so by just simply clicking on   this you will install the react icon inside your  code editor so this is so easy guys now here you   can see that in our coding screen we have our  app.js and here we have our h1 and our this text   which is now showing inside our preview and  then we have our index.js and then our style.css   so now what we have to do is we have to set up our  file and folders and the first we will go to our   style.css and then go to the top and here i will  use a global styling so a star and here margin   will be 0 then padding will be 0 then we have  to add a box sizing and the box sizing will be   border box then i will use a font family and  the font family will be sense serif that's it now in our global section i have already  initialized our font family so i don't   need the font family here so  i will simply remove this one   that's it now close our style sheet now what  we have to do we have to create some components   because for creating our navbar we have to create  different components and we have to store all the   components in one specific folder so inside  our source folder i will create another folder   and the folder name will be components like  this and inside our components folder i will   create our network file so that's why it will be  never dot js and then for styling our network i   will create a style cheat so that's why i  create another file and it will be never   styles dot css and earlier i have said that i will  use react advanced functionalities to create this   responsive network so that's why we are going to  create another file and it will be menu data dot   js okay now let's go to our nav dot js and here  we have to create a class component and then we   have to extend that component so that's why let's  add class and our class name will be our file name   so you have to remember this always the class name  will be the file name and our file name is navbar and then we have to extend the class  so that's why we have to extend   and we will extend that class into and  component so that's why we have to use component   and here you can see that i have a auto suggestion  and if i click on this component on the top of our   code that component will be automatically imported  and if the auto import does not work with you then   you have to write this line manually okay so after  our component then we have to add a curly braces   and then here we have to use  render add a curly braces   and then we have to return it so inside our  network first of all i will create a nav tag   and then here i have to add a class name  and then the class name will be nav4 items and inside our network i will create a h1 and inside the h1 i will add our  logo and our logo name will be react   and if i go to our website here you can  see that after react we have a icon also   so this icon is from font awesome icon so  for using the font awesome icon inside our   website we have to add the cdn link of the font  awesome icon inside our project so for the cdn   link just go to the browser and here search for  fontosum cdn and then type enter then you have to   open this first link and from here i will select  this one and then i will copy the link tag then go   to our project and if you open the public you will  find the index.html simply open the index.html   and after our title i will simply paste the  link tag so guys here you can see that we   have our link tag now save this file and  then close and from now on we can use the   font awesome icon inside our project  so after react we have to add a icon and then we have to add a class name so the class name of that react icon will be  f b a space f react that's it now here you can   see that in our screen we have this text but  i want to see our this text so that's why what   we have to do we have to go to our app.js file  and from here we have to remove this h1 and s2   and inside our this div tag we have to import our  this component okay never is just a component and   if you want to show your component inside your  website then you have to import that component   into app.js file okay so here we have to  add the component and it will be network that's it so you have to add the component  like this and here you can see that we have   the arrow now and it is saying that navbar is not  defined okay so after adding the network component   you have to also import that component on the top  of the code okay so that's why let's write input   and the component name is network from and then  here you have to add the address and our never   file is actually inside our components folder so  that's why it will be dot slash components slash   never that's it okay here you can see that in our  preview screen we have a arrow and in the bottom   here you can see that if i zoom it for you in our  problems here you can see that we have a bunch of   error here and this error is actually happening  because of one mistake if i go to our network.js   now you have to remember one thing if you  create a component then you have to always   export that component okay after exporting that  component then you can use that component inside   app.js so in our network.js i have created the  component but i have never exported the component   so for exporting the component let's go to  the bottom and here you have to write export   default and the component name which is never   that's it now here you can see that inside  our problem section we do not have any problem   and in our screen in our preview screen here you  can see that we have our react and our icon so now   we can see that we have successfully imported  our network component inside our app.js file ok so after our h1 now we have to create  an order list and inside this another list   we have to create a list tag inside this  list tag we have to create a anchor tag   and inside that anchor tag we have to add  an icon if i go to our website here you can   see that we have a icon so for adding  that icon we have to add a icon tag and inside that icon tag  we have to add a class name   so the class name so the class  name of that icon will be f dash solid space f dash house dash user and  guys here we consider we have our house icon   and after our icon now we have to add  the nav link name and it will be home that's it now here you can see that we have our  icon and our home text after this one if i go   to our problem section here you can see that  we have another problem and it is saying that   we have to add a href inside the anchor type okay  so every time we use anchor tag we have to add the   href also so let's add a hrf and here you have to  add a valid url so for now i will use index.html   now here you can see that we do not have any  problems and guys here you can see that we will   add our all the nav links like this one so as  i said earlier we are going to use some react   advanced function so for using them open our  folder structure and then open our menu data dot   js and here what i will do is i will store  all of our nav links inside our this folder   inside our this file and then i will export the  files from our menu.js inside our navwa.js okay   so first i will create a list for all of our nav  links so for creating a list we have to create   a function and inside that function i will  store all of our nav links okay so that's why   it will be export and then const then the function  name will be our file name and it is menu data then we will create a array and inside  this array i will list all of our nav links   so let's start listing our first nav  link which will be our home so that's why   and here i will use the title  and our title name will be home then i will add a url so that if anyone click on  that home link they will go to a different page   okay so that's why for every nav link we will  have different url so i'm going to use a url and for now it will be hash then i want to add class name for that  nav links so that's why it will be cnamed and the class name will be nav links   then i will add different icons for different  nav links so that's why it will be icon and here   i will add the icon class name which will be f  dash solid a space f and dash house dash user   that's it so this is our first url our first nav  link in our website here you will find three more   nav links and we have a button also so we have  to create this nav links and our this button   so that's why let's go to our code editor  and here i will simply copy this one then add a comma and then  paste it three more times and it will be about and the class name will  be circle info and this one will be service and the class name will be f a dash briefcase and this one will be contact and  the class name will be address book and guys after each of this  property we have to add a comma   so add a comma here and here and then here   so after our all the nav links we have to create  our this sign up button also so for creating that   button simply copy this one and then paste it  one more time and the title will be sign up and the url will be hash and for our sign up  button i don't want any icons so i will remove   the icon property and then i will use a different  class name for that button and the class name will   be nav links dash mobile so guys here you can see  that we have created a list for our all the nav   links okay so after creating our list now what we  have to do we have to export our all the nav links   our this list inside our naver.js so for  adding the list inside our network.js   first of all we have to import our menu data  inside our naver.js so that's why let's go to the   top and here we have to write import then we have  to add a curly braces and it will be menu data   from dot slash menu data that's  it now we can use our menu data   inside our this network now if you want to add  more links what we have to do is we have to simply   copy this list tag and then paste it as much as we  want and here you can see that we have our all the   nav links now what i will do is instead of pasting  all the nav links i will use only one nav link that's it and inside this nav link i  will push our this list okay our home   our about and our service let me show you so  for adding the list inside our this list tag   we have to map this list okay we have to map the  list and then we after mapping the list we have to   import that list inside our list so for adding the  map functionality go to our another list and under   our unordered list i will create a curly braces  and then i will take the menu data dot then i   will add the map function and here we have to pass  two values one is item and another one is index so this item is basically our this  individual properties and our index is   the numbers okay so this is property number zero  this is property number one this is property   number two and so on so we have to pass two  values one is item and another one is index okay now we have to create a arrow function  so that's why it will be equal   together then then curly braces  and here we have to use return and inside the return what i have to  do i will simply take our this list tag   and take that list tag and then add it here  okay and guys here you can see that inside our   return i have added our list tag and as soon  as i add the list tag here you can see that   we have multiple nav links here but right now here  you can see that all the nav links is the same   so now we have to change it so we're changing that  let's go to our list and here for the list i will   use key okay key number so here i will write  key and our key number will be our index number   after our index number inside our list tag we  have our anchor tag and here you can see that   inside our anchor tag we have some properties one  is url another one is icon and another one is the   nav link and if i go to our menu data here you  can see that in every property we have title we   have url we have class name and then we have icon  so what i will do is i will take these properties   and then push these properties inside  our this anchor tag so let me show you   how i will do it for our href here you can see  that i have a url and if i go to our menu data   here you will find a url as well so what i will do  is i will push our this data inside our this url   so for doing that just delete the previous url and  inside the href we have to create a curly basis   and for adding the url from our this property  we have to map our this property okay   so for doing that we have to use item dot then we  have to add the property name which is url okay so   copy the url the property name and after dot we  have to paste it here now href is completed it   means our hrf will take only that value which  we will inside our this url property okay now   let's go to our code and for our anchor tag i will  add a class name also so let's add a class name and i will add the class name which i have added  here here you can see that we have a cname which   is class name and this is the class name okay so i  will simply copy this property and then i will add   this property inside our class name so for adding  that property first of all we have to take item   dot and then paste that property which is cname so  guys here you can see that we have taken our url   we have taken our cname now we have to take the  icon okay so copy this property icon and here you   can see that inside our icon class name we have  a class name for our icon so i will simply remove   the class name and here i will add curly braces  and i will add item dot and if i add dot here you   can see that now we have our all the suggestion  our cname our icon our title and our url now our   this section our these properties is showing as  suggestion so i will simply click on this icon   so after our icon now we have one  more thing left which is our this text   so i will simply add a curly braces  and it will be item dot and as soon   as i add a dot here you can see that i have  title so i will simply click on this title   and that's it boom here you can see that we  have different text for our these nav links   and then we have also different icons for  different nav links and we are getting all these   icons and all these nav links from inside our this  list okay so now we can say that our this data   is going inside our nav1 so this is called  dynamic properties it means we can now change   our these values and our that change will be  affected inside our this nav link okay suppose   if i want to add another nav link after our  contract so i'll simply copy this contract again   and then paste it one more time here you can  see that we have added another contract okay   now we can change anything inside our  this list we don't have to change anything   from our this main list tag okay we can  change all of this inside our this here   suppose if i want to change the text and if i  want to add a blog section so i will add a blog so here you can see that our text is  now changed and if i now want to change   the class name suppose i want to add a book  so i will remove the address from here and   here you can see that i have a book icon and  you can add a different url for that link   here so you can add that url inside this  url property so the url will be www.blog.com and like this one you can add a different  url for all of these nav links okay   so this is the benefit of using dynamic properties so that's it now we have added our this properties  inside our network now let's go and style our   this network so for starting the network open our  source and from here go to our nav file style.css   and here in our screen you can see that our  this icon and our this nav links is now in   one column but i want them in one row so that's  why let's go to our network and from here i will   take these navbar items class name and then  paste it here and here i will use display flex and after using display  flex here you can see that   the styling is not working inside our preview  section because we have to import this navwa   style.css file inside our network.js  okay so let's import that one on the top import dot slash never styles dot css   that's it here we can see that our react logo  and our this nav links is now in one row so now   i want to add some space between them so that's  why justify content will be a space between then i will use align items center then i will  add a font size and the font size will be 1.2 ram then i want to add some padding and the  padding from top and bottom will be 0 but   from left and right it will be 30 pixel now i  want to add a background color and the background   color will be this one then i want to add a box  shadow and the x will be 0 y will be 5 pixel and   the radius will be 15 pixel then i want to  add a rgb here and it will be 0 0 0 0 point after this i want to add a width  and which will be 95 percent then i will use a height  and height will be 80 pixel   then i will add a border radius and it will  be 13 pixel so after this one now i want our   this network to be floating on the screen if  i go to our website here you can see that our   this network is actually looking like floating on  our screen okay so we have some space on the top   from left from bottom so i want to create a never  like this also this navbar is fixed it is a static   it means if i scroll down the website our navbar  will not hide it will always show on the top okay   so let me show you what i am trying to say and  in our never items what i will do i will use   position fixed then i will use a top and the  top will be 20 pixel then i will use a left   and the left will be 50 then i will add a  transform and a translate and it will be   minus 50 percent that's it now here you can see  that our never is looking like floating on the   screen and this never is now static okay so after  our navbar i want to install our this react icon   so that's why let's go to our navbar.js and  for our this logo i will add a class name here and the class name will be logo now  simply copy this logo class name and then paste it here first of all i will  add a color and the color will be white then   i will use the justify self and it will be a start then i will use the cursor and it will be pointer  so after this one now i want to install our this   react icon so for starting the react icon  here you can see that we have a class name   for our that icon so i will simply take this class  name fa react from here and then paste it here first of all i want to add some margin from  the left side so that's why margin left will   be 0.2 ram then i will add a font size and  it will be 1.6 ram okay so after this one   here you can see that our all the nav links is  now in one column but i wanted them in one row   so for doing that let's go to our network.js  and in our url i will add a class name and the class name will be nav menu so i will  simply copy this nav fano class from here and then   paste it here and here i will use grid so that's  why display will be greet then create template   columns and it will be repeat 6 because we have  6 properties and i want each of them to take auto   then i will use a grid gap and it will  be 10 pixel then i don't want the bullet   points so that's why this has style will  be none then align items will be centered then text align will be center  justify content will be end   so after this one now i want to change the  color of this nav links so for changing the   color of this nav links if i put our menu data  here you can see that we have added a class name   for each of these and the class name is nav  links so i will simply copy this nav links and go to our style sheet then paste it here first  of all i will remove the underline so that's why   text decoration will be none then i will  add a color and the color will be white   then i will add some padding and the padding from  top and bottom will be 0.7 ram from left and right   it will be one ramp and the guys here you can see  that our icon and our this home is not in one line   and they kind of breaks so i don't want to  break them i want them to be always in one   row so that's why i will use  white space and it will be no wrap   now here you can see that our this icon  and our this link is now in one row   okay after this one now i want to start over these  icons so that's why simply copy this nav links   and then paste it here then target our icon and  i will use padding right and it will be 10 pixel   now we have a space after this one i want to  add the hover effect on our this nav links   so that's why simply copy this nav links  again and then paste it here then add hover and if i hover on our these nav links  i want to change the background color   so the background will be a rgb color and it  will be 80 80 to 38 now if i hover here you   can see that we have a different background  color okay so now i will add a border radius and it will be 4 pixel then  i will add a transition and it will be all 0.2 second   is in out now save and if i now cover here you can  see that we have our this beautiful over effect   okay so after creating our network now i want  to make our this never responsive in our small   screen device i want to hide our these nav  links and they instead of showing in one row   i want to show them in one column and in the never  i want to show a hamburger icon so for adding   the icons our hamburger icon let's go to our  network and after our h1 let's create a div tag and the class name will be menu icons and inside our div tag i will create a icon tag then i will add a class name and the class  name of our icon will be f a s f a dash bars   and if i now increase our screen here  you can see that we have our this   menu icon now we have to install our this icon so  for starting the icon let's go to our style sheet and then from here copy this f5  bars plus and then paste it here and here i will add a color  and the color will be white   and here you can see that we  have our this hamburger icon   but in our large screen i don't want to show  over this hamburger icon i want to show this   hamburger icon only in our small screen device  so for our large screen device i want to hide it   but before hiding it i want to make this hamburger  menu working it means if i click on this hamburger   menu then i want to show a close icon so for  adding the functionalities let's go to our code and here what we have to do we have to add a  state so here instead of our this class name   i will add a color basis so for adding  the state we have to add this dot a state   dot clicked we are using clicked function because  if anyone click on that hamburger icon then i want   to change our state so that's why i'm using click  and here i am using if else if our hamburger menu   is clicked then i want to show a cross icon  or a times icon instead of that hamburger icon   so that's why we have to add the times icon  class name which is f a s f a dash times and   again if anyone type our this close icon our  cross icon then i want to again change our state   and at that time our icon will  be hamburger icon so that's why   we have to add the hamburger icon also and the  class name will be f s f a dash bars that's it   so guys we have initialized our e files here  you can see that we have created a state   and if anyone click on our hamburger icon then i  want to show the close icon and if anyone click   on this close icon then i want to show the bars  icon okay so after adding the state now we have   to define the state so for defining it let's go  to the top of our class component and here we   have to add our state and for now our state will  be false okay so that's why click will be false   so our estate is now false it means our this icon  is not clicked now if anyone click on this icon   then i want to show our close icon and if  anyone click on that close icon then i want   to show our bar icon okay so right now our state  is false and we will initialize our this estate   if anyone click on that icon okay so for handling  the icon now we have to add a function we have to   create a function so let's name the function  and the function name will be handle click then we have to create an arrow function and we  have to set the state so that's why it will be set   state and this time we have to change the  clicked value so clicked and the value will be   not false okay so note this dot state dot clicked  that's it now let me explain you whatever this   handle click is doing here you can see that our  initial state is false it means nobody clicks   on that icon so once if anyone click on that  icon then our this handle function will work   and what our this handle function will do our  handheld function will change the state value   and it will convert false into not false okay so  now we have to add this handle click inside our   this menu icon so inside our this div we have to  add on click and it will be this dot handle click   so that's it guys if i now increase the screen and  if i click on this hamburger icon here you can see   that right now we can see a icon a close icon  let me change the color of the icon so that you   can see that clearly so here with the ff bars  i will add a comma and it will be f at times that's it now if i increase the size here you can  see that we have a white close icon now if i click   on this close icon we have our hamburger icon if i  click on this hamburger icon we have a close icon   so our this icon is working and right now  in our large screen i don't want our this   icon this hamburger icon so i will hide this  so for hiding this let's go to our navbar.js   and from here i will copy this menu icons and  then paste it here and it will be display none that's it now here you can see that we do not  have our hamburger menu and our close icon   here okay okay so after this one now we  have to make our this network responsive   so for doing that let's go to our code  and here we have to initialize media and the max width and it will be 850 pixel first  of all let's target our nav for   items and here i will add as  the index and it will be 99 that's it after this one let's target our nav menu and right now here you can see that everyone  is one row but i wanted them in one column   so that's why i will use display flex  then flex direction will be column justify content flex start then i will add a  background color so let's add the background color   and it will be a rgba color and it will be 255  255 255 0.25 and then i will add a box shadow and   x will be 0 y will be 8 pixel the radius will be  32 pixel and it will be 0 and i will add rgb here   and it will be 31 38 135 and 0.37 then i will  add a backdrop filter and it will be blur 4 pixel then i will add a border radius and it  will be 13 pixel and then i will add a width and   our width will be 100 then i will add a height  and the height will be auto and now we have to   position our this sidebar on the top of our this  network so that's why we have to use position   and the position will be absolute then we have to  add at top top will be zero then we have to add a   left and a left will be zero percent then align  items will be stretched then i want to add some   padding so that's why let's add some padding and  a padding from top it will be 80 pixel from left   0 from bottom 30 pixel from right 0 then i will  add a margin and the margin will be zero pixel after this one let's target our this nav  links so copy this nav links from here   now let's target our nav links and here i will  use display block then the width will be 100 then i will use padding and the padding  from top and bottom will be 2 ram   from left and right it will be 0 then i  want to change the text color so let's   change the color and it will be this one and  here you can see that we have our text color   now if anyone hover on our this navbar  i want to change the background color   so that's why copy this nav links  and then paste it here then add hover so i want to change the background  color so the background color will be   rgba color and it will be 255 255 255 0.25  then i will change the backdrop filter   and it will be blurred 20 pixel that's it now if  i hover on our this text we cannot see the changes   because we have a white background so what i have  to do is i have to change the background color   so for changing the background color  we have to create a new component   so let's go to our source and inside our component  we have to create a component and it will be home dot js then we have to create a style sheet  for that and it will be home styles dot css   now what we have to do is let's go to our home.js   and let's create a function and  the function name will be home and here it will be returned and right now  inside our return i will add a empty fragment   like this then also we have to export the function and the function name will be home that's it   now for installing our home we have to import  the format style so that's why let's add import   dot slash and we have to add the  style file name which is home styles dot css that's it now inside our  return we have to create a div tag   and here we have to add a class  name and the class name will be home   now simply copy this home class name and then  go to our home style and then paste it here now   what i will do is i will add a gradient  background color if i go to our website   here you can see that we have a red gradient so  for creating the gradient i will use a online css   gradient generator so let's create a new tab  and here search for css gradient generator and   from here open this first link css gradient  and from here you can take any of the colors   here you can see that they have some presets so  this is the preset so i will now change the colors now from at the bottom here you can see that  we have a code and we can copy this code so   after copying this code let's go to our code  editor and here we have to paste the code and   here first we have to add width and which  will be 100 then we have to add a height   and the height will be 100 vh right now our  the background is not working let's go to our   home and here what we have to do is we have  to wrap our this code inside a parenthesis   okay now here you can see that our this  home is not working inside our this website   because it is just a component now we have to  import our this component inside our app.js   so after our navbar here you can see that  we have our first component which is network   so after our network component we have to add our  home component also so let's add our home and here   you can see that i have a auto suggestion so i  will simply click on that and here you can see   that they are automatically imported home and if  the auto import is not working for you then you   have to write this text manually so now after our  component we have to close the component that's   it and our background is looking so beautiful  and our hover effect is also looking good okay   now let's close our this home and our these foam  styles then our menu data now let's go to our   navwar styles and right now in our screen here you  can see that we have our sidebar but i don't want   to show the sidebar always like this i want to add  a hamburger icon and if anyone click on that icon   then only i want to show this sidewalk okay so for  adding the icons we have to copy this icon class and then paste it here and  here it will be display block   but here you can see that we cannot see our  react icon our react logo and our this controller   our this hamburger icon so here we have to add a  z index so let's add a z index and it will be -1   now here we can see our icon our logo and our this  close icon if i click on this close icon then i   want to close our this sidebar so for adding the  functionalities let's go to our network so what we   have to do is in our another list we have to add  effects it means we have to change the state so   that's why right now we have a class name so what  i will do is i will simply remove this class name   and here instead of the class name i will  use estate so that's why this dot state   then the state name will be clicked if our hamburger icon is clicked  then i want to show our nav one   okay so here we have to add the class  name of our network which is nav dash   menu then also i want to add another class name  which is active it means if anyone click on our   hamburger icon i want to active our this class  okay and if anyone click on the close icon then   i want to remove the sidebar so for that one we  have to add a colon and the class name will be nav   menu that's it and guys here you can see  that right now our nav menu is activated   and now if i click on this close icon  then i want to activate our this icon   it means if anyone click on our close icon i  want to hide our sidebar so first let's hide   our sidebar so for hiding the sidebar let's go  to our nav menu and here you can see that we have   left value if i want to hide our sidewall so what  i have to do is i have to add a minus value and it   will be minus 110 percent now here you can see  that our network is successfully hidden okay   now if anyone click on our hamburger menu  then i want to show our sidebar it means we   have to active our sidebar so for activating  our sidebar let's copy this nav menu class   then paste it here then i will add active class and inside our active class i will add a  left value and it will be zero percent okay   now let me see if our nav menu is working or  not if i click on this close icon here you can   see that our nav menu is hidden it means our this  menu is activated now if i click on this hamburger   menu right now our this menu is activated  okay so you have to understand these things   now here you can see that the transition  is not smooth so i want a smooth transition so for a smooth transition i will add a transition  here and the transition will be all 0.3 second   is in out that's it now if i click on our  hamburger menu here you can see that our this   sidebar is sliding from the left side and it is  sliding smoothly if i now click on this close icon   and here you can see that our sidebar is hiding  smoothly okay so our this functional light is   working our hover effect is also working now we  have to establish this button if i increase our   website so this is our sign up button now we have  to install our this button so first in the button   let's go to the top and here we have to  add the bottom class name if i open our this menu data here you can  see that this is the button   and we have a class name which is nav link  mobile so i will simply copy this class name and then paste it here and here i will add  a padding and padding from top and bottom   will be 0.5 frame from left and right one  ramp then i don't want to break the line so   that's why i will use white space and it will  be no wrap then i will add a background color   and it will be this one then i will add  a border radius and it will be 3 pixel   then i don't want any underline so that's why text  decoration will be none then i will add a font   size and the phone size will be 1.2 ram okay let's  make it 1.1 ram then i will change the text color   and the color will be this one okay now let's  decrease the font size again it it will be one rep   that's it then i will add a font to it and it will  be 500 that's it so this is for our large screen   device so in our large screen device our button is  looking like this but in our smart screen device   i want to increase the size of this button so  that's why simply copy this nav links and mobile   then paste it here and here i will change the  padding and the padding from everywhere it will   be 1.5 gram then display will be block then  text airline will be center then i will add   a font size and font size will be 1.3 damp then  i will add a font to weight and it will be bold then i will add a width for our this  button and it will be 80 percent   and right now our button is in the left  side but i want to align it in the center   so that's why i will use margin and the margin  will be auto that's it now here you can see that   our button is now in the center and guys here you  can see that our button is looking so beautiful   and also we have created our responsive network  here you can see that if i increase the size   in our large screen device our this navbar  is looking like this and in our small screen   device our network is looking like this okay and  earlier i have said that our this navbar will be   static it means it will always on the top  so for checking that let's go to our home   our home styles and here if i increase the  width by 200 v edge now here you can see   that we have a slider and if i now slide here you  can see that our never is on the top always okay   so our never is not hiding it is on the top  and it is a static network and our never is   looking beautiful in our small screen device and  in our large screen device as well so that's it   guys here you can see that we have successfully  created our responsive network using react.js   and for creating this network we have used some  advanced react functionalities we have we have   used dynamic properties and we have also seen how  to extend a class component how to use a state   how to change the state and all of this and  i hope this tutorial was helpful for you   and if you guys enjoyed this tutorial then  please please subscribe like this video and   press the bell icon for the future videos  and if you guys have any question about this   video please let me know in my comment section  that's it see you guys in our another tutorial you

Channel: Tech2 etc

Views: 55,683

Keywords: tech2 etc, react tutorial, react js, react navbar, navbar using react, navbar with react, responsive navbar tutorial, responsive navbar react js, react website tutorial, react website, responsive website react, react component

Id: q4mr71mFBr4

Length: 56min 44sec (3404 seconds)

Published: Tue Aug 16 2022