📱 Navbar show/ hide functionality on mobile

src/assets/interface-icons/burger-menu.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>

src/components/PageStrcture/Nav.vue

@@ -1,5 +1,10 @@
 <template>
-    <nav id="nav">
+    <div class="nav-outer">
+      <IconBurger
+        :class="`burger ${!navVisible ? 'visible' : ''}`"
+        @click="navVisible = !navVisible"
+      />
+      <nav id="nav" v-if="navVisible">
         <router-link
           v-for="(link, index) in links"
           :key="index"
@@ -10,22 +15,43 @@
           class="nav-item"
         >{{link.title}}</router-link>
       </nav>
+    </div>
 </template>
 
 <script>
+import IconBurger from '@/assets/interface-icons/burger-menu.svg';
+
 export default {
   name: 'Nav',
+  components: {
+    IconBurger,
+  },
   props: {
     links: Array,
   },
+  data: () => ({
+    navVisible: true,
+    isMobile: false,
+  }),
+  created() {
+    this.navVisible = !this.detectMobile();
+    this.isMobile = this.detectMobile();
+  },
   methods: {
+    detectMobile() {
+      const screenWidth = document.body.clientWidth;
+      return screenWidth && screenWidth < 600;
+    },
     isUrl: (str) => new RegExp(/(http|https):\/\/(\S+)(:[0-9]+)?/).test(str),
   },
 };
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
 
+.nav-outer {
   nav {
     display: flex;
     align-items: center;
@@ -51,4 +77,17 @@ nav {
       }
     }
   }
+  /* Mobile and Burger-Menu Styles */
+  @extend .svg-button;
+  @include phone {
+    width: 100%;
+    nav { flex-wrap: wrap; }
+  }
+  .burger {
+    display: none;
+    &.visible { display: block; }
+    @include phone { display: block; }
+  }
+}
+
 </style>