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>

frontend/src/app/scripts/_components/sidebar.tsx

@@ -2,21 +2,29 @@
 
 import type { Category, Script } from "@/lib/types";
 
+import { cn } from "@/lib/utils";
+
 import ScriptAccordion from "./script-accordion";
 
+type SidebarProps = {
+  items: Category[];
+  selectedScript: string | null;
+  setSelectedScript: (script: string | null) => void;
+  selectedCategory: string | null;
+  setSelectedCategory: (category: string | null) => void;
+  onItemSelect?: () => void;
+  className?: string;
+};
+
 function Sidebar({
   items,
   selectedScript,
   setSelectedScript,
   selectedCategory,
   setSelectedCategory,
-}: {
-  items: Category[];
-  selectedScript: string | null;
-  setSelectedScript: (script: string | null) => void;
-  selectedCategory: string | null;
-  setSelectedCategory: (category: string | null) => void;
-}) {
+  onItemSelect,
+  className,
+}: SidebarProps) {
   const uniqueScripts = items.reduce((acc, category) => {
     for (const script of category.scripts) {
       if (!acc.some(s => s.name === script.name)) {
@@ -27,7 +35,7 @@ function Sidebar({
   }, [] as Script[]);
 
   return (
-    <div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
+    <div className={cn("flex w-full flex-col sm:min-w-[350px] sm:max-w-[350px]", className)}>
       <div className="flex items-end justify-between pb-4">
         <h1 className="text-xl font-bold">Categories</h1>
         <p className="text-xs italic text-muted-foreground">
@@ -43,6 +51,7 @@ function Sidebar({
           setSelectedScript={setSelectedScript}
           selectedCategory={selectedCategory}
           setSelectedCategory={setSelectedCategory}
+          onItemSelect={onItemSelect}
         />
       </div>
     </div>