React + SASS Header Navbar Component | Fully Responsive | React JS Project Tutorial w/ React Router

welcome to the code focus channel in this video i'll be walking you through the build process for a fully responsive and reusable header slash navbar component built fully with react we will use the use state and use effect hooks for functionality and we will use scss modules for styling towards the end i'll show you how to implement the react router standard library and how to then connect your navbar links so your application has full routing capabilities we will also use some custom hooks for functionality so here's the end result it has a logo section displayed to the left and a nav section displayed to the right we'll achieve the spacing with css flexbox each link has a custom hover and active state styling and the same goes for the call to action button on window resize which i will show you in developer tools the nav links disappear at a certain width and a hamburger menu icon appears there's also a bit of an animation you can see one clicked a nav menu will open it will slide in via animation and the nav links and buttons will be present within the menu the hovering active state styling remains the same also the hamburger menu icon turns into a close icon when clicked the hamburger menu icon will reinstate and if the menu is open and we resize the window at a certain width it'll automatically close and the nav links will appear as they were positioned initially all the links the logo and the call to action button are clickable and will redirect you to the page they represent if the menu is open and we click one of these links the menu will automatically close as we are redirected we will achieve this routing functionality with react router dom and you can style these pages however you'd like now that we've gone over the finished component we can start building all right to build this component we're going to be using visual studio code you can use whatever text editor you want but we will be using this for this tutorial so go ahead and find the directory you want to work in um i'm going to go ahead and create one here called navbar drag and drop into vs code okay go ahead and open the terminal and we're going to do npx create react app period what this will do is create a react boiler plate so we can start our project and the period here makes it so the boilerplate is installed within this directory so go ahead and install that to do this you have to have node installed on your system so make sure you have node all you have to do is go to node.js and install whatever one of these you want i recommend this one recommended for most users this one has the latest features but uh yeah don't stress over this do whatever one you want so while this is installing i'll go over the extensions you'll need so go ahead and type in prettier we're going to need prettier i recommend using that install eslint it's good for debugging and es7 snippets will streamline the component creation process so once the create react app is done installing you'll see happy hacking here and we can go right let me uh make this bigger for you we can go into the source folder this is the only folder we will be working in we can go ahead and delete the files that we do not need app css we don't need app test not needed logo goodbye goodbye goodbye now head on over into index.js get rid of report web vitals um strict mode don't need it just make sure app is in there we can take out these imports as well okay go ahead over to index css take everything out let's actually delete this file as well don't need it app take all this out boom okay now let's make a styles folder and within here we're going to do index.scss okay and index.js go ahead and import stylesindex dot s-css okay we'll also make it variables nope didn't mean to do that variables dot s-css and to make notes to make sas work in react app you have to install this node sas so npm install node sas within your terminal all right so now we're gonna go ahead over to google fonts and get the fonts we'll need open up google fonts type in poppins i love poppins my favorite font i use it for pretty much all my personal projects so go ahead and get 400 and 500 600 um 800 and 700 we're not going to be using all those but i like to have them just in case copy the import and paste it right into here the variables.scss file okay go back to here grab this copy and within index we can do body we'll paste the font family but we're gonna we're actually gonna cut this part out so do control x go to variables and to make a variable it's a dollar sign and we'll say pop-ins and we're going to paste what we cut save it go here back to index.scss and import the variables file there it is oh make sure you have a semicolon so that doesn't happen and for font family we'll go ahead and put that variable here so poppins awesome and before we forget let's go ahead and do a global whatever it's called through box sizing boarded box and a margin zero great so now we're gonna go back to variables and we're gonna get our colors going in our spacing our border radius and our header height so colors dark rgb 29 29 29 and light we'll go with just a plain white and a primary color we'll do um rgb 162 two and two four six you can do any color you want that's what i'm gonna go with and for background rgb two four four two four four two five five colors are done now on the spacing we'll do spacing medium 16 pixels and spacing large 32 pixels border radius do a border radius of 12 pixels camel case this and header height since we use this in multiple places i like to make a variable of it and we'll say 100 pixels okay now we're also going to make a mix in here it's pretty simple um so do app mixin breakpoint and pass in point do an if point is equal equal to medium which will be 768 pixels and media min with 48 em which translates to six or 768 pixels and then put content in here great now we can use this across our whole project awesome let's go back to index.css we'll do a nice width in here set it to 100 percent and we'll make do color in here for a global color and we'll say dark grey i also like to do this with the root i'll do height 100 okay awesome up next we're going to create a components folder within our source folder okay and we'll also create pages while we're at it get all the folders out of the way pages okay so within components make a header.js file rafce this is uh react snippets the extension we installed earlier if you go and press tab here it'll create a functional component for us right off the bat great so here we can now let's just save as it is go back to components folder and do header.module.scss import the variables oh there we go semicolon great now we can go back to header and make this div into a header give it a class name of classes dot header and we forgot to import classes so let's do that right now so import classes from dot slash header.module.scsf great okay now we'll go into header module and we'll do dot header awesome go back here i guess we'll build out this full component the all the jsx for it and then we'll get into the styling we'll do div class name is equal to classes dot header content and within here we'll have a h2 that says navbar and it's going to be our logo awesome now i'll make it nav give it a class name of classes.header oh what's going on here i didn't put an equal sign okay classes dot header content nav then the nav make a ul li and a and we'll just do that for now and we'll say page one and then take this li with the link inside of it and copy and paste it down to do that all i'm doing is alt shift and then the down arrow and do that three times so we have three here page one page two page three okay and then below the ul make a button and we'll say ct oops cta page wonderful okay next up is a div under that nav we'll give this a class name of classes dot header content toggle each word divided by two underscores okay so now we're going to need to import another thing to do mpi install react icons because we're going to use react icons to have our menu icons our hamburger and our clothes so when it's done you can close the terminal and go to the top we'll go ahead and import these so we'll do import buy menu alt right uh from okay i can't type from react icons slash buy and the second one will be will be ai outline close and make the react icons folder point to ai okay now we're going to be using state in a little bit but for now or um use state to switch between these two icons but for now i'm just going to put the hamburger john in here awesome all right open up the terminal and do npm start this will start our application and run it on localhost 3000 so it'll open it up for you automatically uh all right so we have a problem here let's go ahead and fix it real quick go to app js and take this out take out the css import all right should be good to go now all right so now we have our application open and we can see the changes as we make them so within the app component what we'll do is render the header so we'll make a fragment here within the fragment do a header import it and there we go now you can see everything we put in the header component is here but it is lacking styling so let's go ahead and start that so we'll do a mobile first uh workflow here so whatever changes we make it'll be ready for the mobile version and then we'll add the breakpoint mix-in to make it work for larger screens do back background dark for the header boom width of 100 and then for the height if you remember we made a variable for that so we'll do header height great and for padding 0 on top and 1.5 ram for the left and the right and here we're gonna put our first breakpoint so to include or at include break point and medium and we'll put padding 0 for the top and 3 for the sides so when we expand this you can see the padding increases at a certain width great and we'll actually make a transition for this so we'll do transition 0.3 seconds ease all now you can see uh it eases there it is you see that awesome next up we'll work on the content do overflow hidden oh don't do two semicolons uh color light margin zero for the top and auto on the left and the right so that it is centered max width of 1920 pixels that is so larger screens you can zoom out and um here i'll show you so when we zoom out um it remains in the same place uh the max width of that component will remain at 1920. i don't know if that makes sense do height 100 display flex great and like i said earlier we're going to be using flexbox to space the logo and the nav links so here we'll do a line item center and justify content space between okay so we actually messed up in the header component what would we um what i meant to do was have the h2 give this a class name of classes.header content logo right and then have the header content div contain everything so bring this div closing tag all the way to the bottom and now it should work so on larger screen you can see everything is spaced [Music] so [Music] you [Music] [Applause] [Music] [Music] [Music] [Music] all right so we're done the styling um as you can see it works pretty well already now i have to do is implement some state so uh when we click this the menu state is active and this will be opened and everything you'll see the menu okay you can we have a problem here where [Music] [Music] [Music] [Laughter] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Laughter] [Music] so [Music] [Music] so [Music] so [Music] all right so now we're going to make a layout component that will wrap everything else [Music] [Applause] [Music] so [Music] now we're gonna do react router dom so open up your terminal uh split terminal and do npm install react router dom [Music] [Music] [Music] [Applause] [Music] [Music] make it hurt [Music] so [Music] all right guys so that's going to conclude today's video thank you so much for watching um if you enjoyed please leave a like subscribe to the channel leave recommendations in the comment description on what i should do in the future uh thanks again for watching and have a great day [Music]

Channel: CodeFocus

Views: 7,909

Keywords: JavaScript, html, jsx, react, react router dom, react routing, javascript navbar, scss, sass, css

Id: D31P9ovJjqs

Length: 39min 10sec (2350 seconds)

Published: Thu Aug 19 2021