feat(web): set up for headless ui

It's not finished, but it's wired up right and works.
It took a lot of work—don't mess with `client-only`.

deno.json

@@ -51,6 +51,7 @@
     "$std/": "https://deno.land/std@0.208.0/",
     "$fresh/": "https://deno.land/x/fresh@1.6.1/",
     "tabler_icons_tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/",
+    "@headlessui/react": "https://esm.sh/v135/*@headlessui/react@1.7.17",
     "@preact/signals-core": "https://esm.sh/v135/@preact/signals-core@1.5.1",
     "@preact/signals": "https://esm.sh/v135/*@preact/signals@1.2.2",
     "preact": "https://esm.sh/v135/preact@10.19.3",
@@ -79,5 +80,11 @@
   "fmt": {
     "proseWrap": "preserve"
   },
-  "scopes": {}
+  "scopes": {
+    "https://esm.sh/v135/": {
+      "client-only": "https://esm.sh/client-only@0.0.1",
+      "react-dom": "https://esm.sh/v135/preact@10.19.3/compat",
+      "react": "https://esm.sh/v135/preact@10.19.3/compat"
+    }
+  }
 }

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import IconSolarPanel2 from "tabler_icons_tsx/solar-panel-2.tsx";
 import type { FunctionalComponent } from "preact";
+import { HeaderMenu } from "../islands/HeaderMenu.tsx";
 
 interface Props {
   active: string;
@@ -24,13 +25,11 @@ const Header: FunctionalComponent<Props> = ({ active }: Props) => {
       <ul class="flex items-center gap-6">
         {menus.map((menu) => (
           <li>
-            <a
+            <HeaderMenu
+              title={menu.name}
+              active={menu.href === active}
               href={menu.href}
-              class={" text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1 border-gray-500 dark:border-gray-400" +
-                (menu.href === active ? " font-bold border-b-2" : "")}
-            >
-              {menu.name}
-            </a>
+            />
           </li>
         ))}
       </ul>

src/fresh.gen.ts

@@ -11,7 +11,7 @@ import * as $green_index from "./routes/green/index.tsx";
 import * as $index from "./routes/index.tsx";
 import * as $monies_guarantees_in_life from "./routes/monies/guarantees-in-life.tsx";
 import * as $monies_index from "./routes/monies/index.tsx";
-
+import * as $HeaderMenu from "./islands/HeaderMenu.tsx";
 import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
@@ -26,7 +26,9 @@ const manifest = {
     "./routes/monies/guarantees-in-life.tsx": $monies_guarantees_in_life,
     "./routes/monies/index.tsx": $monies_index,
   },
-  islands: {},
+  islands: {
+    "./islands/HeaderMenu.tsx": $HeaderMenu,
+  },
   baseUrl: import.meta.url,
 } satisfies Manifest;
 

src/islands/HeaderMenu.tsx

@@ -0,0 +1,59 @@
+import { Menu } from "@headlessui/react";
+import type { FunctionComponent } from "preact";
+import IconChevronDown from "tabler_icons_tsx/chevron-down.tsx";
+
+interface Props {
+  title: string;
+  active: boolean;
+  items?: MenuItem[];
+  href?: string;
+}
+
+interface MenuItem {
+  url: string;
+  name: string;
+}
+
+const HeaderMenu: FunctionComponent<Props> = (
+  {
+    title,
+    items,
+    active,
+    href,
+  },
+) => {
+  return items !== undefined
+    ? (
+      <Menu>
+        <Menu.Button class="dark:text-green-50">
+          <span class="flex flex-row">
+            <span class={active ? "font-bold border-b-2" : ""}>{title}</span>
+            {" "}
+            <IconChevronDown />
+          </span>
+        </Menu.Button>
+        <div class="relative">
+          <Menu.Items class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none flex flex-col">
+            {items.map(({ name, url }) => (
+              <Menu.Item>
+                {({ active }) => (
+                  <a class={active ? "bg-blue-500" : ""} href={url}>{name}</a>
+                )}
+              </Menu.Item>
+            ))}
+          </Menu.Items>
+        </div>
+      </Menu>
+    )
+    : (
+      <a
+        href={href}
+        class={" text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 py-1 border-gray-500 dark:border-gray-400" +
+          (active ? " font-bold border-b-2" : "")}
+      >
+        {title}
+      </a>
+    );
+};
+
+export { HeaderMenu };