remove alpinejs in favor of astro-navbar

astro.config.mjs

@@ -1,26 +1,13 @@
 import { defineConfig } from "astro/config";
-
-// https://astro.build/config
 import tailwind from "@astrojs/tailwind";
-
-// https://astro.build/config
-import alpinejs from "@astrojs/alpinejs";
-
-// https://astro.build/config
 import image from "@astrojs/image";
-
-// https://astro.build/config
 import mdx from "@astrojs/mdx";
-
-// https://astro.build/config
 import sitemap from "@astrojs/sitemap";
 
-// https://astro.build/config
 export default defineConfig({
   site: "https://astroship.web3templates.com",
   integrations: [
     tailwind(),
-    alpinejs(),
     image({
       serviceEntryPoint: "@astrojs/image/sharp",
     }),

package.json

@@ -18,10 +18,10 @@
     "@astrojs/tailwind": "^2.1.1",
     "@fontsource/inter": "^4.5.14",
     "@types/alpinejs": "^3.0.0",
-    "alpinejs": "^3.0.0",
     "astro": "^1.6.0",
     "astro-feather-icons": "^1.0.2",
     "astro-icon": "^0.8.0",
+    "astro-navbar": "^1.0.1",
     "astro-seo": "^0.6.0",
     "tailwindcss": "^3.0.24"
   },

pnpm-lock.yaml

@@ -9,26 +9,26 @@ specifiers:
   '@fontsource/inter': ^4.5.14
   '@tailwindcss/typography': ^0.5.7
   '@types/alpinejs': ^3.0.0
-  alpinejs: ^3.0.0
   astro: ^1.6.0
   astro-feather-icons: ^1.0.2
   astro-icon: ^0.8.0
+  astro-navbar: ^1.0.1
   astro-seo: ^0.6.0
   sharp: ^0.31.3
   tailwindcss: ^3.0.24
 
 dependencies:
-  '@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq
+  '@astrojs/alpinejs': 0.1.2_@types+alpinejs@3.7.1
   '@astrojs/image': 0.11.0_sharp@0.31.3
   '@astrojs/mdx': 0.11.5
   '@astrojs/sitemap': 1.0.0
   '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1
   '@fontsource/inter': 4.5.14
   '@types/alpinejs': 3.7.1
-  alpinejs: 3.10.5
   astro: 1.6.2
   astro-feather-icons: 1.0.2
   astro-icon: 0.8.0
+  astro-navbar: 1.0.1
   astro-seo: 0.6.0
   tailwindcss: 3.2.1
 
@@ -50,14 +50,13 @@ packages:
       '@jridgewell/trace-mapping': 0.3.17
     dev: false
 
-  /@astrojs/alpinejs/0.1.2_epas4sveda2fzipjieohqzpxgq:
+  /@astrojs/alpinejs/0.1.2_@types+alpinejs@3.7.1:
     resolution: {integrity: sha512-pcy+r7TTeFMbdZpRUuOYbf5L3ccFp107gH9j0Hdl5z8hmrSw9918pxkK1tiAcbwrQKxifv7nM5V5FJKu7SoJrw==}
     peerDependencies:
       '@types/alpinejs': ^3.0.0
       alpinejs: ^3.0.0
     dependencies:
       '@types/alpinejs': 3.7.1
-      alpinejs: 3.10.5
     dev: false
 
   /@astrojs/compiler/0.23.5:
@@ -786,22 +785,12 @@ packages:
       vscode-uri: 2.1.2
     dev: false
 
-  /@vue/reactivity/3.1.5:
-    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
-    dependencies:
-      '@vue/shared': 3.1.5
-    dev: false
-
   /@vue/reactivity/3.2.41:
     resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
     dependencies:
       '@vue/shared': 3.2.41
     dev: false
 
-  /@vue/shared/3.1.5:
-    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
-    dev: false
-
   /@vue/shared/3.2.41:
     resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
     dev: false
@@ -836,12 +825,6 @@ packages:
     hasBin: true
     dev: false
 
-  /alpinejs/3.10.5:
-    resolution: {integrity: sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==}
-    dependencies:
-      '@vue/reactivity': 3.1.5
-    dev: false
-
   /ansi-align/3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
     dependencies:
@@ -921,6 +904,10 @@ packages:
       svgo: 2.8.0
     dev: false
 
+  /astro-navbar/1.0.1:
+    resolution: {integrity: sha512-aDkBiczb1JHRBaysvMFOUvHnoMqU6GmGb6UgMrZ7UBFypTaBjyKsckSTdNEIb45JtjHmYNekKGAnHyoIqacczA==}
+    dev: false
+
   /astro-seo/0.6.0:
     resolution: {integrity: sha512-nR+dJlAyQhX6s0oAmbBqPq3KCZax/zVAerFsclGiJQ2znOkS/7L+RGjziS4M9Q3OQxm3FMfqIKHp9Ns73Q81ww==}
     dev: false

src/components/navbar/dropdown.astro

@@ -1,10 +1,11 @@
 ---
+import { Dropdown, DropdownItems } from "astro-navbar";
 const { title, lastItem, children } = Astro.props;
 ---
 
-<li @click.away="open = false" class="relative" x-data="{ open: false }">
+<li class="relative">
+  <Dropdown class="group">
     <button
-    @click="open = !open"
       class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
       <span>{title}</span>
       <svg
@@ -13,30 +14,34 @@ const { title, lastItem, children } = Astro.props;
         viewBox="0 0 24 24"
         stroke-width="3"
         stroke="currentColor"
-      class="w-3 h-3 mt-0.5"
+        class="w-3 h-3 mt-0.5 group-open:rotate-180">
-      :class="{'rotate-180': open, 'rotate-0': !open}">
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
           d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
       </svg>
     </button>
+    <DropdownItems>
       <div
-    x-cloak
-    x-show="open"
         class:list={[
           "lg:absolute  w-full  lg:w-48",
-      lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left",
+          lastItem
+            ? "lg:right-0 origin-top-right"
+            : "lg:left-0 origin-top-left",
         ]}>
         <div
           class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col">
           {
             children.map((item) => (
-          <a href={item.path} class="py-1 text-gray-600 hover:text-gray-900">
+              <a
+                href={item.path}
+                class="py-1 text-gray-600 hover:text-gray-900">
                 {item.title}
               </a>
             ))
           }
         </div>
       </div>
+    </DropdownItems>
+  </Dropdown>
 </li>

src/components/navbar/navbar.astro

@@ -2,6 +2,7 @@
 import Container from "@components/container.astro";
 import Link from "@components/ui/link.astro";
 import Dropdown from "./dropdown.astro";
+import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
 
 const menuitems = [
   {
@@ -33,10 +34,8 @@ const menuitems = [
 ---
 
 <Container>
-  <header
+  <header class="flex flex-col lg:flex-row justify-between items-center my-5">
-    class="flex flex-col lg:flex-row justify-between items-center my-5"
+    <Astronav>
-    x-data="{ open: false }"
-    x-init="$watch('open', value => console.log(value))">
       <div class="flex w-full lg:w-auto items-center justify-between">
         <a href="/" class="text-lg"
           ><span class="font-bold text-slate-800">Astro</span><span
@@ -44,33 +43,10 @@ const menuitems = [
           >
         </a>
         <div class="block lg:hidden">
-        <button @click="open = !open" class="text-gray-800">
+          <MenuIcon class="w-4 h-4 text-gray-800" />
-          <svg
-            fill="currentColor"
-            class="w-4 h-4"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg">
-            <title>Menu</title>
-            <path
-              x-cloak
-              x-show="open"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"
-            ></path>
-            <path
-              x-show="!open"
-              fill-rule="evenodd"
-              d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"
-            ></path>
-          </svg>
-        </button>
         </div>
       </div>
-    <nav
+      <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
-      class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0"
-      :class="{ 'block': open, 'hidden': !open }"
-      x-transition>
         <ul class="flex flex-col lg:flex-row lg:gap-3">
           {
             menuitems.map((item, index) => (
@@ -100,7 +76,8 @@ const menuitems = [
           <Link href="#" style="muted" block size="md">Log in</Link>
           <Link href="#" size="md" block>Sign up</Link>
         </div>
-    </nav>
+      </MenuItems>
+    </Astronav>
     <div>
       <div class="hidden lg:flex items-center gap-4">
         <a href="#">Log in</a>