Add mobile sidebar

src/views/partials/Header.vue

@@ -4,7 +4,7 @@
   >
     <button
       class="my-auto lg:hidden text-xl leading-10 rounded-md hover:text-usa-red hover:scale-110 transition-all"
-      @click="console.log('will toggle the nav')"
+      @click="toggleNav()"
     >
       <i class="fa-solid fa-bars"></i>
     </button>
@@ -51,12 +51,20 @@
         </div>
       </div>
     </div>
+
+    <MobileSidebar :class="isNavOpen ? 'opacity-0 invisible' : 'opacity-100 visible'" @toggle="toggleNav()" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+import MobileSidebar from "@/views/partials/MobileSidebar.vue";
 
 const isDropdownOpen = ref<boolean>(false);
+const isNavOpen = ref<boolean>(false);
+
+const toggleNav = (): void => {
+  isNavOpen.value = !isNavOpen.value;
+};
 
 const toggleDropdown = (): void => {
   isDropdownOpen.value = !isDropdownOpen.value;

src/views/partials/MobileSidebar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="fixed top-[60px] left-0 w-screen h-screen z-50 transition-all">
+    <div class="bg-usa-blue w-[275px] p-4 text-sm">
+      <div v-for="(link, idx) in SidebarLinks" :key="idx">
+        <div v-if="link.separator" class="mt-2 flex py-1 my-auto">
+          <h2 v-if="link.separatorTitle !== undefined" class="mr-4 text-usa-white text-md font-bold">
+            {{ link.separatorTitle }}
+          </h2>
+          <hr class="bg-extra-dark-purple dark:bg-extra-dark-purple my-2.5 flex-grow" />
+        </div>
+        <router-link
+          v-if="link.to"
+          class="flex rounded p-3 hover:bg-white text-usa-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between my-0.5"
+          active-class="bg-white bg-opacity-10 font-bold text-usa-red"
+          :to="link.to"
+        >
+          <div class="flex items-center gap-x-4">
+            <span class="w-4 mx-auto text-center">
+              <i :class="link.icon"></i>
+            </span>
+            <h2>{{ link.title }}</h2>
+          </div>
+          <button v-if="link.subLinks" @click="toggleSubLink(link.title)">
+            <i :class="showSubLinks.includes(link.title) ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
+          </button>
+        </router-link>
+        <div
+          v-else
+          class="flex rounded p-3 hover:bg-white text-usa-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between my-0.5"
+          active-class="bg-white bg-opacity-10 font-bold text-usa-red"
+        >
+          <div class="flex items-center gap-x-4">
+            <span class="w-4 mx-auto text-center">
+              <i :class="link.icon"></i>
+            </span>
+            <h2>{{ link.title }}</h2>
+          </div>
+          <button v-if="link.subLinks" @click="toggleSubLink(link.title)">
+            <i :class="showSubLinks.includes(link.title) ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i>
+          </button>
+        </div>
+        <div v-if="showSubLinks.includes(link.title)">
+          <div
+            v-for="(subLink, index) in link.subLinks"
+            :key="index"
+            class="flex rounded p-2 hover:bg-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between text-usa-white px-10"
+          >
+            <h2>{{ subLink.title }}</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import SidebarLinks from "@/data/sidebar";
+
+defineEmits(["toggle"]);
+
+const showSubLinks = ref<string[]>([]);
+
+const toggleSubLink = (title: string): void => {
+  if (showSubLinks.value?.includes(title)) {
+    showSubLinks.value = showSubLinks.value?.filter((link) => link !== title);
+  } else {
+    showSubLinks.value?.push(title);
+  }
+};
+
+onMounted(() => {
+  SidebarLinks.forEach((link) => {
+    if (link.showSubLinks) {
+      showSubLinks.value?.push(link.title);
+    }
+  });
+});
+</script>
+
+<style scoped></style>