How To Make Navbar In React JS | Light & Dark Mode Navigation Bar Using React JS

hi guys welcome back to another video of great stack today in this video we are going to create a nav bar using reactjs in this navad you can see we have the logo some menu links search box and this light mode and dark mode switch option if I click on this sun icon it will turn the website in light mode and when we click on this Moon icon it will turn the website in dark mode so we will create this navigation bar with light mode and dark mode switching option using reactjs so let's start this tutorial come to your desktop screen and here you can open the command prompt or power cell I will right click here with shift and here we have open power cell window here or you can open the command prompt here you can see we are on the desktop directory here we have to add one command just add npm create V at latest here I have added npm create V at theate latest press enter now you have to add the project name so I will add the project name navard then enter Then you have to select the react move the key down and select react and press enter then select JavaScript so it will create one folder on your desktop screen let me show you that here it is open this folder with vs code editor now we have to install the dependencies so in the right side bar you can click and select open in integrated terminal or here we have the option to open the terminal let's click here new terminal and we are on desktop folder then Navar folder in this one we will type one command that is npm install so this will take time according to your internet speed so after completion of this install you can see a new folder here that is nodecore module so after that we can run our project in the web browser to run this project just type npm run Dev enter this command press enter now it will start running your project on this local URL so you can copy this URL and open in the web browser or hold the control key and click on this link so it will open this link in the web browser so you can see our default react project is running in the browser now we have to clear the react default project so let's come back to the vs code editor again from this left side bar I will open this Sr C and in this SRC we have app.jsx let's open this and in this one let's clear everything and here we will type r a f c e so select this and it will create this component if this is not coming for you you can install one extension so this is the extension es7 react Redux I have already explained about the required extensions in the beginners react tutorial you can watch that video so let me close this and here we have created this component after that we will delete other file so in this sidebar you can see we have app. CSS so let's click here we will do right click and delete that's it after that we will delete one more file in this assets we have react. SVG we will delete it also then in this public folder we have v. SVG after that we will come to index.html file and in this one you can see we have one link ra icon so let's remove this and here we have the title so in this one we will replace the title so let me add never react tutorial we have updated the title now we have index. CSS file let's open it and here you can see some CSS properties so let's clear everything from here that's it after that let's come back to the web browser again so you can see our default project is clear now next we have to create the components so let's come back to the code file again right click on this SRC folder and select new folder so we will create a new folder and here we will add the folder name components now again right click on this components folder and again select new folder and here we will add the folder name Navar and within this navbar folder we have to create files so right click on this Navar and now we will select new file and here we will add the file name Navar do jsx so we have created one jsx file now we have to convert it in component so we will use R Ace next we have to create the CSS file so here again click on this folder Navar and select new file and here we will add the file name Navar docss next we have to import the CSS file in the Navar component so here we will add import and write the path of the CSS file so we will add dot slash na. CSS now we will add some CSS properties that will be applicable for complete web page so here we have the index. CSS file and in this index.css file I will add star that will apply CSS properties for all the HTML elements so here we will add the margin zero then padding zero let's add the Box sizing border box and we will add the font family sensitive after adding this let's come back to this Navar and here within this div let's add one title nav word after adding this if I come back to the web page you can see it is still blank we cannot see that title now what we have to do we have to mount this Navar component in the app.jsx file so open this app.jsx file and within this div we will insert that component so here we will add opening Arrow na select it from this snip it after selecting it you can see it has been imported here in the line number two so now we can close it using forward slash and closing Arrow like this after adding this if I come back again you can see this title is displaying on this web page now again come back and for this div we will add one class name and the class name is container and we will add the CSS properties for this container so save this file and in this index. CSS file we will add do container width will be 100 VW BP width minimum height will be 100 VH and we will add the background and here we will add one color code after applying it again come back to the web page so you can see this color on the complete web page and here we have the text na word now we have to add the HTML elements in the Navar component so in this Navar jsx file here just remove it and here let's add a class name that is Nar and in this one we will add the elements like image menu links so let's add the IMG tag and this image will be logo so we will add a class name Logo after this image we will add some links so we will add ul and Li so in this Li we will add the title so the first link title will be home let's duplicate it and now we'll add the second link text products then features and then next one is about so we have added one image tag in this SAR then some links and after that we will add one search box so here let's add one div and here we'll add one class name search box so in this search box we will add one input field input type will be text and then we will add the placeholder it will be search and after that there will one search icon to add the icon we will use the IMG tag now after this search V div we will add one more image that will be the icon for light mode and dark mode so just add one IMG tag and here we will add a class name that will be toggle icon now if I come back to the web page so you can see these allite text then this input field but we don't have any images because we have not added the path of these images in this SRC so to insert the image we will import the image first so first let's come back to the Navar project folder then open this SRC folder then assets folder in this assets folder you have to place all the images icons that you want to use on your web page so we have some images let me copy it here I will provide all these icons Link in the description so you can download these icons and use it in your project so after placing these images icons in the assets folder let's come back to the vs code again here in the left sidew in this assets you can see day.png logo black.png logo white.png so all the icons has been added in this assets now we have to import it so in this navb bar. jsx file we will add import then write the name so let's add logo we will use two logo so let's add the first logo name Logo light it means this logo will be used when the theme is light so when the theme is light we will use black logo so we will import from path so let's add the path we will come to asset folder and in this assets folder we have logo Das black.png that you can see here so let's add that file name here logo T black.png we have added the first image similarly we will import all the icons so let me duplicate it and replace the name this will be logo dark and when the website dark mode is enabled we will use the white logo so here we'll add logo White PNG you can see the logo white.png is available in this assets logo white.png now we will import the other icon that is search icon so duplicate it and here we will add search icon and here we will add the file name this will be search white search w.png so it will be used in the light mode so here let's add search icon light now duplicate it and we will add one more search icon that will be for the dark mode search icon dark and here we will add different file search b that is search black.png again duplicate it and here we will add the toggle icon so let's add to goore light so when the light mode is enabled we will use the night icon duplicate it and we will add toggle dark when the dark mode is enabled we will use the Day icon day.png so we have imported all the IC icons that I want to use on this web page next we have to place these images in the IMG tag so here we have to place the logo so we will use the curly addes and write the logo underscore light we will use the logo of light theme now we have another IMG tag here here we will add cly presses then it will be search icons so let's add search icon light next we have the IMG tag for this toggle icon here also we will add curly Braes toggle light so we have placed all the icons after that save the file and come back to the web page again so you can see here we have the logo then this small search icon then this icon to change the mode that is the moon icon so after adding this we will add some CSS properties to align all these things so let's come back and here we have the class name Navar so just use this class name in this Navar docss file here in this Navar docss file we will add dot class name to select this here we will add the width then we will add display ref Flex align items Center justify content space between and we'll add the background so the background will be white after adding this come back to the web page you can see we have all images and links in same horizontal line now we need some space from the left side and right side and some space from top and bottom also so let's come back and here we will add padding so we will add the padding of 15 pixel from top and bottom and 7% from left and right side after adding this again come back and here you can see we have proper space from the left side of this nav bar and right side of this nav bar after that we have to reduce the size of this logo so in this index . jsx you can see we have added the class name Logo so write the CSS for this logo class name here we will decrease the width so the width will be 160 pixels and cursor pointer after that we have UL you can see we have ul and Li so we will add the CSS properties for this list so for this UL we will add the width that is available in the entire row so here we will add Flex one so it will use the complete width available in that row then we will add list of style none and then we will add text align Center so right now you can see this is in this Center next we have to align it horizontally so in this we have lii also so for this lii let's add display inline block and uh we will add the margin to add space between these list items so we will add the margin of 10 pixel from top and bottom and 20 pixel from left and right side then we will add the font size of 18 pixel and we will add the cursor pointer after adding this you can see this menu links looks good next we have to decrease the size of this toggle icon so we will add the CSS properties for that toggle icon we have the class name here copy it and add it here for this toggle icon we will decrease the width it will be 50 pixel then cursor pointer and we will add a space in the left side so margin left of 40 pixel now you can see the size for this Moon icon is perfect next we have to add the CSS for this search box so let's come back here you can see in this div we have the class name search box in this one we have the input tag and IMG tag so let's use this class name search box here we will add the display Flex align items Center then we will add the background in this background we will add this color code after that we will add the padding that will be a space inside the search box so 10 pixel and 20 pixel then we'll add the Border radius of 50 pixel in this search box we have the input field also so let's add input tag and for this input field we will add some padding let's add 6 pixel and we will add background that will be transparent after that we will add border zero outline zero and color will be white then we will increase the font size so the font size will be 18 pixel and we'll add the maximum width of this search bar 200 pixel after that you can see it is looking like this next we have to add the color for this placeholder text and we have to decrease the size of this search icon to change the color of placeholder text here we will add placeholder and just add color white after that we have to add the size for the search icon so here we will use the search box and in this one we have the IMG tag there is only one image so we will add width 20 pixels and cursor pointer after adding this let's come back to the web page so you can see this search box is looking perfect now if I click on this toggle icon nothing is happening so now we have to create the functionality whenever we will click on this toggle icon it will change the appearance of this web page if it is in the light mode it will change it to the dark mode if it is in the dark mode it will change it to the light mode for that let's let's come back to the vs code again we have to create one user State variable that will store the theme either dark or light so we can create that user State variable in this file but I want to access that in all other components also suppose we will create another header component footer component later so we can access it when we will create it in this app.jsx file so in this app.jsx file we will create one user State variable so let's add space here before this return and here we will add const theme the variable name is theme and we will add the setter function set theme and we will initialize the value of this theme with light so just add use State select it from here after selecting it you can see it has been added here so in this user State we have to add the initial value so let's add light so the initially website will be in the light mode next we have to update this theme whenever we will click on the toggle button so that we have added in the nabar component so we have to pass this theme and set theme in the nabar component so we can pass it using props so the key will be theme and the value will be theme from here next we have to pass this function also that is Setter function so here also we will add set theme and the value is set theme so now we have passed this variable and function in the Navar component now we can receive it in navbar component so let's come back to navb bar. jsx file and here we have to destructure that because we have received it in object format so we will destructure using this curlys and we'll add the key name that is theme and set theme now we can use it so here we will create one function before this return statement let's add one const toggle uncore mode the toggle mode function we are creating let's add add the arrow function and here we will check for the theme Here we will add this theme and we will check if this theme is light okay we are using this turn operator if the theme is light then what will happen it will change it to dark to change the theme we will use the seter function set theme and just add dark and here we will add the else condition it means if the theme is not light then it will make it light so again use this Setter and we will add light that's it after adding this we have to link this function with the toggle icon so here we have the function name so we will place it here here we have the toggle icon so in this one we will add the on click so let me add it here only on click and we will add one Arrow function and place this function toggle mode so whenever we will click on this icon it will execute this toggle mode function and it will check for the value in this theme if it is light it will make it dark and if it is dark it will make it light so using this theme we will update the logo so you can see we have logo light so instead of writing this logo light we will use the Turner operator so let's remove it and here we will add theme comparison light if the theme is light then only it will add this logo light and here we will add colum logo dark it means when the theme is not equal to light it will add logo dark on the web page after adding this if I come back if I click on this icon it should replace this logo it is not working so let me come back here by mistake I have added on can play so let me update it we will add on click on click so whenever we will click it will execute this toggle mode function after adding this again come back and click on this icon you can see the logo disappears actually it is replacing the logo the logo is white that's why it is not visible so so we have to change the background color also so that we can see that logo so first let's replace all the icons here we have search icon and here we have the toggle icon so let's replace all these icons as we did here so again copy this theme is equal to light and place it here in the search icon here also we will do the same thing it will display search icon light then we will add colum search icon dark if it is not light it will display dark let's add the same thing in this toggle icon we will add theme is equal to light then it will display toggle light and else we will display the toggle dark so it will update all the IC you can see all the icons are hidden it is here if we'll click here you can see it is again visible it is hidden because the color is white now we have to update the background color so let's come back in this app.jsx file in this app.jsx file here we have the container so with this container we will add one more class name that will be light or dark anything so to add that we will add curly Braes then add template literal and place this container class name so this container class name will be always there but after that we will add dollar curly bres and we will add theme so instead of this theme it will add light or either dark so we will add the CSS for the dark class name so with this container we are adding dark so in this index. CSS file here we will add do container dot dark so when the dark mode is enabled we will add the background this color code and here we will add the transition 0.5 seconds so it will change the color smoothly after adding this you can see if I click on this toggle icon you can see the color for this background becomes dark if I click again it becomes light similarly we have to update the color of this navigation bar so you can see we have added this div with the class name container and uh this theme that will be light or dark so in this one we have the nav word so if I add this CSS with this parent class name and the class name of this nabar element then it will change the color so here in this Nabb bar. CSS file this is na. CSS file if I use the parent class name that is dark then we will use the class name nvar and here we will update the CSS properties so when the dark mode is enabled we will display the background that is black and we will change the color that will be the font color this is white here we are adding background black and earlier we had the background white so here we will add the transition 0.5 seconds so it will change the background color smoothly so it will update the background color now we will update the color of the input box also so here we'll add the pent class name dark then we'll add dot search box and then background so the background will become white in this search box we have the input field also so in this input field we have to update update the color that will be the text color so we'll update the color and we have to update the placeholder color also so let's duplicate it and here we will add the placeholder after adding this again come back to the web page and now you can see if I click on this toggle icon the website becomes dark everything is visual clearly we can see the logo also the search icon also this toggle icon also you can see the icon is also changing it has become the sun icon it means this is the button to change the mode to the light mode if I click here it becomes the light mode now we have the moon icon it means this button is for changing the mode to the dark mode so now you can see the dark mode but right now we have one problem we are on the dark mode and if I refresh the web page you can see again it becomes light mode so now we need the feature that whenever user select the dark mode and again open the web page it will be on the dark mode only for that we will use the local storage of browser that will store the mode and it will display the dark mode to the user whenever user will open the web page again so let's come back to the code file again and here in this app.jsx file in this one we will add one local storage so here before this use State variable here we will add one regular variable const and the name will be current theme current _ theme and we will add local storage dog item and we will add the key name that is this one we can add the same name so what this line will do it will search for the local storage with the name current theme in the browser if it is there it will store that in this current theme so instead of writing the light we will add this current theme so it will check from the browser if this current theme key is available in the browser local storage then it will display the value from there correct but suppose it is not available in the browser then what will happen so here we will add the turn operator if it is there then it will display this and if it is not there we will add the column and right light so if the current theme value is present in the local storage then it will add that value in this user State theme if it is not available then it will add light theme so this is for getting the value from the browser now we have one more thing whenever will click on the toggle icon it will change the theme so we have to update that theme in the local storage so here we will use the use effect select it from here after selecting you can see it has been added here right now in this use effect We'll add one add function and within this we will add the code to update the value in the local storage and this use effect will be updated every time whenever we will update the user State variable which one this theme so here let's add comma theme so whenever the theme gets updated it will execute the function written in this use effect so here we have to add the code that will update the value in local storage so just add local storage dot set item here we are adding local storage doget item that will read the value from the local storage and this local storage set item will update the value in local storage so we have to add the same key name that is current write it here and we will add the value value will be theme that is the use State variable after that save this code and come back to the browser again and here if I click on the moon icon it will become dark and try to refresh the web page you can see still it is dark mode let's change it to light and refresh the web page still it is in the light mode so now the light mode and dark mode is saved in the browser local storage if user select the dark mode the dark mode will be displayed every time he will open the web page again so finally we have completed this beautiful navigation bar with light mode and dark mode switching option I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel great stack to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 64,881

Keywords: react js project, react js project from scratch, react js website project, basic react js project, navbar in react js, how to create navbar in react js, create navbar in react js, navbar react js, how to create a navbar in react js, how to make navbar in react js, dark mode in react js, dark mode and light mode in react js, dark and light mode in react js

Id: 5mO-T2o9zuk

Length: 39min 53sec (2393 seconds)

Published: Wed Dec 06 2023