From d8615eb1ee8dd7e389f906911619c756485e0ae5 Mon Sep 17 00:00:00 2001 From: Jewgeni Lewash Date: Sun, 3 Mar 2024 17:46:34 +0100 Subject: [PATCH] feat(ui): add navigation to header --- Readme.md | 4 ++ astro.config.mjs | 2 + package.json | 3 + pnpm-lock.yaml | 39 +++++++++++ src/components/layout/Header.astro | 102 ++++++++++++++++++++++++++++- 5 files changed, 148 insertions(+), 2 deletions(-) diff --git a/Readme.md b/Readme.md index d9d0d76..9b70743 100644 --- a/Readme.md +++ b/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/) diff --git a/astro.config.mjs b/astro.config.mjs index 2f1af79..3f32944 100644 --- a/astro.config.mjs +++ b/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(), diff --git a/package.json b/package.json index 3db3d7c..ad9577e 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a600ea9..b270671 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro index cee8b37..0360491 100644 --- a/src/components/layout/Header.astro +++ b/src/components/layout/Header.astro @@ -25,11 +25,26 @@ import logoImage from '@/assets/images/logo.png';
{ + 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">
+ class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
- + +
+ + +
+
+
+