Improve mobile ui: added a hamburger navigation to the mobile view. (#7987)

* Update GitHubStarsButton component to be hidden on smaller screens * feat: added a mobile navigation to the front-end. * refactor: replace useQueryState with useSuspenseQueryState in ScriptContent and MobileSidebar components; add use-suspense-query-state hook * Revert "refactor: replace useQueryState with useSuspenseQueryState in ScriptContent and MobileSidebar components; add use-suspense-query-state hook" This reverts commit bfad01fc91. * refactor: wrap MobileSidebar component in Suspense for improved loading handling * Update mobile-sidebar.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-07 03:42:50 +00:00 · 2025-09-29 18:16:36 +02:00
parent 760299283a
commit 07f2849722
6 changed files with 165 additions and 28 deletions
--- a/frontend/src/components/navigation/mobile-sidebar.tsx
+++ b/frontend/src/components/navigation/mobile-sidebar.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useQueryState } from "nuqs";
+import { Menu } from "lucide-react";
+
+import type { Category, Script } from "@/lib/types";
+
+import { ScriptItem } from "@/app/scripts/_components/script-item";
+import Sidebar from "@/app/scripts/_components/sidebar";
+import { fetchCategories } from "@/lib/data";
+
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
+import { Button } from "../ui/button";
+
+function MobileSidebar() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [lastViewedScript, setLastViewedScript] = useState<Script | undefined>(undefined);
+  const [selectedScript, setSelectedScript] = useQueryState("id");
+  const [selectedCategory, setSelectedCategory] = useQueryState("category");
+
+  const loadCategories = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetchCategories();
+      setCategories(response);
+    }
+    catch (error) {
+      console.error(error);
+    }
+    finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadCategories();
+  }, [loadCategories]);
+
+  useEffect(() => {
+    if (!selectedScript || categories.length === 0) {
+      return;
+    }
+
+    const scriptMatch = categories
+      .flatMap(category => category.scripts)
+      .find(script => script.slug === selectedScript);
+
+    setLastViewedScript(scriptMatch);
+  }, [selectedScript, categories]);
+
+  const handleOpenChange = (openState: boolean) => {
+    setIsOpen(openState);
+  };
+
+  const handleItemSelect = () => {
+    setIsOpen(false);
+  };
+
+  const hasLinks = categories.length > 0;
+
+  return (
+    <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Open navigation menu"
+          tabIndex={0}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              setIsOpen(true);
+            }
+          }}
+        >
+          <Menu className="size-5" aria-hidden="true" />
+        </Button>
+      </SheetTrigger>
+      <SheetHeader className="border-b border-border px-6 pb-4 pt-2"><SheetTitle className="sr-only">Categories</SheetTitle></SheetHeader>
+      <SheetContent side="left" className="flex w-full max-w-xs flex-col gap-4 overflow-hidden px-0 pb-6">
+        <div className="flex h-full flex-col gap-4 overflow-y-auto">
+          {isLoading && !hasLinks
+            ? (
+                <div className="flex w-full flex-col items-center justify-center gap-2 px-6 py-4 text-sm text-muted-foreground">
+                  Loading categories...
+                </div>
+              )
+            : (
+                <div className="flex flex-col gap-4 px-4">
+                  <Sidebar
+                    items={categories}
+                    selectedScript={selectedScript}
+                    setSelectedScript={setSelectedScript}
+                    selectedCategory={selectedCategory}
+                    setSelectedCategory={setSelectedCategory}
+                    onItemSelect={handleItemSelect}
+                  />
+                </div>
+              )}
+          {selectedScript && lastViewedScript
+            ? (
+                <div className="flex flex-col gap-3 px-4">
+                  <p className="text-sm font-medium">Last Viewed</p>
+                  <ScriptItem item={lastViewedScript} setSelectedScript={setSelectedScript} />
+                </div>
+              )
+            : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default MobileSidebar;