@rxova/astro-ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxova/astro-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Astro components, Starlight preset and shared chrome for rxova.org",
   "keywords": [
@@ -46,7 +46,7 @@
     }
   },
   "dependencies": {
-    "@rxova/brand": "^1.1.1",
+    "@rxova/brand": "^1.2.0",
     "lucide-static": "^1.45.0"
   },
   "devDependencies": {

package/src/components/SectionNav.astro

@@ -0,0 +1,26 @@
+---
+/**
+ * The umbrella navigation for a docs site: the project switcher, then the rxova.org sections.
+ * Starlight shows it in the header bar on wide screens and in the menu on phones.
+ */
+import { RXOVA_ORIGIN, SECTIONS, type ProjectId } from '@rxova/brand'
+import ProjectSwitcher from './ProjectSwitcher.astro'
+
+interface Props {
+  /** The project whose docs these are, marked in the switcher. */
+  current?: ProjectId
+  /** Prefix for the section links. '' links root-relative, for a build served on rxova.org. */
+  origin?: string
+}
+
+const { current, origin = RXOVA_ORIGIN } = Astro.props
+---
+
+<nav class="rx-sections" aria-label="rxova.org">
+  <ProjectSwitcher current={current} />
+  {SECTIONS.map((section) => (
+    <a class="rx-sections__link" href={`${origin}${section.path}`}>
+      {section.label}
+    </a>
+  ))}
+</nav>

package/src/components/SiteFooter.astro

@@ -3,7 +3,7 @@
  * The rxova footer on every surface: brand block, link columns, then copyright and legal links.
  * Styles live in `../styles/footer.css`. Hrefs are absolute unless `origin` is '' (on rxova.org).
  */
-import { PROJECTS, RXOVA_ORIGIN, getProject, type ProjectId } from '@rxova/brand'
+import { PROJECTS, RXOVA_ORIGIN, SECTIONS, getProject, type ProjectId } from '@rxova/brand'
 
 /** A standalone surface of rxova.org, for the "Site" column. */
 export interface SiteLink {
@@ -38,11 +38,8 @@ const year = new Date().getFullYear()
 const projectLinks: readonly SiteLink[] =
   projects ?? PROJECTS.map((p) => ({ label: p.label, href: `${origin}${p.mount}` }))
 
-const surfaces: readonly SiteLink[] = site ?? [
-  { label: 'Blog', href: `${origin}/blog/` },
-  { label: 'Updates', href: `${origin}/updates/` },
-  { label: 'About', href: `${origin}/about/` },
-]
+const surfaces: readonly SiteLink[] =
+  site ?? SECTIONS.map((section) => ({ label: section.label, href: `${origin}${section.path}` }))
 ---
 
 <footer class="rx-footer">

package/src/starlight/SocialIcons.astro

@@ -1,10 +1,10 @@
 ---
 /**
- * Starlight `SocialIcons` override: the stock icons plus the project switcher, which lands just
- * before search and the theme toggle.
+ * Starlight `SocialIcons` override: the umbrella navigation, then the stock icons. Starlight
+ * renders this slot in the header on wide screens and in the mobile menu, so one header serves both.
  */
 import Default from '@astrojs/starlight/components/SocialIcons.astro'
-import ProjectSwitcher from '../components/ProjectSwitcher.astro'
+import SectionNav from '../components/SectionNav.astro'
 import { projectFromBase } from '@rxova/brand'
 
 // Overrides receive no props, so the current project is inferred from the base
@@ -12,7 +12,7 @@ import { projectFromBase } from '@rxova/brand'
 const current = projectFromBase(import.meta.env.BASE_URL)
 ---
 
-<ProjectSwitcher current={current} />
+<SectionNav current={current} />
 <Default>
   <slot />
 </Default>

package/src/styles/starlight.css

@@ -157,6 +157,34 @@ html[data-rxova-shell] .sl-menu-button {
   background: var(--rx-gradient);
 }
 
+/* Umbrella navigation: the switcher and the rxova.org sections, beside the social icons. */
+.rx-sections {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.rx-sections__link {
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-sm);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.rx-sections__link:hover {
+  color: var(--sl-color-white);
+}
+
+/* In the mobile menu the icons share a row with the theme picker; the navigation takes a row
+   of its own above them. */
+.mobile-preferences .social-icons {
+  flex-wrap: wrap;
+}
+
+.mobile-preferences .rx-sections {
+  flex-basis: 100%;
+}
+
 /* --- Footer -------------------------------------------------------------- */
 
 /* Footer styles live in footer.css (imported above) because /blog and /updates need them too. */