Improve NavBar support.

BrowserWorks · Oct 25, 2023 · c8d9636 · c8d9636
1 parent 2ff24be
commit c8d9636
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -23,7 +23,7 @@ export default defineConfig({
 				MarkdownContent: 'starlight-blog/overrides/MarkdownContent.astro',
 				PageFrame: '~/components/CustomPageFrame.astro',
 				Sidebar: 'starlight-blog/overrides/Sidebar.astro',
-				ThemeSelect: 'starlight-blog/overrides/ThemeSelect.astro'
+				ThemeSelect: '~/components/NavBar.astro'
 			},
 			title: 'Waterfox',
 			logo: {
@@ -32,7 +32,7 @@ export default defineConfig({
 			},
 			social: {
 				github: 'https://github.com/WaterfoxCo/Waterfox',
-				mastodon: 'https://mastodon.social/home',
+				mastodon: 'https://mastodon.social/@Waterfox',
 				twitter: 'https://twitter.com/Waterfoxproject'
 			},
 			sidebar: [

diff --git a/src/components/Base.astro b/src/components/Base.astro
@@ -12,10 +12,15 @@ const { bgColor } = Astro.props
 ---
 
 <header
-	class={twMerge('relative flex flex-col items-center', bgColor === 'crystal' && 'bg-crystal')}
+	class={twMerge(
+		'tailwind-preflight relative flex flex-col items-center',
+		bgColor === 'crystal' && 'bg-crystal'
+	)}
 >
 	<!-- Top bar -->
-	<div class="grid w-full grid-cols-[auto] px-4 py-8 lg:grid-cols-[auto] lg:px-10 lg:py-10 xl:z-10">
+	<div
+		class="z-10 grid w-full grid-cols-[auto] px-4 py-8 lg:z-10 lg:grid-cols-[auto] lg:px-10 lg:py-10 xl:z-10"
+	>
 		<Header slot="header" {...Astro.props}><slot /></Header>
 	</div>
 

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -0,0 +1,25 @@
+---
+import StarlightThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro'
+import type { Props } from '@astrojs/starlight/props'
+import BlogConfig from 'virtual:starlight-blog-config'
+---
+
+<div
+	class="tailwind-preflight font-regular flex items-center gap-2 font-montserrat max-xl:hidden max-xl:overflow-y-scroll xl:items-center"
+>
+	<a href="/downloads">Downloads</a>
+	<a href="/blog">{BlogConfig.title}</a>
+</div>
+
+<StarlightThemeSelect {...Astro.props}>
+	<slot />
+</StarlightThemeSelect>
+
+<style>
+	div {
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+		display: none;
+		height: 2rem;
+		padding-inline-end: 1rem;
+	}
+</style>