Added hamburger menu for nav bar

components/app/nav-bar.vue

@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 const user = useSupabaseUser()
 const client = useSupabaseClient()
 const router = useRouter()
@@ -16,10 +16,17 @@
         router.push('/')
     }
 }
+
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+}
 </script>
 
 <template>
   <nav class="container">
+    <!-- Left side -->
     <ul>
         <li>
             <NuxtLink to="/">
@@ -27,16 +34,25 @@
             </NuxtLink>
         </li>
     </ul>
-        <ul>
-            <li>
-                <NuxtLink to='/players/random'>Random Card</NuxtLink>
-            </li>
 
-            <li>
-                <NuxtLink to='/players/69'>Card 69</NuxtLink>
-            </li>
+    <!-- Hamburger (mobile only) -->
+    <button class="hamburger" @click="toggleMenu" aria-label="Toggle menu" :class="{ open: menuOpen }">
+      <span class="bar"></span>
+      <span class="bar"></span>
+      <span class="bar"></span>
+    </button>
 
-            <li><a href="#">Shop</a></li>
+    <!-- Menu -->
+    <ul class="menu" :class="{ open: menuOpen }">
+      <li>
+        <NuxtLink to="/players/random">Random Cards</NuxtLink>
+      </li>
+      <li>
+        <NuxtLink to="/players/69">Card 69</NuxtLink>
+      </li>
+      <li>
+        <a href="#">Shop</a>
+      </li>
 
       <li v-if="user?.id" class="user-info">
         <NuxtLink to='/my-team'>
@@ -73,16 +89,28 @@
   </nav>
 </template>
 
-<style>
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+<style scoped>
+/* Basic layout */
+nav.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-block: 1rem;
+  position: relative;
+}
+
+/* Menu */
+.menu {
+  display: flex;
+  list-style: none;
+  gap: 0.25rem;
+  align-items: center;
 }
 
 /* Set a fixed size for the profile image */
 .profile-pic {
-    width: 24px; /* Shrinks to 24px */
-    height: 24px;
+  width: 32px; /* Shrinks to 24px */
+  height: 32px;
   border-radius: 50%;
   object-fit: cover; /* Ensures image maintains aspect ratio */
   margin-right: 10px; /* Adds space between the image and other elements */
@@ -91,26 +119,64 @@ button:disabled {
 /* Styling for the logout button */
 .logout-btn {
   font-size: 0.8rem;
-    color: var(--color-primary);
+  color: grey;
   background: none;
   border: none;
   cursor: pointer;
 }
 
-  /* Optional: Adjust the layout if needed */
-  .menu {
-    display: flex;
-    list-style: none;
-    justify-content: space-between;
+/* Hamburger button */
+.hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  cursor: pointer;
+  background: none;
+  border: none;
   padding: 0;
+  position: relative;
+  z-index: 100; /* stays above the menu */
 }
 
-  .menu li {
-    padding: 0.5rem;
+.hamburger .bar {
+  width: 24px;
+  height: 3px;
+  background-color: currentColor;
+  border-radius: 2px;
+  transition: 0.3s ease;
 }
 
-  .user-info {
+/* Animate hamburger to X */
+.hamburger.open .bar:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+.hamburger.open .bar:nth-child(2) {
+  opacity: 0;
+}
+.hamburger.open .bar:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .hamburger {
     display: flex;
-    align-items: center;
+  }
+
+  .menu {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 100%;
+    right: 1rem;
+    background: var(--pico-background-color, #fff);
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .menu.open {
+    display: flex;
+  }
 }
 </style>