Merge pull request #36 from mobiera/fix/nav-breakpoints

fix(nav): hide the hamburger on desktop and the Contact button on phones

Author: mjfelis

app/components/Nav.tsx

@@ -59,14 +59,14 @@ export default function Nav() {
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>
             )}
           </button>
-          <Link href="/contact" className="btn btn-primary hidden sm:inline-flex">Contact</Link>
-          <button type="button" className="menu-btn md:hidden" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+          <Link href="/contact" className="btn btn-primary nav-contact">Contact</Link>
+          <button type="button" className="menu-btn" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d={open ? "M4 4l12 12M16 4L4 16" : "M3 6h14M3 10h14M3 14h14"} /></svg>
           </button>
         </div>
       </div>
       {mounted && open && (
-        <div className="mobile-menu md:hidden">
+        <div className="mobile-menu">
           <nav className="container-x" aria-label="Mobile">
             {NAV.map((l) => (
               <Link key={l.href} href={l.href} className={isActive(l.href) ? "active" : undefined}>

app/globals.css

@@ -156,6 +156,11 @@ a { color: inherit; }
   border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer;
 }
 .theme-toggle:hover, .menu-btn:hover { color: var(--ink); border-color: var(--violet); }
+/* Breakpoints live here, not in Tailwind utilities: these component rules are
+   unlayered, so a utility like md:hidden would lose to them. */
+.nav-contact { display: none; }
+@media (min-width: 640px) { .nav-contact { display: inline-flex; } }
+@media (min-width: 768px) { .menu-btn, .mobile-menu { display: none; } }
 .mobile-menu { border-top: 1px solid var(--rule); background: var(--bg); }
 .mobile-menu nav { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; padding-bottom: 18px; }
 .mobile-menu nav a { padding: 8px 0; font-weight: 600; }