From 28295762d894fd0fce51c8d663bea0bac06f4a51 Mon Sep 17 00:00:00 2001
From: m3rchant-man <noahporter86@gmail.com>
Date: Tue, 11 Nov 2025 19:06:14 -0500
Subject: [PATCH 1/2] Added  animations to mobile nav bar

---
 app/components/Headbar.tsx | 41 +++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/components/Headbar.tsx b/app/components/Headbar.tsx
index d6090aa..bab74cd 100644
--- a/app/components/Headbar.tsx
+++ b/app/components/Headbar.tsx
@@ -39,10 +39,9 @@ export default function Headbar() {
             href="https://discord.gg/f6DGjvTWYT"
             target="_blank"
             rel="noopener noreferrer"
+            className="font-bold text-sm tracking-wider text-stone-200 transition-colors hover:text-cyan-400"
           >
-            <button className="px-4 py-2 bg-cyan-800 font-bold hover:bg-cyan-400 transition-all duration-300 hover:text-stone-800 rounded-lg">
-              DISCORD
-            </button>
+            DISCORD
           </a>
         </div>
       </div>
@@ -58,7 +57,7 @@ export default function Headbar() {
         />
         <button
           onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          className="p-2 text-stone-200 hover:text-cyan-400 transition-colors"
+          className="p-2 text-stone-200 transition-colors hover:text-cyan-400"
           aria-label="Toggle menu"
         >
           <svg
@@ -82,14 +81,25 @@ export default function Headbar() {
       </div>
 
       {/* Mobile Navigation Menu */}
-      {mobileMenuOpen && (
-        <nav className="xl:hidden bg-stone-900 border-t border-stone-700">
-          <ul className="flex flex-col gap-2 p-4 font-bold text-sm tracking-wider text-stone-200">
+      <nav
+        id="mobile-navigation"
+        className={`xl:hidden flex flex-col overflow-hidden border-t border-stone-700 bg-stone-900 shadow-lg shadow-stone-950/40 transition-[max-height,opacity] duration-300 ease-out ${
+          mobileMenuOpen
+            ? "pointer-events-auto max-h-96 opacity-100"
+            : "pointer-events-none max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-4 pb-4">
+          <ul
+            className={`flex flex-col gap-2 pt-4 font-bold text-sm tracking-wider text-stone-200 transition-transform duration-300 ease-out ${
+              mobileMenuOpen ? "translate-y-0" : "-translate-y-16"
+            }`}
+          >
             <li>
               <Link
                 href="/"
                 onClick={() => setMobileMenuOpen(false)}
-                className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 GAME*
               </Link>
@@ -98,7 +108,7 @@ export default function Headbar() {
               <Link
                 href="/patch_notes"
                 onClick={() => setMobileMenuOpen(false)}
-                className="block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 PATCH NOTES*
               </Link>
@@ -107,26 +117,25 @@ export default function Headbar() {
               <Link
                 href="/dev_blog"
                 onClick={() => setMobileMenuOpen(false)}
-                className="dev-blog-transition block py-2 px-4 hover:bg-stone-800 rounded transition-colors"
+                className="dev-blog-transition block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
                 DEV BLOG
               </Link>
             </li>
-            <li className="pt-2 border-t border-stone-700">
+            <li>
               <a
                 href="https://discord.gg/f6DGjvTWYT"
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => setMobileMenuOpen(false)}
+                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
-                <button className="w-full px-4 py-2 bg-cyan-800 font-bold hover:bg-cyan-400 transition-all duration-300 hover:text-stone-800 rounded-lg">
-                  DISCORD
-                </button>
+                DISCORD
               </a>
             </li>
           </ul>
-        </nav>
-      )}
+        </div>
+      </nav>
     </div>
   );
 }

From 2a2d404e22d0a103cd4df752f9935cd45f5c67c5 Mon Sep 17 00:00:00 2001
From: m3rchant-man <noahporter86@gmail.com>
Date: Tue, 11 Nov 2025 19:38:22 -0500
Subject: [PATCH 2/2] Fixing parity issue with mobile/desktop discord button

---
 app/components/Headbar.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/Headbar.tsx b/app/components/Headbar.tsx
index bab74cd..63c9d96 100644
--- a/app/components/Headbar.tsx
+++ b/app/components/Headbar.tsx
@@ -39,9 +39,10 @@ export default function Headbar() {
             href="https://discord.gg/f6DGjvTWYT"
             target="_blank"
             rel="noopener noreferrer"
-            className="font-bold text-sm tracking-wider text-stone-200 transition-colors hover:text-cyan-400"
           >
-            DISCORD
+            <button className="px-4 py-2 bg-cyan-800 font-bold hover:bg-cyan-400 transition-all duration-300 hover:text-stone-800 rounded-lg">
+              DISCORD
+            </button>
           </a>
         </div>
       </div>
@@ -128,9 +129,10 @@ export default function Headbar() {
                 target="_blank"
                 rel="noopener noreferrer"
                 onClick={() => setMobileMenuOpen(false)}
-                className="block rounded px-4 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:bg-stone-800"
               >
-                DISCORD
+                <button className="w-full rounded-lg bg-cyan-800 px-4 py-2 font-bold transition-all duration-300 hover:bg-cyan-400 hover:text-stone-800">
+                  DISCORD
+                </button>
               </a>
             </li>
           </ul>