feat: add interactivity with alpinejs (#34)

* first stages of implementing alpinejs

* add link to projects slideshow

* begin adding nav bar

* inpired hero from flaco theme

* fix posts showcase

fixed to publish current work to latest

* revert docker action

* update astro version

src/components/Header.astro

@@ -1,13 +1,16 @@
 ---
 import { SITE } from "@consts";
 import { Icon } from "astro-icon/components";
+import Button from "@components/Button.astro";
 ---
 
-<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
-  <div
-    class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
+<header class="mx-auto mb-8 w-full max-w-6xl space-y-6 px-4 pt-4">
+  <nav
+    x-data="{ mobileMenuIsOpen: false }"
+    x-on:click.away="mobileMenuIsOpen = false"
+    class="flex h-12 items-center justify-between"
   >
-    <a class="inline-flex items-center" href="/" title={SITE.TITLE}>
+    <a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
       <Icon
         name="icon"
         title={SITE.TITLE}
@@ -19,5 +22,87 @@ import { Icon } from "astro-icon/components";
         Troy Lusty
       </div>
     </a>
-  </div>
+    <ul class="hidden items-center gap-4 sm:flex">
+      {
+        SITE.NAVLINKS.map((i) => (
+          <li class="mb-1 last:mb-0">
+            <a
+              data-navlink
+              href={i.href}
+              class="text-secondary hover:text-secondary decoration-tertiary font-medium capitalize decoration-wavy underline-offset-2 focus:underline focus:outline-hidden"
+              aria-current="page"
+            >
+              {i.name}
+            </a>
+          </li>
+        ))
+      }
+      <li>
+        <a href={`mailto:${SITE.EMAIL}`}>
+          <span
+            class="rounded-full bg-blue-500/10 px-3 py-2 text-sm leading-6 font-medium text-blue-400 ring-1 ring-blue-500/20 ring-inset"
+            >Hire me</span
+          >
+        </a>
+      </li>
+    </ul>
+    <button
+      x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
+      x-bind:aria-expanded="mobileMenuIsOpen"
+      x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-99' : null"
+      type="button"
+      class="text-secondary flex sm:hidden"
+      aria-label="mobile menu"
+      aria-controls="mobileMenu"
+    >
+      <Icon
+        name="mdi:menu"
+        aria-hidden="true"
+        class="size-6"
+        x-cloak
+        x-show="!mobileMenuIsOpen"
+      />
+      <Icon
+        name="mdi:window-close"
+        aria-hidden="true"
+        class="size-6"
+        x-cloak
+        x-show="mobileMenuIsOpen"
+      />
+    </button>
+    <ul
+      x-cloak
+      x-show="mobileMenuIsOpen"
+      x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
+      x-transition:enter-start="-translate-y-full"
+      x-transition:enter-end="translate-y-0"
+      x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
+      x-transition:leave-start="translate-y-0"
+      x-transition:leave-end="-translate-y-full"
+      id="mobileMenu"
+      class="bg-primary fixed inset-x-0 top-0 z-98 flex max-h-svh flex-col overflow-y-auto rounded-b-md px-6 pt-20 pb-6 sm:hidden"
+    >
+      {
+        SITE.NAVLINKS.map((i) => (
+          <li class="py-4">
+            <a
+              data-navlink
+              href={i.href}
+              class="text-secondary w-full text-lg font-medium capitalize focus:underline"
+              aria-current="page"
+            >
+              {i.name}
+            </a>
+          </li>
+        ))
+      }
+      <li class="mt-4 w-full border-none">
+        <Button
+          href={`mailto:${SITE.EMAIL}`}
+          link="Hire me"
+          class="block w-full justify-center"
+        />
+      </li>
+    </ul>
+  </nav>
 </header>