Add working links in navbar

components/Nav.vue

 <template>
   <div class="footer">
     <ul class="nav-menu" :class="{hidden: isHidden}">
-      <li>Tracker</li>
-      <li>Statistics</li>
-      <li>Settings</li>
+      <li @click="isHidden = true">
+        <NuxtLink to="/#tracker-section">
+          Tracker
+        </NuxtLink>
+      </li>
+      <li @click="isHidden = true">
+        <NuxtLink to="/#statistics-section">
+          Statistics
+        </NuxtLink>
+      </li>
+      <li @click="isHidden = true">
+        <NuxtLink to="/#settings-section">
+          Settings
+        </NuxtLink>
+      </li>
     </ul>
     <nav class="navbar">
       <button class="hamburger-menu" @click="isHidden = !isHidden">
@@ -29,9 +41,11 @@
       </g>
     </svg>
       </button>
-      <svg class="home-icon" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 32.955">
+      <NuxtLink :to="{ path: '/', hash: '#top' }">
+        <svg class="home-icon" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 32.955">
         <path id="Path_2" data-name="Path 2" class="cls-1" d="M60,48h7V36H77.028L77,48h7V28.28L72,18.045,60,28.28Z" transform="translate(-58.5 -16.545)"/>
       </svg>
+      </NuxtLink>
     </nav>
   </div>
 </template>
@@ -77,12 +91,15 @@ export default {
     transition: all 0.25s ease-in-out;
 
     li {
-      border-bottom: 1px solid white;
-      margin-top: .5em;
-      padding: .5em;
       width: 80%;
-    }
 
+      a {
+        display: list-item;
+        border-bottom: 1px solid white;
+        margin-top: .5em;
+        padding: .5em;
+      }
+    }
   }
   .nav-menu.hidden {
     transform: translateY(calc(100% + 50px));

components/TheDroplet.vue

 <template>
-  <section class="droplet-section">
+  <section class="droplet-section" id="droplet-section">
     <h1 class="greeting">Hi, <span>John</span>!</h1>
     <p class="goal">
       1000 / 2500 ml

components/TheSettings.vue

 <template>
-  <section>
+  <section id="settings-section">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="avatar"

components/TheStatistics.vue

 <template>
-  <section class="statistics-section">
+  <section class="statistics-section" id="statistics-section">
     <h1>Work in progress...</h1>
   </section>
 </template>

layouts/default.vue

@@ -29,6 +29,8 @@ html {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
+
+  scroll-behavior: smooth;
 }
 
 *,

pages/index.vue

 <template>
   <div class="container">
-    <TheDroplet />
-    <NuxtChild />
-    <TheStatistics />
-    <TheSettings />
+    <a id="top"></a>
+    <TheDroplet/>
+    <NuxtChild/>
+    <TheStatistics/>
+    <TheSettings/>
   </div>
 </template>
 

pages/index/index.vue

 <template>
-  <section class="tracker-section">
+  <section class="tracker-section" id="tracker-section">
     <div class="tracker">
       <MililiterInput :id="'goal'">
         <!--suppress XmlInvalidId -->