---
title: Dev Portfolio Project Part 2 - NavBar
id: 615
html_url: "https://acmcsuf.com/blog/615"
discussion_url: "https://github.com/EthanThatOneKid/acmcsuf.com/discussions/615"
author: "anhduy1202 (https://github.com/anhduy1202)"
labels: ["dev", "svelte"]
created: "2022-10-13T22:27:54.000Z"
edited: "2022-10-22T00:00:39.000Z"
---

Dev Portfolio Project Part 2 - NavBar
=====================================

INTRODUCTION 🥳

 * In this blog, we'll guide you to create a navigation bar for your website


PREREQUISITES 🥸

 * Cloned the website and able to run it locally ( If not: check previous part )


WHAT YOU WILL LEARN 🤓

 * Brainstorming about website layout
 * Project folder + file structures
 * Components
 * Svelte #each loop
 * JavaScript Date object
 * ... many more


LET'S START 🤖


I. WEBSITE LAYOUT 🌐


HERE'S WHAT OUR FINAL WEBSITE WILL LOOK LIKE

Screen Shot 2022-10-13 at 3 20 27 PM
[https://user-images.githubusercontent.com/58461444/195721554-ef56be97-0e9a-4ad7-a3f7-528d0ba1c974.png]https://user-images.githubusercontent.com/58461444/195721554-ef56be97-0e9a-4ad7-a3f7-528d0ba1c974.png


HERE'S HOW IT'LL BE BROKEN DOWN BEFORE JUMPING TO CODE

Screen Shot 2022-10-13 at 3 20 27 PM
[https://user-images.githubusercontent.com/58461444/195721905-8950dc80-d729-41b0-9b27-7537ab2159cb.png]https://user-images.githubusercontent.com/58461444/195721905-8950dc80-d729-41b0-9b27-7537ab2159cb.png


II. LET'S TAKE A LOOK AT OUR PROJECT STRUCTURE 👀


HERE'S WHAT YOU WILL SEE WHEN FIRST START

Screen Shot 2022-10-13 at 8 54 34 PM
[https://user-images.githubusercontent.com/58461444/195758801-8c57fe61-b968-4309-b635-07974a1f1e43.png]https://user-images.githubusercontent.com/58461444/195758801-8c57fe61-b968-4309-b635-07974a1f1e43.png


ALTHOUGH THERE'RE LOTS OF FOLDERS TO LOOK AT, WE ONLY FOCUS ON THE "SRC" FOLDER

Screen Shot 2022-10-13 at 8 56 04 PM
[https://user-images.githubusercontent.com/58461444/195759049-18fdd991-f235-49e6-811f-c44a9d3871b2.png]https://user-images.githubusercontent.com/58461444/195759049-18fdd991-f235-49e6-811f-c44a9d3871b2.png


HERE'RE THE MAIN FILES/FOLDERS YOU NEED TO KNOW

 * App.svelte is our main Svelte file
 * App.cssis our main global CSS file
 * lib folder contains our components which we will rename to "components" later on instead


LET'S DO A QUICK CLEAN UP BY REMOVING THINGS WE DON'T NEED

App.svelte: Delete everything but the tags

Screen Shot 2022-10-13 at 9 01 47 PM
[https://user-images.githubusercontent.com/58461444/195759652-21a46b6e-7fa6-4c91-9fd3-9b4be0fe24e3.png]https://user-images.githubusercontent.com/58461444/195759652-21a46b6e-7fa6-4c91-9fd3-9b4be0fe24e3.png

App.css: Delete place-items:center ( line 30 ) since it'll make everything become center and we
don't want that

Screen Shot 2022-10-13 at 9 09 43 PM
[https://user-images.githubusercontent.com/58461444/195760555-8f7ba37b-61fe-45a0-ac16-41a18834679d.png]https://user-images.githubusercontent.com/58461444/195760555-8f7ba37b-61fe-45a0-ac16-41a18834679d.png

lib : Rename to components

Screen Shot 2022-10-13 at 9 03 23 PM
[https://user-images.githubusercontent.com/58461444/195759839-8144ba95-049c-4cd7-a682-7cf83a38f882.png]https://user-images.githubusercontent.com/58461444/195759839-8144ba95-049c-4cd7-a682-7cf83a38f882.png

Delete Counter.svelte

Screen Shot 2022-10-13 at 9 04 12 PM
[https://user-images.githubusercontent.com/58461444/195759964-aaae9858-01fa-48d3-952f-1ff9f86f37e1.png]https://user-images.githubusercontent.com/58461444/195759964-aaae9858-01fa-48d3-952f-1ff9f86f37e1.png


III. GOOD JOB, NOW LET'S START MAKING OUR NAVBAR 🥳

 * Here's the NavBar we want to make:

> About, Experiences, Projects are link to our sections, Thursday is the current date ( we'll use
> JavaScript Date Object to make this )

Screen Shot 2022-10-13 at 11 04 24 PM
[https://user-images.githubusercontent.com/58461444/195773912-328b1f5d-9770-441a-a34f-3b66ff77379b.png]https://user-images.githubusercontent.com/58461444/195773912-328b1f5d-9770-441a-a34f-3b66ff77379b.png

 * In components folder, create a file called NavBar.svelte and add the necessary tags as follow

> Note: You don't need to have all tags as below, you can even have just a <nav> </nav> tag and it's
> still valid in Svelte

Screen Shot 2022-10-13 at 9 08 38 PM
[https://user-images.githubusercontent.com/58461444/195760421-dd4144c5-5436-41af-a642-98dece8b3331.png]https://user-images.githubusercontent.com/58461444/195760421-dd4144c5-5436-41af-a642-98dece8b3331.png


NOW, LET'S SEE HOW COMPONENT WORKS IN SVELTE

 * Type anything between <nav> </nav> ( because if you want to display something, it has to be
   within a HTML tag ) in your NavBar.svelte file and save it

> <p> </p> tag stands for paragraph

Screen Shot 2022-10-13 at 9 18 57 PM
[https://user-images.githubusercontent.com/58461444/195761521-a0f7804d-a0b7-4e8f-9e23-b6aec37c26ed.png]https://user-images.githubusercontent.com/58461444/195761521-a0f7804d-a0b7-4e8f-9e23-b6aec37c26ed.png

 * Now, if you run your website using npm run dev, it won't display that words because you have to
   import it in App.svelte - our main Svelte file

Screen Shot 2022-10-13 at 9 21 05 PM
[https://user-images.githubusercontent.com/58461444/195761730-c8a30186-cd70-4dcd-812c-d92a3a8a14b7.png]https://user-images.githubusercontent.com/58461444/195761730-c8a30186-cd70-4dcd-812c-d92a3a8a14b7.png


TADA !! THAT'S HOW YOU IMPORT A COMPONENT , WHEN YOU RUN YOUR WEBSITE AGAIN, YOU SHOULD SEE IT
DISPLAY NAVBAR CONTENT

Screen Shot 2022-10-13 at 9 23 16 PM
[https://user-images.githubusercontent.com/58461444/195761975-94a482a8-b9e9-421b-8f45-3eb9e9abbd52.png]https://user-images.githubusercontent.com/58461444/195761975-94a482a8-b9e9-421b-8f45-3eb9e9abbd52.png


NOW, LET'S GO BACK TO NAVBAR.SVELTE AND START CREATING OUR NAVIGATION BAR

> You can copy paste this code block and read the comments to understand more

<script>

</script>

<nav>
 <!-- We're creating a navigation bar with 3 items: About, Experiences, Projects\-->

     <section class="container__nav" id="/">
        <ol>  
  <!-- the href=#something  links to each section so we can create a scroll to section feature\-->
           <li>
               <a href='#About' class="nav__item">
                  About
               </a>
          </li>
          <li>
               <a href='#Experiences' class="nav__item">
                 Experiences
               </a>
         </li>
      <li>
          <a href='#Projects' class="nav__item">
            Projects
          </a>
     </li>
   </ol> 
</section>
</nav>

<style>
/* This is CSS style for our navigation bar */
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>


NOW, WHEN YOU SAVE THE FILE, OUR NAVBAR WILL LOOK NICER

Screen Shot 2022-10-13 at 9 31 10 PM
[https://user-images.githubusercontent.com/58461444/195762910-a286643b-875b-45fa-b2f8-68e1929c893d.png]https://user-images.githubusercontent.com/58461444/195762910-a286643b-875b-45fa-b2f8-68e1929c893d.png


⚠️ BUT, DON'T YOU THINK THIS BLOCK OF CODE IS KINDA REPETITIVE? WE DON'T WANT TO TYPE THE SAME THING
EVERY TIME WE ADD A NEW ITEM TO OUR NAV BAR

<ol class="container__nav" id="/">
  <!-- the href=#something  links to each section so we can create a scroll to section feature-->
      <li>
      <a href='#About' class="nav__item">
        About
      </a>
     </li>
     <li>
      <a href='#Experiences' class="nav__item">
        Experiences
      </a>
    </li>
     <li>
      <a href='#Projects' class="nav__item"\>
        Projects
      </a>
     </li>
  </ol>


💡SO, WHAT WE CAN DO BETTER BY USING SVELTE #EACH LOOP, WE'LL CREATE AN ARRAY OF OBJECTS THAT HOLD
OUR NAV ITEMS AND THEN LOOP THROUGH EVERY ITEMS AND RENDER IT TO THE BROWSER

> NavBar.svelte

<script>
  // @ts-nocheck
  history.scrollRestoration = "manual" // Prevent automatic scrolling
  const navItems = [
    { title: "About", url: "#About" },
    { title: "Experiences", url: "#Experiences" },
    { title: "Projects", url: "#Projects" },
  ];

</script>

<nav>
  <section class="container__nav" id="/">
    <ol class="container_nav" id="/">
      {#each navItems as { title, url }}
        <li>
          <a href={url} class="nav__item">
            {title}
          </a>
        </li>
      {/each}
    </ol> 
  </section>
</nav>

<style>
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>


JAVASCRIPT DATE OBJECT 📆

> Display the current date with custom parameters

We can do that in the <script> </script> that allows us to use JavaScript magic

let time = new Date(Date.now()); // Create Date Object
const options = { // We'll need this option for toLocaleDateString() method later on to display on the weekday
  weekday: "long",
};

Then we can display it in our html like this to display current weekday:

<p class="time">{time.toLocaleDateString(undefined, options)}<p>


HERE'S THE FULL CODE FOR NAVBAR.SVELTE

<script>
  // @ts-nocheck
  history.scrollRestoration = "manual" // Prevent automatic scrolling
  const navItems = [
    { title: "About", url: "#About" },
    { title: "Experiences", url: "#Experiences" },
    { title: "Projects", url: "#Projects" },
  ];
  let time = new Date(Date.now());
  const options = {
    weekday: "long",
  };
</script>

<nav>
  <section class="container__nav" id="/">
    <ol class="container__nav" id="/">
      {#each navItems as { title, url }}
        <li>
          <a href={url} class="nav__item">
            {title}
          </a>
        </li>
      {/each}
    <p class="time">{time.toLocaleDateString(undefined, options)}</p>
  </ol>
  </section>
</nav>

<style>
   ol {
    list-style: none;
  }
  li {
    padding: 0;
  }
  .container__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .nav__item {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 2rem;
    transition: all 400ms;
  }
  .nav__item:hover {
    color: rgb(0, 157, 255);
  }
  .time {
    color: #1a1a1a;
    font-weight: 700;
    background-color: #2C91C6;;
    padding: 0.35rem;
    margin: 0 2rem;
    border-radius: 12px;
  }
</style>


NOW, YOU'VE SUCCESSFULLY MADE THE NAVIGATION BAR 🤩 🤩 YOU CAN ALWAYS CHECK THE FULL CODE HERE
[https://github.com/acmCSUFDev/intro-to-web-dev/tree/part-2-reference]