rc 1.0

app/components/Nav.tsx

@@ -13,6 +13,7 @@ export default function Nav() {
   const [user, setUser] = useState<User | null>(null)
   const [showAuthModal, setShowAuthModal] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   useEffect(() => {
     checkAuth()
@@ -54,15 +55,26 @@ export default function Nav() {
   return (
     <>
       <nav>
-        <div className="brand">
-          <a href="/" style={{ display: 'inline-block', textDecoration: 'none' }}>
-            <img src="/header.jpg" alt="420Deals.ch" style={{ height: '40px', width: 'auto' }} />
-          </a>
-        </div>
-        <div className="links">
-          <a href="#drop">Drop</a>
-          <a href="#past">Past Drops</a>
-          <a href="#community">Community</a>
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <div className="brand">
+              <a href="/" style={{ display: 'inline-block', textDecoration: 'none' }}>
+                <img src="/header.jpg" alt="420Deals.ch" style={{ height: '40px', width: 'auto' }} />
+              </a>
+            </div>
+            <button
+              className="mobile-menu-toggle"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label="Toggle menu"
+            >
+              <span style={{ display: mobileMenuOpen ? 'none' : 'block' }}>☰</span>
+              <span style={{ display: mobileMenuOpen ? 'block' : 'none' }}>✕</span>
+            </button>
+          </div>
+          <div className={`links ${mobileMenuOpen ? 'mobile-open' : ''}`}>
+          <a href="#drop" onClick={() => setMobileMenuOpen(false)}>Drop</a>
+          <a href="#past" onClick={() => setMobileMenuOpen(false)}>Past Drops</a>
+          <a href="#community" onClick={() => setMobileMenuOpen(false)}>Community</a>
           {!loading && (
             user ? (
               <>
@@ -71,6 +83,7 @@ export default function Nav() {
                 </span>
                 <a
                   href="/orders"
+                  onClick={() => setMobileMenuOpen(false)}
                   style={{
                     background: 'transparent',
                     border: '1px solid var(--border)',
@@ -89,7 +102,10 @@ export default function Nav() {
                   Orders
                 </a>
                 <button
-                  onClick={handleLogout}
+                  onClick={() => {
+                    handleLogout()
+                    setMobileMenuOpen(false)
+                  }}
                   style={{
                     background: 'transparent',
                     border: '1px solid #e57373',
@@ -109,7 +125,10 @@ export default function Nav() {
               </>
             ) : (
               <button
-                onClick={() => setShowAuthModal(true)}
+                onClick={() => {
+                  setShowAuthModal(true)
+                  setMobileMenuOpen(false)
+                }}
                 style={{
                   padding: '8px 16px',
                   fontSize: '14px',
@@ -129,6 +148,7 @@ export default function Nav() {
               </button>
             )
           )}
+          </div>
         </div>
       </nav>