Show product navigation in the mobile sidebar (#539)

Show product navigation in the mobile sidebar (gitea/docs#539)

sites/docs/astro.config.mjs

@@ -126,6 +126,7 @@ export default defineConfig({
         Header: './src/components/Header.astro',
         LanguageSelect: './src/components/LanguageSelect.astro',
         MarkdownContent: './src/components/MarkdownContent.astro',
+        Sidebar: './src/components/Sidebar.astro',
         SiteTitle: './src/components/SiteTitle.astro',
         PageFrame: './src/components/PageFrame.astro',
       },

sites/docs/src/components/ProductNav.astro

@@ -0,0 +1,78 @@
+---
+import { t } from '../config/strings';
+import { productNav } from '../lib/versions';
+
+interface Props {
+  variant: 'header' | 'sidebar';
+}
+
+const meta = Astro.locals.starlightRoute.entry.data.gitea;
+const strings = t(meta?.locale ?? 'en-us');
+const products = productNav(meta);
+const { variant } = Astro.props;
+---
+
+<nav class:list={['gitea-product-nav', `gitea-product-nav-${variant}`]} aria-label="Products">
+  {
+    products.map((product) => (
+      <a href={product.href} aria-current={product.current ? 'page' : undefined}>
+        {strings.products[product.id] ?? product.label}
+      </a>
+    ))
+  }
+</nav>
+
+<style>
+  .gitea-product-nav a {
+    color: var(--sl-color-gray-2);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .gitea-product-nav a:hover {
+    color: var(--sl-color-white);
+  }
+
+  .gitea-product-nav-header {
+    display: none;
+    gap: 0.75rem;
+    font-size: var(--sl-text-sm);
+  }
+
+  .gitea-product-nav-header a[aria-current='page'] {
+    color: var(--sl-color-white);
+    font-weight: 600;
+  }
+
+  .gitea-product-nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--sl-color-hairline-light);
+  }
+
+  .gitea-product-nav-sidebar a {
+    display: block;
+    border-radius: 0.25rem;
+    padding: 0.3em 0.5rem;
+    font-size: var(--sl-text-sm);
+    line-height: 1.4;
+  }
+
+  .gitea-product-nav-sidebar a[aria-current='page'] {
+    color: var(--sl-color-text-invert);
+    background-color: var(--sl-color-text-accent);
+    font-weight: 600;
+  }
+
+  @media (min-width: 72rem) {
+    .gitea-product-nav-header {
+      display: flex;
+    }
+
+    .gitea-product-nav-sidebar {
+      display: none;
+    }
+  }
+</style>

sites/docs/src/components/Sidebar.astro

@@ -0,0 +1,13 @@
+---
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+import ProductNav from './ProductNav.astro';
+
+/**
+ * The product navigation is hidden from the header until the 72rem layout
+ * breakpoint, so it is rendered at the top of the sidebar for the layouts in
+ * between (and for the mobile menu below 50rem).
+ */
+---
+
+<ProductNav variant="sidebar" />
+<Default />

sites/docs/src/components/SiteTitle.astro

@@ -1,29 +1,17 @@
 ---
 import Default from '@astrojs/starlight/components/SiteTitle.astro';
-import { t } from '../config/strings';
-import { productNav } from '../lib/versions';
+import ProductNav from './ProductNav.astro';
 
 /**
  * The starlight header has no navigation links, the gitea site needs the four
  * products next to the logo. Rendered next to the site title so the rest of the
  * header (search, theme, pickers) keeps working untouched.
  */
-const meta = Astro.locals.starlightRoute.entry.data.gitea;
-const strings = t(meta?.locale ?? 'en-us');
-const products = productNav(meta);
 ---
 
 <div class="gitea-site-title">
   <Default><slot /></Default>
-  <nav class="gitea-nav" aria-label="Products">
-    {
-      products.map((product) => (
-        <a href={product.href} class:list={[{ current: product.current }]}>
-          {strings.products[product.id] ?? product.label}
-        </a>
-      ))
-    }
-  </nav>
+  <ProductNav variant="header" />
 </div>
 
 <style>
@@ -33,26 +21,4 @@ const products = productNav(meta);
     gap: 1rem;
     overflow: hidden;
   }
-  .gitea-nav {
-    display: none;
-    gap: 0.75rem;
-    font-size: var(--sl-text-sm);
-  }
-  .gitea-nav a {
-    color: var(--sl-color-gray-2);
-    text-decoration: none;
-    white-space: nowrap;
-  }
-  .gitea-nav a:hover,
-  .gitea-nav a.current {
-    color: var(--sl-color-white);
-  }
-  .gitea-nav a.current {
-    font-weight: 600;
-  }
-  @media (min-width: 72rem) {
-    .gitea-nav {
-      display: flex;
-    }
-  }
 </style>