feat: add kmenu icon for mobile

components/icons.tsx

@@ -17,4 +17,5 @@ export { default as IconSearch } from "https://deno.land/x/tabler_icons_tsx@0.0.
 export { default as IconGhost } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/ghost.tsx";
 export { default as IconBrandYoutube } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/brand-youtube.tsx";
 export { default as IconWand } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/wand.tsx";
+export { default as IconMenu2 } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/menu-2.tsx";
 export { default as IconAlertCircle } from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/alert-circle.tsx";

fresh.gen.ts

@@ -60,6 +60,7 @@ import * as $KMenu_commands_create_recommendations from "./islands/KMenu/command
 import * as $KMenu_commands_create_series from "./islands/KMenu/commands/create_series.ts";
 import * as $KMenu_commands_enhance_article_infos from "./islands/KMenu/commands/enhance_article_infos.ts";
 import * as $KMenu_types from "./islands/KMenu/types.ts";
+import * as $KMenuButton from "./islands/KMenuButton.tsx";
 import * as $Link from "./islands/Link.tsx";
 import * as $Recommendations from "./islands/Recommendations.tsx";
 import * as $Search from "./islands/Search.tsx";
@@ -133,6 +134,7 @@ const manifest = {
     "./islands/KMenu/commands/enhance_article_infos.ts":
       $KMenu_commands_enhance_article_infos,
     "./islands/KMenu/types.ts": $KMenu_types,
+    "./islands/KMenuButton.tsx": $KMenuButton,
     "./islands/Link.tsx": $Link,
     "./islands/Recommendations.tsx": $Recommendations,
     "./islands/Search.tsx": $Search,

islands/KMenu.tsx

@@ -5,6 +5,7 @@ import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";
 import * as icons from "@components/icons.tsx";
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import { isKMenuOpen } from "@lib/kmenu.ts";
 const KMenuEntry = (
   { entry, activeIndex, index }: {
     entry: MenuEntry;
@@ -42,7 +43,7 @@ export const KMenu = (
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
-  const visible = useSignal(false);
+  const visible = isKMenuOpen;
   if (visible.value === false) {
     setTimeout(() => {
       activeMenuType.value = "main";

islands/KMenuButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@components/Button.tsx";
+import { IconMenu2 } from "@components/icons.tsx";
+import { isKMenuOpen } from "@lib/kmenu.ts";
+
+export default function KMenuButton() {
+  return (
+    <Button
+      class="fixed bottom-4 right-4 md:hidden bg-gray-800 text-white p-3 rounded-full shadow-lg z-50"
+      onClick={() => (isKMenuOpen.value = true)}
+    >
+      <IconMenu2 class="w-6 h-6" />
+    </Button>
+  );
+}

lib/kmenu.ts

@@ -0,0 +1,3 @@
+import { signal } from "@preact/signals";
+
+export const isKMenuOpen = signal(false);

routes/_layout.tsx

@@ -2,6 +2,7 @@ import { PageProps } from "$fresh/server.ts";
 import { resources } from "@lib/resources.ts";
 import { Link } from "@islands/Link.tsx";
 import { Emoji } from "@components/Emoji.tsx";
+import KMenuButton from "@islands/KMenuButton.tsx";
 
 export default function MyLayout({ Component }: PageProps) {
   return (
@@ -26,6 +27,7 @@ export default function MyLayout({ Component }: PageProps) {
       <main class="py-5">
         <Component />
       </main>
+      <KMenuButton />
     </div>
   );
 }