Building a web app(Whinst) Part 27: Creating a responsive Navbar

In the last article I talked about how I created a UI and UX design plan. One of the things I mentioned I’d work on in the plan was the creation of a responsive navbar. A navbar short for Navigation Bar is bar found usually at the top of the screen on a web application UI and contains links to the appropriate sections of an application. In this article, I’ll walk you through how I created a responsive navbar for the Whinst web app.

Creating the Navbar🔧

To create the navbar I first started by creating the general structure and design of how it would look on the landing page. This structure features the Whinst logo, links to some sections of the app and a sign in and sign up button. These are all horizontally aligned. To do this I used a nav tag with “flex, items-center and justify-between” design properties to properly align everything. The code below shows this.

<nav class="flex justify-between items-center">
</nav>

With this done the navbar looked good but only on devices with large horizontal screens. I had to implement a new design to cater for smaller/more vertical device screens. This is what is known as making a UI design responsive. The idea is for the UI to automatically change the navbar immediately the screen size changes. To implement this I used tailwind’s responsive design breaking points. A breaking point is just a point at which an application’s UI adapts to a changes in screen sizes. When a screen has a size less than the breaking point, the horizontal navbar disappears. When this navbar disappears, a hamburger button appears which when clicked opens up a vertical navbar that displays everything from the horizontal navbar but still fits properly within a device with a small screen size. To implement the hamburger button that opens and closes the vertical navbar, I used a simple function which acts when the button is pressed. By default the navbar is set to hidden but once the button is pressed it makes it appear by first checking whether the menu is open or closed. It works the same way when closing the navbar.

export default function LandingPage(){
 const [isOpen,setIsOpen] = useState(false)
//FUNCTION THAT OPENS AND CLOSES VERTICAL MENU
   const dropMenu =()=>{
        if(isOpen){
            setIsOpen(false)
        }else{
            setIsOpen(true)
        }
    }
return(
  <button className="hamburger-menu lg:hidden" onClick={dropDown}>
    HAMBURGER BUTTON
  </button>

//DROP DOWN VERTICAL MENU
<div className={`${isOpen ? 'block' : 'hidden'} >
</div>
)
}

Creating a responsive navbar was something that was certainly challenging for me😅. But now that it is done and working I’m just a couple days closer to completing the Whinst web app. Thank you for reading🙏.