feat: add responsive docs menu

Author: natedunn

src/views/components/Sidebar.vue

@@ -1,38 +1,99 @@
 <template>
-  <div :class="tw`min-h-full`">
+  <transition
+    :enter-active-class="tw`duration-150 ease-out`"
+    :enter-from-class="tw`opacity-0`"
+    :enter-to-class="tw`opacity-100`"
+    :leave-active-class="tw`duration-150 ease-in`"
+    :leave-from-class="tw`opacity-100`"
+    :leave-to-class="tw`opacity-0`"
+  >
+    <div
+      v-if="menuIsOpen"
+      @click="toggleMenu"
+      :class="tw`fixed inset-0 z-20 bg-black bg-opacity-50 lg:hidden`"
+      aria-hidden="true"
+    ></div>
+  </transition>
+
+  <button
+    @click="toggleMenu"
+    :class="
+      tw`flex lg:hidden w-full items-center space-x-2 cursor-pointer select-none text(gray-500 dark:gray-300 hover:dark:white hover:green-700) p-4 rounded bg-gray-100 dark:bg-gray-700 hover:(bg(green-100 dark:gray-600 opacity-50 dark:opacity-50))`
+    "
+  >
+    <svg
+      :class="tw`w-5`"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M4 6h16M4 12h16M4 18h16"
+      />
+    </svg>
+    <div>{{ currentRoute.meta.title }}</div>
+  </button>
+
+  <SidebarWrapper :menuIsOpen="menuIsOpen">
     <ul :class="tw`sticky top-10`">
       <li :class="classes.heading">Getting Started</li>
-      <SidebarLink to="/docs/install">Installation</SidebarLink>
-      <SidebarLink to="/docs/theming">Theming</SidebarLink>
-      <SidebarLink to="/docs/guides">Guides</SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/install">
+        Installation
+      </SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/theming">Theming</SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/guides">Guides</SidebarLink>
       <li :class="classes.heading">
         <div :class="tw`mt-8`">Components</div>
       </li>
-      <SidebarLink to="/docs/anchor">Anchor Link</SidebarLink>
-      <SidebarLink to="/docs/button">Button</SidebarLink>
-      <SidebarLink to="/docs/dropdown">Dropdown</SidebarLink>
-      <SidebarLink to="/docs/prose">Prose</SidebarLink>
-      <SidebarLink to="/docs/table">Table</SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/anchor">
+        Anchor Link
+      </SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/button">Button</SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/dropdown">
+        Dropdown
+      </SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/prose">Prose</SidebarLink>
+      <SidebarLink @click="toggleMenu" to="/docs/table">Table</SidebarLink>
     </ul>
-  </div>
+  </SidebarWrapper>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { tw } from "twind";
+import router from "@/router/index.ts";
+import SidebarWrapper from "@/views/components/SidebarWrapper.vue";
 import SidebarLink from "@/views/components/SidebarLink.vue";
 
 export default defineComponent({
   components: {
     SidebarLink,
+    SidebarWrapper,
   },
   setup() {
+    const { currentRoute } = router;
+    const menuIsOpen = ref(false);
     const classes = computed(() => {
       return {
         heading: tw`uppercase text-sm font-bold tracking-widest mb-3`,
       };
     });
-    return { tw, classes };
+
+    const toggleMenu = (): void => {
+      menuIsOpen.value = !menuIsOpen.value;
+    };
+
+    watch(menuIsOpen, (menuIsOpen) => {
+      menuIsOpen
+        ? document.body.classList.add(tw`overflow-hidden`)
+        : document.body.classList.remove(tw`overflow-hidden`);
+    });
+
+    return { tw, currentRoute, classes, menuIsOpen, toggleMenu };
   },
 });
 </script>

src/views/components/SidebarWrapper.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="tw`relative text-white!`">
+    <transition
+      :enter-active-class="tw`duration-150 ease-out`"
+      :enter-from-class="tw`scale-95 opacity-0`"
+      :enter-to-class="tw`scale-100 opacity-100`"
+      :leave-active-class="tw`duration-150 ease-in`"
+      :leave-from-class="tw`scale-100 opacity-100`"
+      :leave-to-class="tw`scale-95 opacity-0`"
+    >
+      <div
+        v-if="menuIsOpen === true"
+        :class="
+          tw`z-30 absolute top-4 inset-x-0 mx-auto w-full transition transform origin-top`
+        "
+      >
+        <div
+          :class="
+            tw`rounded-lg shadow-lg ring-1 p-6 ring-black ring-opacity-5 bg-white dark:bg-gray-800 divide-y divide-gray-200`
+          "
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+  <div :class="tw`min-h-full hidden lg:block`">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { tw } from "twind";
+
+export default defineComponent({
+  props: {
+    menuIsOpen: {
+      type: Boolean,
+      required: true,
+    },
+    toggleMenu: {
+      type: Function,
+      required: false,
+    },
+  },
+  setup() {
+    return { tw };
+  },
+});
+</script>

src/views/layouts/default.vue

@@ -11,7 +11,7 @@
           <div :class="tw`col-span-1 lg:mt-1.5`">
             <Sidebar />
           </div>
-          <div :class="tw`col-span-3 mt-14 lg:mt-0`">
+          <div :class="tw`col-span-3 mt-8 lg:mt-0`">
             <BaseLayout />
           </div>
         </div>