remove alpinejs in favor of astro-navbar

2023-01-02 19:40:29 +05:30
parent 49d8294aaf
commit b5941f1a72
5 changed files with 94 additions and 138 deletions
--- a/astro.config.mjs
+++ b/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",
    }),
--- a/package.json
+++ b/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"
  },
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/components/navbar/dropdown.astro
+++ b/src/components/navbar/dropdown.astro
@@ -1,42 +1,47 @@
 ---
+import { Dropdown, DropdownItems } from "astro-navbar";
 const { title, lastItem, children } = Astro.props;
 ---

-<li @click.away="open = false" class="relative" x-data="{ open: false }">
-  <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
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="3"
-      stroke="currentColor"
-      class="w-3 h-3 mt-0.5"
-      :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>
-  <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",
-    ]}>
-    <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">
-            {item.title}
-          </a>
-        ))
-      }
-    </div>
-  </div>
+<li class="relative">
+  <Dropdown class="group">
+    <button
+      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
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="3"
+        stroke="currentColor"
+        class="w-3 h-3 mt-0.5 group-open:rotate-180">
+        <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
+        class:list={[
+          "lg:absolute  w-full  lg:w-48",
+          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">
+                {item.title}
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </DropdownItems>
+  </Dropdown>
 </li>
--- a/src/components/navbar/navbar.astro
+++ b/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,74 +34,50 @@ const menuitems = [
 ---

 <Container>
-  <header
-    class="flex flex-col lg:flex-row justify-between items-center my-5"
-    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
-          class="text-slate-500">ship</span
-        >
-      </a>
-      <div class="block lg:hidden">
-        <button @click="open = !open" class="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>
+  <header class="flex flex-col lg:flex-row justify-between items-center my-5">
+    <Astronav>
+      <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
+            class="text-slate-500">ship</span
+          >
+        </a>
+        <div class="block lg:hidden">
+          <MenuIcon class="w-4 h-4 text-gray-800" />
+        </div>
      </div>
-    </div>
-    <nav
-      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) => (
-            <>
-              {item.children && (
-                <Dropdown
-                  title={item.title}
-                  children={item.children}
-                  lastItem={index === menuitems.length - 1}
-                />
-              )}
+      <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
+        <ul class="flex flex-col lg:flex-row lg:gap-3">
+          {
+            menuitems.map((item, index) => (
+              <>
+                {item.children && (
+                  <Dropdown
+                    title={item.title}
+                    children={item.children}
+                    lastItem={index === menuitems.length - 1}
+                  />
+                )}

-              {!item.children && (
-                <li>
-                  <a
-                    href={item.path}
-                    class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
-                    {item.title}
-                  </a>
-                </li>
-              )}
-            </>
-          ))
-        }
-      </ul>
-      <div class="lg:hidden flex items-center mt-3 gap-4">
-        <Link href="#" style="muted" block size="md">Log in</Link>
-        <Link href="#" size="md" block>Sign up</Link>
-      </div>
-    </nav>
+                {!item.children && (
+                  <li>
+                    <a
+                      href={item.path}
+                      class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+                      {item.title}
+                    </a>
+                  </li>
+                )}
+              </>
+            ))
+          }
+        </ul>
+        <div class="lg:hidden flex items-center mt-3 gap-4">
+          <Link href="#" style="muted" block size="md">Log in</Link>
+          <Link href="#" size="md" block>Sign up</Link>
+        </div>
+      </MenuItems>
+    </Astronav>
    <div>
      <div class="hidden lg:flex items-center gap-4">
        <a href="#">Log in</a>