hero section

src/components/navbar/dropdown.astro

@@ -1,32 +1,42 @@
 ---
-const { title, children } = Astro.props;
+const { title, lastItem, children } = Astro.props;
 ---
 
-<div @click.away="open = false" class="relative" x-data="{ open: false }">
-  <button @click="open = !open" class="flex">
+<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
-      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>
+      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"
-    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>)}
+    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>
-</div>
+</li>