Making the Navbar component

In this tutorial, we will be using SvelteJS for interactivity, CSS for styling and boxicons for icons to make a navigation bar that hides when a user scrolls down and appears when a user scrolls up on a mobile device.

What we will be making

To get started with this project, you have to install Svelte with npm. That is, if you haven't already. If you have not, type this in the terminal:

  npm create svelte@latest my-hidden-navbar 
  cd my-hidden-navbar 
  npm install 
  npm run dev

This will download the all the Svelte dependencies and devDependencies into a node_modules directory and 'npm run dev' command will open up a development server that you can click on to view in the browser. Also, if you are using VSCode, you can download the 'Svelte for VSCode' extension to get syntax highlighting and intellisense for Svelte components.

That is it for the configuration, time to get coding.
In the terminal, type:

  cd src && rm -r lib && mkdir lib
  rm -r App.css App.svelte && touch App.css App.svelte 
  cd lib && touch Navbar.svelte

Navbar.svelte will be the main component that will have our navigation bar. To make the navbar, our component will have a script tag for the functionality, a style tag for the CSS styling and a nav element that with a child ul element inside of it.

Navbar.svelte

  <script>
    let icons = [
      'bx bx-home',
      'bx bx-info-circle',
      'bx bx-user-circle',
      'bx bx-message-dots'
    ];

    export let opacity;
    export let bottom;
  </script>

Here, we have an array of strings that are actually boxicon classes which we will loop over to make icons; and two exported variables, which we will talk about later. They are called props by the way.

Next is the template syntax for our component. Add this to the Navbar.svelte.

Navbar.svelte

  <nav class="nav-bar" style="opacity: {opacity}; bottom: {bottom};">
    <ul class="nav-bar_nav">
      {#each icons as icon}
        <li>
          <i class={icon} style="font-size: 35px;"></i>
        </li>
      {/each}
    </ul>
  </nav>

This code block contains a nav element with a utility class which has a child ul element. The nav element has the opacity and bottom CSS properties in curly braces to interpolate the variables 'opacity' and 'bottom' as the values, so that when ever the values change, the CSS properties will update with the new values. What I mean:

The variables and their values in the script tag.

The values interpolated into the CSS properties.

After the values change

The new variable values in the script tag.

The new values interpolated into the CSS properties.

The block that starts and ends with '{each}' is called an 'each block' and is very similar to the 'for loop' in VanillaJS. It is mainly used for making lists and iterating over arrays. This code appears weird at first glance, but is really just a way of saying 'for each of the values in the icons array, make an li element which has a child i element with the class of the current value in the icons array'. For example, the first iteration will produce:

  <li>
    <i class="bx bx-home" style="font-size: 35px;"></i>
  </li>

The last part is styling our component. This can be done in various ways- by writing the styles directly in a style tag or writing the styles in a separate CSS file and importing it inside the script tag of our component.

But, we will be writing our's in a style tag.

Navbar.svelte

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .nav-bar {
      width: 80%;
      height: 65px;
      background: orangered;
      padding: 15px;
      margin: auto;
      border-radius: 15px;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: -10%;
      transition-property: opacity, bottom;
      transition-duration: .5s;
      transition-timing-function: ease;
      z-index: 1;
      display: flex;
    }
    .nav-bar_nav {
      width: 100%;
      height: 100%;
      display: flex;
      list-style-type: none;
      justify-content: space-around;
      align-items: center;
    }
  </style>

For the styling, I will explain the main properties we set on the elements.

• We set all the elements to have a padding and margin of 0 and a box-sizing of 'border-box'.

• Now we want the nav element to be 80% of the width of the body element and to have a height of 65px, padding of 15px, border-radius of 15px to make the corners rounded, a postion of 'fixed', so it stays in the same position when it appears, and a z-index of '1' to make it stay ontop of the main content. Left and transform properties of '50%' and 'translateX(-50%)' respectively to center the navbar horizontally, bottom of '-10%' to make the navbar stay at the bottom when it is not visible (I will explain how it will later). Now, for the transition, the transition-property to 'opacity' and 'bottom', duration of 0.5s and timing-function of 'ease' so the transition goes smoothly.

• Lastly, for the ul element, width and height of '100%', display of 'flex', list-style-type of 'none' so we can override the bullet point style, justify-content of 'space-around' to give the icons some space around themselves and align-items of 'center' to align them vertically in the center.

In the next post of this series, we will make a component to render some dummy text(lorem ipsum...) and I will explain how the Navbar component will be connected to the dummy text component. Thank you for reading!!