Coding a Responsive Navbar with React

okay so in today's video we are going to build a responsive navbar just like that with react so it's a simple component actually but with react it always gets complicated to do uh simple things so i'm here to help you and we can code it right now okay so here we are in vs code it's a simple create react app folder okay and in my app.js i just import my nav bar and i use it right there okay you can find the source code in description you can use it as you want or you can use it to code it with me okay you can do whatever you want with it so i just have a components folder right there with navbar folder too and in my navbar css and fbar.gs i have nothing right now but it's time to cut it so i will create the basic structure of my component rfc and i press enter and it will create a functional component it's working with the es7 rear redux extension actually okay so right now i want to use a nav element because it's a navigation and right there i will create a list and inside it ally items home services and contact okay okay great we can see the navigation right there and we also need a button with the class of btn and inside it i will just put btn and it will trigger our navigation when we are on small screen actually on mobile screen okay so this is it this is pretty simple you can use animation and everything in in the button but right now we will just focus on the component and the responsiveness bar component okay great so now we just need to style everything we can import navbar.css right there and let's let's style it it's pretty important to understand the css in that case because it's linked with responsive and everything so we need to do the css together so position fixed to fix it at the top with top 0 a width of 100 a height of 50 pixels a background linear gradient linear gradient 45 degrees with the rgb 156 14 and 156 right there and the second color would be midnight blue midnight blue right there whoops midnight blue uh midnight with the g blue right there okay all right great it's just to have some colors actually okay so below we are going to style our list with a list i'll type none great we can take the same background it's for the mobile purpose actually we do need the same background on the list and the navigation the list will take 100 percent height a display flex justify content center align item center to center our navigation links and the position relay relative for the btn okay btn great great so we do have our navigation right there it's nice but i want to style the text a little bit so items margin right 20 pixel font size of 20 pixel tool text transform uppercase okay and the color of f1 f1 f1 and a cursor pointer great so we do have our links right there well there is no links inside but in a real world component you just put some links inside it okay so great this is working and we do need to style our btn right now so btn display none position absolute and we put it at right 10 pixel top 7 pixel a little bit of padding and a color of 0 and a font size of 18 pixel great so right now it's displaying on but we can see it right there okay so we will display none basically because we don't want to see it on big screen we just want to see it on small screen actually okay so right now we can put some media queries at major screen and max with 500 pixel we want the list to change okay with the flex direction column from row right there to coulomb and the height of auto okay and the first items of the list will have an entire child border top one pixel solid okay great and a margin top of 50 pixel so you can see it if you press f12 and you click on right there toggle device toolbar okay you can see that there are some change if we go below 500 pixel okay so this is great this is what we want we can continue all the item items sorry we'll take a width of 100 percent right there you can take the border top two and you can put some text align center and remove the margin right to zero pixel okay nice and right there we will also make the button appear appear right there nice okay so if you refresh it you will see that it's it's working but it's not really good looking we need some padding maybe right there 20 pixel zero and yes yes this is this is much better and for the border we can put some white border actually okay so white border here and whoops white border there too okay that's nice and we can like lower the rgb right there to have something more soft okay soft border okay and that's nice that's nice great great so we do uh i have finished our css right there okay so so if you go on small screen it will trigger the media query but it's not working you can press the button and this is not what we want actually we don't want to go on mobile imagine you you just open the site and see the navigation open like that you don't want that you want to click on the button to open the navigation so we will need some javascript we will need to play with react to achieve something like that so we can go just right there on the navbar and yeah let's go for the logic part i would say so we need some user state and use effect use state and use effect okay great and the first thing i want to do is just to press the button right there and close and open the navigation we want to toggle the navigation so right there i will create some state that state is const toggle menu and the function to change the state will be set toggle menu okay equal user state and we start with false okay we don't want to see the screen when we begin okay great so now i can create a short circuit operator so right there i will just create something like toggle menu and end and i will return this right there okay great so you see that toggle menu is false so this is a short circuit operator if it's true it's uh showing that but if it's false it's just show nothing actually so this is great this is like a shorter version of the ternary operator so toggle menu is false so we don't see anything and if it's true we can see it okay that's nice so now what we need to do we need to create a simple function const toggle nav equal an arrow function and now we just toggle the menu with set toggle menu and we will reverse it every time so when we click on the button if toggle menu is false it will go to true and if it's true it will go to false actually okay great so now we do want to use it when we click on the button on click equal toggle nav and look at that yeah it's working it's working it's nice so it's it's nice actually but if you go on full screen it will hide it it will hide it why because right there we are just focusing on toggle menu and basically it's it's set to false actually so when we when we are on full screen or like that it will just show nothing actually so we need to detect the screen widths and we need to add something right there so how can we detect the screen widths well we will create just some another state screen width set screen width equal user states and it will have the value of window dot inner widths okay great we can take it right there and go right there and we will use the or logical operator or screen widths greater than 500 okay nice so now i'm right there and the screen width is obviously greater than 500 so one of the true two operand right there is true this is this one so we return the list okay but actually if we if we reduce if we shrink the the window okay by ourselves like when we press f12 right there it will show the menu okay on small screen and i can't toggle it okay because it's not um i mean it's not automatic it's just taking the screen when we arrive on our website no so if we are on big screen it will always keep the big value right there so we need to add some events just in case someone is shrinking the window which is kind of rare but you don't know so we will add that features so right there we will use use effect okay this is the hooks that is triggered when the component has finished mounting when is created uh that will trigger that callback function okay so we can put an empty array on the second argument and it will just trigger one time when the component is created at first so right there we can create const change widths and we can use set screen set screen widths right there and we will put window dot in our widths okay and this function will be called every time we shrink or if we if we grow the the window so window.addeventlistener resize yeah every time we resize the window change widths okay great so now every time i resize it so i have one little mistake right there okay nice so every time i resize it actually i'm uh updating my state and you saw that you see that it's working actually it's working great it's working great and this is working too okay nice last thing i want to add when you use use effect you need to be clean you need to use a cleanup function return so when you return a function like that this is a cleanup function and if your component gets destroyed if you remove it for whatever reason in your application you don't want to keep the advantage now in the memory okay so you just put right there window dot remove event listener resize resize and uh the the function it's associated with okay so the cleanup function is a firing firing executed uh whenever the component gets destroyed and we want to remove the event listener if the component gets destroyed we don't want to keep it in the memory great great great so right now it's working it's working just nice look we are on a big screen right there we can refresh it okay it's working and i go on small screen okay below 500 pixel and now i can click on my button and it will just open my navigation so yeah this is not the best good looking button you can do some hamburger animation or thing like that but i wanted to focus on the just the responsive navbar right there okay after that you can do whatever you want sorry for the double click my mouse is kind of broken i need to buy another one okay great so like it subscribe and see you next time you can find the source code in the description and you can use it for whatever you want see you next time bye

Channel: Learn to Create.

Views: 1,795

Rating: 4.9411764 out of 5

Keywords: responsive navbar, react, javascript, ui, component, navbar

Id: 8kPk7CTOQh4

Length: 14min 8sec (848 seconds)

Published: Sat Apr 24 2021