Create navbar appearance

components/Nav.vue

+<template>
+  <div class="footer">
+    <ul class="nav-menu" :class="{hidden: isHidden}">
+      <li>Tracker</li>
+      <li>Statistics</li>
+      <li>Settings</li>
+    </ul>
+    <nav class="navbar">
+      <button class="hamburger-menu" @click="isHidden = !isHidden">
+        <svg class="hamburger-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26">
+      <defs>
+        <style>
+
+        </style>
+        <clipPath id="clip-path">
+          <rect class="cls-1" width="26" height="26"/>
+        </clipPath>
+      </defs>
+      <g id="Repeat_Grid_1" data-name="Repeat Grid 1" class="cls-2">
+        <g transform="translate(-12 -13.5)">
+          <path id="Path_1" data-name="Path 1" class="cls-3" d="M1.352,0H23" transform="translate(13 15.5)"/>
+        </g>
+        <g transform="translate(-12 -3.5)">
+          <path id="Path_1-2" data-name="Path 1" class="cls-3" d="M1.352,0H23" transform="translate(13 15.5)"/>
+        </g>
+        <g transform="translate(-12 6.5)">
+          <path id="Path_1-3" data-name="Path 1" class="cls-3" d="M1.352,0H23" transform="translate(13 15.5)"/>
+        </g>
+      </g>
+    </svg>
+      </button>
+      <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>
+    </nav>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      isHidden: true,
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.footer {
+  width: 100%;
+  height: 50px;
+  position: fixed;
+  bottom: 0;
+
+  .navbar{
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #003D6E;
+  }
+
+  .nav-menu {
+    position: fixed;
+    z-index: -10;
+    bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 14ch;
+    padding: .5em 0;
+
+    background-color: #003D6E;
+    color: white;
+
+    transition: all 0.25s ease-in-out;
+
+    li {
+      border-bottom: 1px solid white;
+      margin-top: .5em;
+      padding: .5em;
+      width: 80%;
+    }
+
+  }
+  .nav-menu.hidden {
+    transform: translateY(calc(100% + 50px));
+    opacity: 0;
+  }
+}
+
+.hamburger-icon {
+  margin: .5rem;
+
+  .cls-1 {
+    fill: none;
+  }
+
+  .cls-2 {
+    clip-path: url(#clip-path);
+  }
+
+  .cls-3 {
+    fill: #003b70;
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3px;
+  }
+}
+
+.home-icon {
+  margin: .5em;
+  .cls-1 {
+    fill: none;
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3px;
+  }
+}
+</style>