menu btn styles

src/assets/styles/base.scss

@@ -32,6 +32,12 @@ h5, .h5 {
 .text-theme {
   @apply text-dark-brown dark:text-beige;
 }
+.stroke-theme {
+  @apply stroke-2 stroke-dark-brown dark:stroke-beige;
+}
+.fill-theme-heading {
+  @apply stroke-2 fill-dark-brown dark:fill-light-yellow/80;
+}
 .page-section {
   @apply container flex-col-2;
 }

src/assets/styles/components.scss

@@ -12,6 +12,7 @@
     &.primary {
         @apply bg-red-700 dark:bg-red-700/80 text-beige;
     }
+
     &.secondary {
         @apply bg-orange-700 dark:bg-orange-700/80 text-beige;
     }
@@ -51,10 +52,12 @@
     a {
         @apply no-underline dark:text-light-yellow/80;
     }
+
     .top-label {
         .divider {
             @apply flex-grow bg-dark-brown dark:bg-light-yellow h-[2px] hidden md:block;
         }
+
         .text-item {
             @apply text-center font-bold text capitalize dark:text-light-yellow/80;
         }
@@ -152,6 +155,15 @@
     }
 }
 
+.menu-links {
+    li {
+        @apply zoom-in-out;
+    }
+
+    a {
+        @apply no-underline uppercase text-[1.5rem] font-semibold;
+    }
+}
 
 .social-icons {
     svg {

src/components/Header.vue

@@ -27,8 +27,10 @@
                 </div>
             </div>
             <div class='divider'></div>
-            <!-- <slot name="dark-mode-btn" /> -->
-            <IconHamburger class="hover:cursor-pointer" @click="isMenuOpen.set(!$isMenuOpen)"/>
+            <!-- Menu Btn -->
+            <div class="absolute z-10 right-[3.5rem] bg-theme p-[1rem]">
+                <IconHamburger class="hover:cursor-pointer" @click="isMenuOpen.set(!$isMenuOpen)"/>
+            </div>
         </div>
     </header>
 </template>

src/components/Menu.vue

@@ -1,19 +1,35 @@
 <template>
-    <div
-        :class="[isVisible, 'fixed top-0 right-[-100vw] md:right-[-50vw] w-[100vw] md:w-[50vw] h-screen bg-theme z-10 transition-transform duration-300 ease-in-out']">
-        <button @click="isMenuOpen.set(!$isMenuOpen)">X</button>
-        <h1>Menu</h1>
-    </div>
+    <aside :class="[isVisible, 'fixed top-0 right-[-100vw] md:right-[-25vw] w-[100vw] md:w-[25vw] h-screen bg-theme z-10 transition-transform duration-300 ease-in-out border-red']">
+        <div class="p-[2rem] relative">
+            <button @click="isMenuOpen.set(!$isMenuOpen)" class="absolute top-5 right-5">
+                <IconClose />
+            </button>
+            <nav class="text-center">
+                <h1>Menu</h1>
+                <ul class="menu-links flex flex-col gap-y-4 mt-10">
+                    <li>
+                        <a href="/">Home</a>
+                    </li>
+                    <li>
+                        <a href="/projects">Projects</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </aside>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { isMenuOpen } from '../stores/menu';
 import { useStore } from '@nanostores/vue';
+import IconClose from '../components/icons/IconClose.vue'
 
+// State
 const $isMenuOpen = useStore(isMenuOpen);
 
+// Computed
 const isVisible = computed(() => ({
-    'translate-x-[-50vw]': $isMenuOpen.value,
+    'translate-x-[-100vw] md:translate-x-[-25vw]': $isMenuOpen.value,
 }))
 </script>

src/components/icons/IconClose.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="close-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <path class="stroke-theme" d="M18 6L6 18M6 6l12 12" />
+        </svg>
+    </div>
+</template>

src/components/icons/IconHumburger.vue

@@ -1,5 +1,5 @@
 <template>
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-        <path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+        <path class="fill-theme-heading" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
     </svg>
 </template>