feat: added a mobile navigation to the front-end.

frontend/src/app/scripts/_components/script-accordion.tsx

@@ -27,12 +27,14 @@ export default function ScriptAccordion({
   setSelectedScript,
   selectedCategory,
   setSelectedCategory,
+  onItemSelect,
 }: {
   items: Category[];
   selectedScript: string | null;
   setSelectedScript: (script: string | null) => void;
   selectedCategory: string | null;
   setSelectedCategory: (category: string | null) => void;
+  onItemSelect?: () => void;
 }) {
   const [expandedItem, setExpandedItem] = useState<string | undefined>(undefined);
   const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
@@ -77,7 +79,7 @@ export default function ScriptAccordion({
       value={expandedItem}
       onValueChange={handleAccordionChange}
       collapsible
-      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2"
+      className="overflow-y-scroll sm:max-h-[calc(100vh-209px)] overflow-x-hidden p-1"
     >
       {items.map(category => (
         <AccordionItem
@@ -125,6 +127,7 @@ export default function ScriptAccordion({
                     onClick={() => {
                       handleSelected(script.slug);
                       setSelectedCategory(category.name);
+                      onItemSelect?.();
                     }}
                     ref={(el) => {
                       linkRefs.current[script.slug] = el;

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>