ci: fix build checks and mobile nav

6 files changed, 150 insertions, 3 deletions

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 6adb9e5b..badd2873 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -125,6 +125,13 @@ export default defineConfig({
             { label: 'Agent skill file', slug: 'docs/agent-skill' },
           ],
         },
+        {
+          label: 'Updates',
+          items: [
+            { label: 'Releases', link: '/releases/' },
+            { label: 'Blog', link: '/blog/' },
+          ],
+        },
       ],
     }),
   ],
diff --git a/website/css/style.css b/website/css/style.css
index fcadb011..74be689f 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -433,6 +433,82 @@ samp {
     font-family: var(--mono);
 }
 
+.nav-menu {
+    position: relative;
+    display: none;
+    margin-left: auto;
+}
+
+.nav-menu-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.22rem;
+    width: 2.1rem;
+    height: 2.1rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    color: var(--ink-soft);
+    cursor: pointer;
+    list-style: none;
+    transition:
+        color 120ms ease,
+        border-color 120ms ease,
+        background 120ms ease;
+}
+
+.nav-menu-button::-webkit-details-marker {
+    display: none;
+}
+
+.nav-menu-button::marker {
+    content: "";
+}
+
+.nav-menu-button span {
+    display: block;
+    width: 0.92rem;
+    height: 1px;
+    background: currentColor;
+}
+
+.nav-menu-button:hover,
+.nav-menu[open] .nav-menu-button {
+    color: var(--accent);
+    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
+    background: var(--accent-soft);
+}
+
+.nav-menu-panel {
+    position: absolute;
+    top: calc(100% + 0.65rem);
+    right: 0;
+    z-index: 30;
+    display: grid;
+    min-width: min(18rem, calc(100vw - 2rem));
+    padding: 0.35rem;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
+    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
+}
+
+.nav-menu-panel a {
+    border-radius: var(--radius-sm);
+    padding: 0.62rem 0.7rem;
+    color: var(--ink-soft);
+    font-family: var(--mono);
+    font-size: 0.86rem;
+    font-weight: 600;
+}
+
+.nav-menu-panel a:hover,
+.nav-menu-panel a[aria-current="page"] {
+    background: var(--accent-soft);
+    color: var(--accent);
+}
+
 .nav-links a,
 .footer a,
 .inline-links a {
@@ -2462,10 +2538,18 @@ td:last-child {
         padding-inline: 1rem;
     }
 
+    .nav-menu {
+        display: block;
+    }
+
     .nav-links {
         display: none;
     }
 
+    .nav-tools {
+        display: none;
+    }
+
     .section,
     .awareness-section,
     .demo-section,
diff --git a/website/index.html b/website/index.html
index a844442d..1de94a14 100644
--- a/website/index.html
+++ b/website/index.html
@@ -57,7 +57,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=20" />
+        <link rel="stylesheet" href="/css/style.css?v=21" />
     </head>
     <body>
         <header class="site-header">
@@ -66,6 +66,24 @@
                     <span class="brand-logo" aria-hidden="true"></span>
                     <span>herdr</span>
                 </a>
+                <details class="nav-menu">
+                    <summary class="nav-menu-button" aria-label="Open navigation">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </summary>
+                    <div class="nav-menu-panel">
+                        <a href="/">Home</a>
+                        <a href="/compare/">Compare</a>
+                        <a href="/releases/">Releases</a>
+                        <a href="/blog/">Blog</a>
+                        <a href="/docs/quick-start/">Quick start</a>
+                        <a href="/docs/">Docs</a>
+                        <a href="/docs/socket-api/">API</a>
+                        <a href="/docs/install/">Install</a>
+                        <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
+                    </div>
+                </details>
                 <div class="nav-links">
                     <a href="/">Home</a>
                     <a href="/compare/">Compare</a>
diff --git a/website/src/components/MarketingLayout.astro b/website/src/components/MarketingLayout.astro
index 5e39e011..9ecd7ac3 100644
--- a/website/src/components/MarketingLayout.astro
+++ b/website/src/components/MarketingLayout.astro
@@ -48,7 +48,7 @@ const canonicalUrl = new URL(canonicalPath, 'https://herdr.dev').toString();
         document.documentElement.setAttribute("data-palette", saved || system);
       })();
     </script>
-    <link rel="stylesheet" href="/css/style.css" />
+    <link rel="stylesheet" href="/css/style.css?v=21" />
   </head>
   <body>
     <header class="site-header">
@@ -57,6 +57,24 @@ const canonicalUrl = new URL(canonicalPath, 'https://herdr.dev').toString();
           <span class="brand-logo" aria-hidden="true"></span>
           <span>herdr</span>
         </a>
+        <details class="nav-menu">
+          <summary class="nav-menu-button" aria-label="Open navigation">
+            <span></span>
+            <span></span>
+            <span></span>
+          </summary>
+          <div class="nav-menu-panel">
+            <a href="/">Home</a>
+            <a href="/compare/">Compare</a>
+            <a href="/releases/">Releases</a>
+            <a href="/blog/">Blog</a>
+            <a href="/docs/quick-start/">Quick start</a>
+            <a href="/docs/">Docs</a>
+            <a href="/docs/socket-api/">API</a>
+            <a href="/docs/install/">Install</a>
+            <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
+          </div>
+        </details>
         <div class="nav-links">
           <a href="/">Home</a>
           <a href="/compare/">Compare</a>
diff --git a/website/src/components/SiteTitle.astro b/website/src/components/SiteTitle.astro
index ee979e9d..1173f2b6 100644
--- a/website/src/components/SiteTitle.astro
+++ b/website/src/components/SiteTitle.astro
@@ -9,6 +9,8 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
   </a>
   <nav class="title-nav" aria-label="Primary">
     <a href="/docs/">Docs</a>
+    <a href="/releases/">Releases</a>
+    <a href="/blog/">Blog</a>
   </nav>
 </div>
 
diff --git a/website/src/pages/compare.astro b/website/src/pages/compare.astro
index 0c173f6f..96f1a7ee 100644
--- a/website/src/pages/compare.astro
+++ b/website/src/pages/compare.astro
@@ -45,7 +45,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=compare2" />
+        <link rel="stylesheet" href="/css/style.css?v=21" />
     </head>
     <body>
         <header class="site-header">
@@ -54,6 +54,24 @@
                     <span class="brand-logo" aria-hidden="true"></span>
                     <span>herdr</span>
                 </a>
+                <details class="nav-menu">
+                    <summary class="nav-menu-button" aria-label="Open navigation">
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </summary>
+                    <div class="nav-menu-panel">
+                        <a href="/">Home</a>
+                        <a href="/compare/" aria-current="page">Compare</a>
+                        <a href="/releases/">Releases</a>
+                        <a href="/blog/">Blog</a>
+                        <a href="/docs/quick-start/">Quick start</a>
+                        <a href="/docs/">Docs</a>
+                        <a href="/docs/socket-api/">API</a>
+                        <a href="/docs/install/">Install</a>
+                        <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
+                    </div>
+                </details>
                 <div class="nav-links">
                     <a href="/">Home</a>
                     <a href="/compare/" aria-current="page">Compare</a>