From cfe91c701ed898e8fc1df12f0186279d8ffcc0c8 Mon Sep 17 00:00:00 2001
From: Cal Corum <calcorum@users.noreply.github.com>
Date: Thu, 8 May 2025 21:09:50 -0500
Subject: [PATCH] Added hamburger menu for nav bar

---
 components/app/nav-bar.vue | 260 +++++++++++++++++++++++--------------
 1 file changed, 163 insertions(+), 97 deletions(-)

diff --git a/components/app/nav-bar.vue b/components/app/nav-bar.vue
index d930708..17f2605 100644
--- a/components/app/nav-bar.vue
+++ b/components/app/nav-bar.vue
@@ -1,116 +1,182 @@
-<script setup lang='ts'>
-    const user = useSupabaseUser()
-    const client = useSupabaseClient()
-    const router = useRouter()
+<script setup lang="ts">
+const user = useSupabaseUser()
+const client = useSupabaseClient()
+const router = useRouter()
 
-    const isLoggingOut = ref(false)
+const isLoggingOut = ref(false)
 
-    async function logout() {
-        isLoggingOut.value = true
-        const { error } = await client.auth.signOut()
-        isLoggingOut.value = false
+async function logout() {
+    isLoggingOut.value = true
+    const { error } = await client.auth.signOut()
+    isLoggingOut.value = false
 
-        if (error) {
-            console.error('Logout failed:', error)
-        } else {
-            router.push('/')
-        }
+    if (error) {
+        console.error('Logout failed:', error)
+    } else {
+        router.push('/')
     }
+}
+
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+}
 </script>
 
 <template>
-    <nav class="container">
-        <ul>
-            <li>
-                <NuxtLink to="/">
-                    <strong>Paper Dynasty</strong>
-                </NuxtLink>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <NuxtLink to='/players/random'>Random Card</NuxtLink>
-            </li>
+  <nav class="container">
+    <!-- Left side -->
+    <ul>
+        <li>
+            <NuxtLink to="/">
+                <strong>Paper Dynasty</strong>
+            </NuxtLink>
+        </li>
+    </ul>
 
-            <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'>
-                    <img
-                        :src='user.user_metadata?.avatar_url || "/default-avatar.png"'
-                        alt="My Team"
-                        class="profile-pic"
-                    />
-                </NuxtLink>
+      <li v-if="user?.id" class="user-info">
+        <NuxtLink to='/my-team'>
+            <img
+                :src='user.user_metadata?.avatar_url || "/default-avatar.png"'
+                alt="My Team"
+                class="profile-pic"
+            />
+        </NuxtLink>
 
-                <button 
-                    @click="logout" 
-                    :disabled="isLoggingOut"
-                    class="logout-btn"
-                >
-                    <template v-if="isLoggingOut">
-                      <svg class="animate-spin h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
-                      </svg>
-                      <span>Logging out...</span>
-                    </template>
+        <button 
+            @click="logout" 
+            :disabled="isLoggingOut"
+            class="logout-btn"
+        >
+            <template v-if="isLoggingOut">
+              <svg class="animate-spin h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+              </svg>
+              <span>Logging out...</span>
+            </template>
 
-                    <template v-else>
-                      <span>Logout</span>
-                    </template>
-                </button>
-            </li>
-            
-            <li v-else>
-                <NuxtLink to="/login/auto">Login with Discord</NuxtLink>
-            </li>
-        </ul>
-    </nav>
+            <template v-else>
+              <span>Logout</span>
+            </template>
+        </button>
+    </li>
+
+    <li v-else>
+        <NuxtLink to="/login/auto">Login with Discord</NuxtLink>
+    </li>
+    </ul>
+  </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: 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 */
+}
+
+/* Styling for the logout button */
+.logout-btn {
+  font-size: 0.8rem;
+  color: grey;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* 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 */
+}
+
+.hamburger .bar {
+  width: 24px;
+  height: 3px;
+  background-color: currentColor;
+  border-radius: 2px;
+  transition: 0.3s ease;
+}
+
+/* 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;
   }
 
-  /* Set a fixed size for the profile image */
-  .profile-pic {
-    width: 24px; /* Shrinks to 24px */
-    height: 24px;
-    border-radius: 50%;
-    object-fit: cover; /* Ensures image maintains aspect ratio */
-    margin-right: 10px; /* Adds space between the image and other elements */
-  }
-  
-  /* Styling for the logout button */
-  .logout-btn {
-    font-size: 0.8rem;
-    color: var(--color-primary);
-    background: none;
-    border: none;
-    cursor: pointer;
-  }
-  
-  /* Optional: Adjust the layout if needed */
   .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;
-    list-style: none;
-    justify-content: space-between;
-    padding: 0;
   }
-  
-  .menu li {
-    padding: 0.5rem;
-  }
-  
-  .user-info {
-    display: flex;
-    align-items: center;
-  }
-</style>
\ No newline at end of file
+}
+</style>