Menu in React from Brian Design – Notes


Updated Mar 18th, 2022

Link to the video here.


He builds this in create react app. He adds a components folder and inside he has a navbar folder and a button component. Inside the bathtub photos is that a menu item component a nav bar component and a nav bar CSS file. In the nav bar CSS file he is returning a HTML nav element with a className navbar items. He has an H1 with className navbar-logo. I feel logo he creates a div with a className of menu-icon. Within this day if he has a hamburger menu icon (We’ll need to install font awesome). After the menu icon div he has a UL with a bunch of LIs inside. In the menu items component He keeps all of the menu items in an array ad objects. Each object has title, URL, and cName keys. He added a different C name of Nav-links-mobile for the object with title of sign up. Export menu item and import it into Navbar component. In the URL he needs to map over the array from menuItems and rigs up the props with curly brackets like href={}. Added a key to li as needed by react. brought in font awesome via cdn (index.html in CRA, not so in NEXT). Added google fonts using link syntax in index.html file. In navbar.css he styled things up. Added navbar to app.js file to actually show on screen. Back in Navbar he set up state and started it off as false. Added an onClick to the menu-icon and set to this.handleClick. On the icon “i” tag itself you put a className that used ternsry. This. state. clicked ? ‘x icon’ : ‘burger icon’. Create a handle click function. Inside he uses this.setState and in curly braces sets clicked to !this.state.clicked. As a quick aside this is finally when the real magic is starting to happen and it’s 33 minutes into the video. Now he goes into the UL and will conditionally render some css classes. In adding some more CSS he added a nav-link-mobile class, which corresponds to the value set of the same name in the menuItem component file. 49 minutes in is where most for the action happens with media query and event function. He started wide and put mobile styles in media. I think this is a mistake and should be mobile first. His media query is @media screen and (max-width: 960px). For the .nav-menu made height 500px, still curious on the best way to fill the screen. Set top to 80px since that is the height of the navbar. Animated using left property so set initial to -100%. He used a selector to reset left to zero and opacity to 1. He used translate to reposition the logo a bit. He had two separate signup buttons and hid the one in the nav by targeting the component itself to be display: none.