setting up navbar

src/components/container.astro

@@ -0,0 +1,7 @@
+---
+const { class: className } = Astro.props;
+---
+
+<div class:list={["max-w-screen-xl mx-auto px-5", className]}>
+  <slot />
+</div>

src/components/navbar/dropdown.astro

@@ -0,0 +1,32 @@
+---
+const { title, children } = Astro.props;
+---
+
+<div @click.away="open = false" class="relative" x-data="{ open: false }">
+  <button @click="open = !open" class="flex">
+    <span>{title}</span>
+    <svg
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      :class="{'rotate-180': open, 'rotate-0': !open}"
+      class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+      ><path
+        fill-rule="evenodd"
+        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+        clip-rule="evenodd"></path>
+    </svg>
+  </button>
+  <div
+    x-show="open"
+    x-transition:enter="transition ease-out duration-100"
+    x-transition:enter-start="transform lg:opacity-0 lg:scale-95"
+    x-transition:enter-end="transform lg:opacity-100 lg:scale-100"
+    x-transition:leave="transition ease-in duration-75"
+    x-transition:leave-start="transform lg:opacity-100 lg:scale-100"
+    x-transition:leave-end="transform lg:opacity-0 lg:scale-95"
+    class="lg:absolute lg:right-0 w-full mt-2 origin-top-right lg:w-48">
+    <div class="px-2 py-2 lg:bg-white lg:rounded-md lg:shadow">
+      {children.map((item) => <div>{item.title}</div>)}
+    </div>
+  </div>
+</div>

src/components/navbar/navbar.astro

@@ -0,0 +1,87 @@
+---
+import Container from "@components/container.astro";
+import Dropdown from "./dropdown.astro";
+
+const menuitems = [
+  {
+    title: "Features",
+    path: "#",
+    children: [
+      { title: "Action", path: "#" },
+      { title: "Another action", path: "#" },
+      { title: "Dropdown Submenu", path: "#" },
+    ],
+  },
+  {
+    title: "Pricing",
+    path: "/pricing",
+  },
+  {
+    title: "About",
+    path: "/about",
+  },
+  {
+    title: "Blog",
+    path: "/blog",
+  },
+  {
+    title: "Resources",
+    path: "#",
+    children: [
+      { title: "Action", path: "#" },
+      { title: "Another action", path: "#" },
+      { title: "Dropdown Submenu", path: "#" },
+    ],
+  },
+];
+---
+
+<Container>
+  <header
+    class="flex justify-between my-5"
+    x-data="{ open: false }"
+    x-init="$watch('open', value => console.log(value))">
+    <div>Astroship</div>
+    <nav
+      class="lg:block"
+      :class="{ 'block': open, 'hidden': !open }"
+      x-show.transition="true">
+      <ul class="flex flex-col lg:flex-row gap-3">
+        {
+          menuitems.map((item) => (
+            <li>
+              {item.children && (
+                <Dropdown title={item.title} children={item.children} />
+              )}
+              {!item.children && <a href={item.path}>{item.title}</a>}
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+    <div>
+      <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-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> login
+    </div>
+  </header>
+</Container>