Slicing Gym Landing Page with Vue 3 Part 2: Navbar

Hello everyone, on this occasion I will share how to slicing gym landing page using vue 3. Previously I will use a design that has been made by my friend syamil. You can access the figma file here.

This is part 2 of the slicing gym landing page series with vue 3. In this part we will focus on slicing the navbar component. If you haven’t read the previous chapter, you can read it first.

Slicing Navbar

Create a Navbar.vue file in components/navbar , then call the created Navbar component into App.vue .

Logo Fitness

Inside Navbar.vue we will first create a navbar container to provide a container in the navbar. Create a <hader> with the navbar-header class to make the left-right padding not too tight, besides that we will also use responsibility to set the background color later

<header class="navbar-header">
</header>

then in src/assets/css/index.css we will add class navbar-header with utility tailwind. While we will use bg-Grayscale to see the results, later we will update as needed.

.navbar-header {
  @apply sm:px-0 
       px-5 
       py-5 
       md:py-0 
       md:px-7 
       lg:px-[120px] 
       bg-Grayscale 
       md:bg-Grayscale
       relative
       z-10;
}

Next create a nav tag and give it a navbox class to wrap the contents of our navbar, we will create a Logo, menu and hamburger menu for responsiveness. But in this session we will focus on the Logo first.

<nav class="nav-box">
</nav>

Just like before, we will apply the tailwind utility to our css file

.nav-box {
  @apply flex flex-wrap
  items-center
  justify-between
  w-full
  md:py-0
  text-lg 
  text-gray-700
  bg-transparent
  md:h-[80px];
}

Then we will add the logo to our navbar, but before we export the Logo from figma syamil design, I will export it into svg which I will later change to the .vue extension.

Once exported move it to src/assets/images/ , and back to Navbar.vue . Then we import our logo in the script.

import Logo from '@images/Logo.vue';

Then we will use the logo that we imported earlier by placing it in the a tag so that later it can be directed to the link.

<div>
 <a href="#" class="min-w-full">
  <Logo/>
 </a>
</div>

So if you look at it in a browser, it will look like this

navbar logo

Menu List

Wow, this is good enough but not finished yet, next we will add the menu. Create a div tag in which we will create an unordered list

Next we will styling the index.css

Responsive design

So far, the results have been good, but this design is still not responsive, because the design from Syamil is only a desktop web design, we will improve the appearance of the cellphone itself.

To provide a hamburger responsive feature we can take advantage of state. Create a state with any name (I use isMenuOpen) so if you click on the hamburger the menu will open, if you click on it a second time, the menu will close. But we will make the hamburger menu first

Next, in the menu list that we created earlier, we add the state isMenuOpen

:class="`${!isMenuOpen && `hidden md:visible lg:visible`} w-full md:flex md:items-center md:w-auto`"

In the hamburger there is an onclick event that calls the toggleMenu function, where this function will make the isMenuOpen state the opposite.

const isMenuOpen = ref(false);
function toggleMenu() {
  isMenuOpen.value = !isMenuOpen.value;
}

Full Code

So the full Navbar.vue code looks like this:

So the result will be like this:

That’s enough for slicing the navbar, the next part we will be slicing the hero banner. Thank you