From 0ee3fe6d21d49d43dd443ffba89d2b5b51eb6eea Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Wed, 4 Feb 2026 00:41:17 +0100
Subject: [PATCH] ui: responsive nav toggle

---
 frontend/src/layouts/Layout.astro       | 149 ++++++++++++++++++++--
 frontend/src/layouts/PublicLayout.astro | 157 ++++++++++++++++++++++--
 2 files changed, 284 insertions(+), 22 deletions(-)

diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 535dcb5..a4d8826 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -84,16 +84,28 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     <VotingIcons />
     <div class="app">
       <header class="header">
-        <nav class="nav">
+        <nav class="nav" id="site-nav">
           <a href="/" class="logo">Likwid</a>
-          <div class="nav-links">
-            <a href="/communities">Organizations</a>
-            <a href="/proposals">Proposals</a>
-            <a href="/about">About</a>
-          </div>
-          <div class="nav-auth" id="nav-auth">
-            <a href="/login">Login</a>
-            {!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
+          <button
+            class="nav-toggle"
+            id="nav-toggle"
+            type="button"
+            aria-label="Toggle navigation"
+            aria-expanded="false"
+            aria-controls="nav-menu"
+          >
+            <span class="nav-toggle-icon" aria-hidden="true"></span>
+          </button>
+          <div class="nav-menu" id="nav-menu">
+            <div class="nav-links">
+              <a href="/communities">Organizations</a>
+              <a href="/proposals">Proposals</a>
+              <a href="/about">About</a>
+            </div>
+            <div class="nav-auth" id="nav-auth">
+              <a href="/login">Login</a>
+              {!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
+            </div>
           </div>
         </nav>
       </header>
@@ -106,6 +118,35 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     </div>
     <script define:vars={{ apiBase }}>
 
+      const nav = document.getElementById('site-nav');
+      const navToggle = document.getElementById('nav-toggle');
+
+      function setNavOpen(open) {
+        if (!nav || !navToggle) return;
+        nav.classList.toggle('is-open', open);
+        navToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+      }
+
+      if (nav && navToggle) {
+        navToggle.addEventListener('click', () => {
+          setNavOpen(!nav.classList.contains('is-open'));
+        });
+
+        nav.querySelectorAll('a').forEach((link) => {
+          link.addEventListener('click', () => {
+            if (window.matchMedia('(max-width: 640px)').matches) {
+              setNavOpen(false);
+            }
+          });
+        });
+
+        window.addEventListener('resize', () => {
+          if (window.innerWidth > 640) {
+            setNavOpen(false);
+          }
+        });
+      }
+
       // Dynamic auth state in navigation
       const token = localStorage.getItem('token');
       const user = localStorage.getItem('user');
@@ -212,16 +253,86 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1.25rem;
   }
 
   @media (max-width: 640px) {
     .nav {
       flex-wrap: wrap;
-      justify-content: center;
+      justify-content: space-between;
       gap: 0.75rem;
     }
   }
 
+  .nav-menu {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+  }
+
+  .nav-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border);
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
+  }
+
+  .nav-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-border-hover);
+  }
+
+  .nav-toggle-icon,
+  .nav-toggle-icon::before,
+  .nav-toggle-icon::after {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+    transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
+  }
+
+  .nav-toggle-icon {
+    position: relative;
+  }
+
+  .nav-toggle-icon::before,
+  .nav-toggle-icon::after {
+    content: '';
+    position: absolute;
+    left: 0;
+  }
+
+  .nav-toggle-icon::before {
+    top: -6px;
+  }
+
+  .nav-toggle-icon::after {
+    top: 6px;
+  }
+
+  .nav.is-open .nav-toggle-icon {
+    background: transparent;
+  }
+
+  .nav.is-open .nav-toggle-icon::before {
+    top: 0;
+    transform: rotate(45deg);
+  }
+
+  .nav.is-open .nav-toggle-icon::after {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+
   .logo {
     font-size: 1.375rem;
     font-weight: 700;
@@ -239,6 +350,24 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
   }
 
   @media (max-width: 640px) {
+    .nav-toggle {
+      display: inline-flex;
+    }
+
+    .nav-menu {
+      display: none;
+      width: 100%;
+      flex-direction: column;
+      gap: 0.75rem;
+      padding-top: 0.75rem;
+      margin-top: 0.5rem;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .nav.is-open .nav-menu {
+      display: flex;
+    }
+
     .nav-links {
       width: 100%;
       justify-content: center;
diff --git a/frontend/src/layouts/PublicLayout.astro b/frontend/src/layouts/PublicLayout.astro
index 114be69..9ea961b 100644
--- a/frontend/src/layouts/PublicLayout.astro
+++ b/frontend/src/layouts/PublicLayout.astro
@@ -82,17 +82,29 @@ const defaultTheme = DEFAULT_THEME;
   <body>
     <div class="public-app">
       <header class="public-header">
-        <nav class="public-nav">
+        <nav class="public-nav" id="public-nav">
           <a href="/" class="logo">Likwid</a>
-          <div class="nav-links">
-            <a href="/about">About</a>
-            <a href="/features">Features</a>
-            <a href="/manifesto">Manifesto</a>
-            <a href="/docs">Documentation</a>
-          </div>
-          <div class="nav-actions">
-            <a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
-            {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
+          <button
+            class="nav-toggle"
+            id="public-nav-toggle"
+            type="button"
+            aria-label="Toggle navigation"
+            aria-expanded="false"
+            aria-controls="public-nav-menu"
+          >
+            <span class="nav-toggle-icon" aria-hidden="true"></span>
+          </button>
+          <div class="nav-menu" id="public-nav-menu">
+            <div class="nav-links">
+              <a href="/about">About</a>
+              <a href="/features">Features</a>
+              <a href="/manifesto">Manifesto</a>
+              <a href="/docs">Documentation</a>
+            </div>
+            <div class="nav-actions">
+              <a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
+              {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
+            </div>
           </div>
         </nav>
       </header>
@@ -136,6 +148,36 @@ const defaultTheme = DEFAULT_THEME;
         </div>
       </footer>
     </div>
+    <script>
+      const nav = document.getElementById('public-nav');
+      const toggle = document.getElementById('public-nav-toggle');
+
+      function setOpen(open) {
+        if (!nav || !toggle) return;
+        nav.classList.toggle('is-open', open);
+        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+      }
+
+      if (nav && toggle) {
+        toggle.addEventListener('click', () => {
+          setOpen(!nav.classList.contains('is-open'));
+        });
+
+        nav.querySelectorAll('a').forEach((link) => {
+          link.addEventListener('click', () => {
+            if (window.matchMedia('(max-width: 768px)').matches) {
+              setOpen(false);
+            }
+          });
+        });
+
+        window.addEventListener('resize', () => {
+          if (window.innerWidth > 768) {
+            setOpen(false);
+          }
+        });
+      }
+    </script>
   </body>
 </html>
 
@@ -168,6 +210,75 @@ const defaultTheme = DEFAULT_THEME;
     gap: 2rem;
   }
 
+  .nav-menu {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .nav-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border);
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
+  }
+
+  .nav-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-border-hover);
+  }
+
+  .nav-toggle-icon,
+  .nav-toggle-icon::before,
+  .nav-toggle-icon::after {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+    transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
+  }
+
+  .nav-toggle-icon {
+    position: relative;
+  }
+
+  .nav-toggle-icon::before,
+  .nav-toggle-icon::after {
+    content: '';
+    position: absolute;
+    left: 0;
+  }
+
+  .nav-toggle-icon::before {
+    top: -6px;
+  }
+
+  .nav-toggle-icon::after {
+    top: 6px;
+  }
+
+  .public-nav.is-open .nav-toggle-icon {
+    background: transparent;
+  }
+
+  .public-nav.is-open .nav-toggle-icon::before {
+    top: 0;
+    transform: rotate(45deg);
+  }
+
+  .public-nav.is-open .nav-toggle-icon::after {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+
   .logo {
     font-size: 1.375rem;
     font-weight: 700;
@@ -299,14 +410,36 @@ const defaultTheme = DEFAULT_THEME;
       padding: 1rem;
     }
 
-    .nav-links {
+    .nav-toggle {
+      display: inline-flex;
+    }
+
+    .nav-menu {
+      display: none;
       order: 3;
       width: 100%;
-      justify-content: center;
+      flex-direction: column;
+      align-items: center;
       gap: 1rem;
       padding-top: 1rem;
       border-top: 1px solid var(--color-border);
       margin-top: 1rem;
     }
+
+    .public-nav.is-open .nav-menu {
+      display: flex;
+    }
+
+    .nav-links {
+      width: 100%;
+      justify-content: center;
+      gap: 1rem;
+    }
+
+    .nav-actions {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
   }
 </style>