Rework navigation menu.

astro.config.mjs

@@ -20,12 +20,11 @@ export default defineConfig({
 		}),
 		starlight({
 			components: {
+				Header: '~/components/Header.astro',
 				MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
 				PageFrame: '~/components/CustomPageFrame.astro',
 				Pagination: '~/components/Pagination.astro',
-				Sidebar: '~/components/Sidebar.astro',
-				// Sidebar: 'starlight-blog/overrides/Sidebar.astro',
-				ThemeSelect: '~/components/NavBar.astro'
+				Sidebar: '~/components/Sidebar.astro'
 			},
 			defaultLocale: 'root', // optional
 			locales: {
@@ -47,10 +46,6 @@ export default defineConfig({
 				twitter: 'https://twitter.com/Waterfoxproject'
 			},
 			sidebar: [
-				// {
-				// 	label: 'Blog',
-				// 	autogenerate: { directory: 'blog' }
-				// },
 				{
 					label: 'Policies',
 					autogenerate: { directory: 'docs/policies' }

src/assets/global.scss

@@ -19,19 +19,6 @@
         height: unset;
     }
 
-    .sidebar-pane {
-        background-color: unset;
-        border-inline-end: unset;
-    }
-
-
-    [data-has-sidebar]:not([data-has-sidebar=""]) header {
-        border-bottom: 1px solid transparent;
-        background-color: transparent;
-        -webkit-backdrop-filter: blur(16px);
-        backdrop-filter: blur(16px);
-    }
-
     @keyframes wobble {
         33% {
             transform: translateX(-50px);

src/components/Base.astro

@@ -1,13 +1,13 @@
 ---
-import Header from '@astrojs/starlight/components/Header.astro'
 import { twMerge } from 'tailwind-merge'
 import Footer from './Footer.astro'
+import Header from './Header.astro'
 ---
 
-<header class={twMerge('relative flex flex-col items-center bg-crystal dark:bg-deepsea')}>
+<header class={twMerge('relative flex flex-col items-center')}>
 	<!-- Top bar -->
 	<div
-		class="py-0.75 lg:py-0.75 z-20 grid h-16 w-full grid-cols-[auto] px-1 lg:z-20 lg:grid-cols-[auto] lg:px-1.5 xl:z-20"
+		class="z-20 grid h-16 w-full grid-cols-[auto] px-1 py-1 lg:z-20 lg:grid-cols-[auto] lg:px-1.5 lg:py-1 xl:z-20"
 	>
 		<Header slot="header" {...Astro.props}><slot /></Header>
 	</div>

src/components/CustomPageFrame.astro

@@ -1,8 +1,9 @@
 ---
-import Header from '@astrojs/starlight/components/Header.astro'
-import PageFrame from '@astrojs/starlight/components/PageFrame.astro'
 import type { Props } from '@astrojs/starlight/props'
+import { useTranslations } from 'node_modules/@astrojs/starlight/utils/translations'
+import Header from './Header.astro'
 
+import MobileMenuToggle from '@astrojs/starlight/components/MobileMenuToggle.astro'
 import DownloadsPage from './DownloadsPage.astro'
 import Footer from './Footer.astro'
 import Home from './Home.astro'
@@ -12,6 +13,8 @@ import Sidebar from './Sidebar.astro'
 const isHomepage = Astro.props.slug === ''
 const isDownloads = Astro.props.slug === 'downloads'
 
+const { hasSidebar, locale } = Astro.props
+const t = useTranslations(locale)
 // If we are, render a custom component
 // If not, render the default page frame
 ---
@@ -23,23 +26,90 @@ const isDownloads = Astro.props.slug === 'downloads'
 		<DownloadsPage {...Astro.props} />
 	) : (
 		<>
-			<PageFrame {...Astro.props}>
-				<Header slot="header" {...Astro.props} />
-				<Sidebar slot="sidebar" {...Astro.props} />
-				<slot />
-			</PageFrame>
+			<div class="page sl-flex">
+				<header class="header grid h-16 w-full grid-cols-[auto] px-1 py-1 lg:grid-cols-[auto] lg:px-1.5 lg:py-1">
+					<Header slot="header" {...Astro.props} />
+				</header>
+				{hasSidebar && (
+					<nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
+						<MobileMenuToggle {...Astro.props} />
+						<div id="starlight__sidebar" class="sidebar-pane">
+							<div class="sidebar-content sl-flex">
+								<Sidebar slot="sidebar" {...Astro.props} />
+							</div>
+						</div>
+					</nav>
+				)}
+				<div class="main-frame">
+					<slot />
+				</div>
+			</div>
 			<Footer class="relative z-10" />
 		</>
 	)
 }
 
 <style>
-	.sidebar-pane {
-		background-color: unset;
-		border-inline-end: unset;
+	.page {
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	.header {
+		z-index: var(--sl-z-index-navbar);
+		position: fixed;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		width: 100%;
+		height: var(--sl-nav-height);
+		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+		padding-inline-end: var(--sl-nav-pad-x);
 	}
 
 	.right-sidebar {
 		border-inline-start: unset;
 	}
+
+	.sidebar-pane {
+		visibility: var(--sl-sidebar-visibility, hidden);
+		position: fixed;
+		z-index: var(--sl-z-index-menu);
+		inset-block: 0;
+		inset-inline-start: 0;
+		padding-top: var(--sl-nav-height);
+		width: 100%;
+		background-color: var(--sl-color-black);
+		overflow-y: auto;
+	}
+
+	:global([aria-expanded='true']) ~ .sidebar-pane {
+		--sl-sidebar-visibility: visible;
+	}
+
+	.sidebar-content {
+		height: 100%;
+		min-height: max-content;
+		padding: 1rem var(--sl-sidebar-pad-x) 0;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	@media (min-width: 50rem) {
+		.sidebar-content::after {
+			content: '';
+			padding-bottom: 1px;
+		}
+	}
+
+	.main-frame {
+		padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+		padding-inline-start: var(--sl-content-inline-start);
+	}
+
+	@media (min-width: 50rem) {
+		.sidebar-pane {
+			--sl-sidebar-visibility: visible;
+			width: var(--sl-sidebar-width);
+		}
+	}
 </style>

src/components/Header.astro

@@ -0,0 +1,82 @@
+---
+import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro'
+import Search from '@astrojs/starlight/components/Search.astro'
+import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro'
+import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro'
+import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
+import type { Props } from '@astrojs/starlight/props'
+import Nav from './Nav.astro'
+---
+
+<div class="header sl-flex">
+	<div class="sl-flex">
+		<SiteTitle {...Astro.props} />
+	</div>
+	<div class="sl-flex">
+		<Search {...Astro.props} />
+	</div>
+	<div class="sl-hidden md:sl-flex right-group">
+		<Nav {...Astro.props} />
+		<div class="sl-flex social-icons">
+			<SocialIcons {...Astro.props} />
+		</div>
+		<ThemeSelect {...Astro.props} />
+		<LanguageSelect {...Astro.props} />
+	</div>
+</div>
+
+<style>
+	.header {
+		gap: var(--sl-nav-gap);
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+	}
+
+	.right-group,
+	.social-icons {
+		gap: 1rem;
+		align-items: center;
+	}
+	.social-icons::after {
+		content: '';
+		height: 2rem;
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
+	.social-icons::before {
+		content: '';
+		height: 2rem;
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
+
+	@media (min-width: 50rem) {
+		:global(:root[data-has-sidebar]) {
+			--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+		}
+		:global(:root:not([data-has-toc])) {
+			--__toc-width: 0rem;
+		}
+		.header {
+			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__main-column-fr: calc(
+				(
+						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+							(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+							var(--sl-content-width)
+					) / 2
+			);
+			display: grid;
+			grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+				minmax(
+					calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+					auto
+				)
+				/* 2 (search box): all free space that is available. */
+				1fr
+				/* 3 (right items): use the space that these need. */
+				auto;
+			align-content: center;
+		}
+	}
+</style>

src/components/Home.astro

@@ -18,7 +18,7 @@ import { strings, type Key } from '~/strings'
 		class="mt-4 flex w-full flex-col items-center gap-8 overflow-hidden px-6 lg:mt-20 lg:gap-12 lg:pb-48"
 	>
 		<!-- Background Water -->
-		<Water class="z-0" bubbleQty={12} />
+		<Water class="z-0 bg-crystal dark:bg-deepsea" bubbleQty={12} />
 
 		<!-- Heading -->
 		<div

src/components/Nav.astro

@@ -0,0 +1,20 @@
+---
+import { headerNavigation } from '~/config'
+---
+
+<nav class="tailwind-preflight">
+	{
+		headerNavigation.map(({ href, label }) => (
+			<a {href}>
+				<h4>{label}</h4>
+			</a>
+		))
+	}
+</nav>
+
+<style>
+	nav {
+		display: flex;
+		gap: 1rem;
+	}
+</style>

src/config.ts

@@ -17,6 +17,22 @@ const footerNavigation = [
 	}
 ]
 
+// header nav
+const headerNavigation = [
+	{
+		label: 'Blog',
+		href: '/blog/'
+	},
+	{
+		label: 'Docs',
+		href: '/docs/'
+	},
+	{
+		label: 'Downloads',
+		href: '/downloads/'
+	}
+]
+
 // policies nav (also in footer)
 const policiesNavigation = [
 	{
@@ -47,4 +63,4 @@ const latestLinks = {
 	linux: () => `https://cdn1.waterfox.net/waterfox/releases/latest/linux`
 }
 
-export { downloadLinks, footerNavigation, latestLinks, policiesNavigation }
+export { downloadLinks, footerNavigation, headerNavigation, latestLinks, policiesNavigation }