feat(ui): add navigation to header

Readme.md

@@ -10,6 +10,9 @@ A custom Astro.js template
 - 🐳 Docker integration
 - 🍃 Tailwind CSS
 - 🖊️ MDX Blog
+- ⚛️ React.js
+- 🏔️ Alpine.js integration
+- 📘 TypeScript
 
 ## How to use this template
 
@@ -69,6 +72,7 @@ All commands are run from the root of the project, from a terminal:
 
 - [Astro.js Basic Example](https://github.com/withastro/astro/tree/main/examples/basics)
 - [Astro.js Docs](https://docs.astro.build/)
+- [Astro Starter Kit](https://github.com/zankhq/astro-starter)
 - [Docker](https://www.docker.com/)
 - [Material-Tailwind](https://www.material-tailwind.com/)
 - [nginx](https://www.nginx.com/)

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'astro/config';
+import alpinejs from '@astrojs/alpinejs';
 import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
@@ -10,6 +11,7 @@ const SITE_URL = process.env.SITE_URL || 'https://astro.deployn.de';
 export default defineConfig({
 	site: SITE_URL,
 	integrations: [
+		alpinejs(),
 		icon(),
 		mdx(),
 		react(),

package.json

@@ -16,6 +16,7 @@
     "commit": "cz"
   },
   "dependencies": {
+    "@astrojs/alpinejs": "^0.4.0",
     "@astrojs/check": "^0.5.6",
     "@astrojs/mdx": "^2.1.1",
     "@astrojs/react": "^3.0.10",
@@ -34,9 +35,11 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@tailwindcss/typography": "^0.5.10",
+    "@types/alpinejs": "^3.13.6",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@vite-pwa/assets-generator": "^0.2.4",
+    "alpinejs": "^3.13.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "commitizen": "^4.3.0",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@astrojs/alpinejs':
+    specifier: ^0.4.0
+    version: 0.4.0(@types/alpinejs@3.13.6)(alpinejs@3.13.5)
   '@astrojs/check':
     specifier: ^0.5.6
     version: 0.5.6(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.3.3)
@@ -26,6 +29,12 @@ dependencies:
   '@radix-ui/react-slot':
     specifier: ^1.0.2
     version: 1.0.2(@types/react@18.2.61)(react@18.2.0)
+  '@types/alpinejs':
+    specifier: ^3.13.6
+    version: 3.13.6
+  alpinejs:
+    specifier: ^3.13.5
+    version: 3.13.5
   astro:
     specifier: ^4.4.6
     version: 4.4.6(@types/node@20.11.24)(typescript@5.3.3)
@@ -140,6 +149,16 @@ packages:
   /@antfu/utils@0.7.7:
     resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
 
+  /@astrojs/alpinejs@0.4.0(@types/alpinejs@3.13.6)(alpinejs@3.13.5):
+    resolution: {integrity: sha512-68BY1CA0XuielLW3WdX2sfh9F4sSTnFqQ//IE9AditbiYJ77HJDb4uZx07pTFDtr1jOMU7lCvH+iS9gmNafM1g==}
+    peerDependencies:
+      '@types/alpinejs': ^3.0.0
+      alpinejs: ^3.0.0
+    dependencies:
+      '@types/alpinejs': 3.13.6
+      alpinejs: 3.13.5
+    dev: false
+
   /@astrojs/check@0.5.6(prettier-plugin-astro@0.13.0)(prettier@3.2.5)(typescript@5.3.3):
     resolution: {integrity: sha512-i7j5ogoSg/Bu2NV5zVvwCo9R4kGWXWsJDejxpCu9F7iNNlR333u8EwpP4bpeKASDtjOA1rXKo9ogUTEVlIAHqA==}
     hasBin: true
@@ -2313,6 +2332,10 @@ packages:
       '@types/estree': 1.0.5
     dev: false
 
+  /@types/alpinejs@3.13.6:
+    resolution: {integrity: sha512-BMi1/2uQz7mp30VFn69SzjN7YwQ0QzE4Hn3RMBt4iMpQeasdbMiImv1f5yvK1bYmvjIyG/YFg+CgPxbjIXZk0g==}
+    dev: false
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
@@ -2585,6 +2608,16 @@ packages:
     resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
     dev: false
 
+  /@vue/reactivity@3.1.5:
+    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
+    dependencies:
+      '@vue/shared': 3.1.5
+    dev: false
+
+  /@vue/shared@3.1.5:
+    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
+    dev: false
+
   /JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -2654,6 +2687,12 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /alpinejs@3.13.5:
+    resolution: {integrity: sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==}
+    dependencies:
+      '@vue/reactivity': 3.1.5
+    dev: false
+
   /ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
     dependencies:

src/components/layout/Header.astro

@@ -25,11 +25,26 @@ import logoImage from '@/assets/images/logo.png';
 </script>
 
 <header
+	x-data={`{
+    open: window.innerWidth < 640 ? false : true,
+    windowWidth: window.innerWidth,
+    init() {
+        this.$watch('windowWidth', value => {
+            this.open = value < 640 ? false : true;
+        });
+        window.addEventListener('resize', () => {
+            this.$nextTick(() => {
+                this.windowWidth = window.innerWidth;
+            });
+        });
+    }
+}`}
+	x-init="init()"
 	class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
 	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
 		<a
 			href="/"
-			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-medium leading-relaxed text-inherit antialiased">
+			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
 			<div class="flex items-center gap-2 lg:gap-4">
 				<Image
 					src={logoImage}
@@ -40,6 +55,89 @@ import logoImage from '@/assets/images/logo.png';
 				Astro Deploy
 			</div>
 		</a>
-		<ModeToggle client:load />
+		<div class="hidden sm:block">
+			<nav
+				class="mb-6 mt-4 flex min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex-row sm:p-1">
+				<a
+					href="/"
+					class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+					<div
+						role="button"
+						class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
+						Home
+					</div>
+				</a>
+				<a
+					href="/blog/"
+					class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+					<div
+						role="button"
+						class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
+						Blog
+					</div>
+				</a>
+			</nav>
+		</div>
+		<div class="flex">
+			<button
+				class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
+				aria-controls="menu"
+				@click="open = !open">
+				<span class="sr-only">Open main menu</span>
+				<span
+					class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform">
+					<span
+						aria-hidden="true"
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
+						:class="{'rotate-45': open,' -translate-y-1.5': !open }">
+					</span>
+					<span
+						aria-hidden="true"
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
+						:class="{'opacity-0': open } ">
+					</span>
+					<span
+						aria-hidden="true"
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
+						:class="{'-rotate-45': open, ' translate-y-1.5': !open}">
+					</span>
+				</span>
+			</button>
+			<ModeToggle client:load />
+		</div>
+	</div>
+	<div class="block w-full basis-full overflow-hidden sm:hidden">
+		<nav
+			id="menu"
+			:class="{'flex': open, 'hidden': !open}"
+			x-show="open"
+			x-transition:enter="transition ease-out duration-200"
+			x-transition:enter-start="opacity-0 transform scale-90"
+			x-transition:enter-end="opacity-100 transform scale-100"
+			x-transition:leave="transition ease-in duration-200"
+			x-transition:leave-start="opacity-100 transform scale-100"
+			x-transition:leave-end="opacity-0 transform scale-90"
+			class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:block sm:flex-row sm:p-1">
+			<a
+				href="/"
+				class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+				<div
+					role="button"
+					tabindex="0"
+					class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900">
+					Home
+				</div>
+			</a>
+			<a
+				href="/blog/"
+				class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+				<div
+					role="button"
+					tabindex="0"
+					class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900">
+					Blog
+				</div>
+			</a>
+		</nav>
 	</div>
 </header>