From c8d9636040641d9ffb2f67b152f2f1660494886d Mon Sep 17 00:00:00 2001
From: Alex Kontos <MrAlex94@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:13:42 +0100
Subject: [PATCH] Improve NavBar support.

---
 astro.config.mjs            |  4 ++--
 src/components/Base.astro   |  9 +++++++--
 src/components/NavBar.astro | 25 +++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/components/NavBar.astro

diff --git a/astro.config.mjs b/astro.config.mjs
index df1cd7e..5bc334f 100644
--- 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
index 6aa3fb1..9a4e00c 100644
--- 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
new file mode 100644
index 0000000..f1690b7
--- /dev/null
+++ 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>