more mobile compatible

src/components/app.tsx

@@ -1,3 +1,22 @@
+'use client';
+
+import * as React from 'react';
+import { Menu, ChevronDown, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+    Sheet,
+    SheetContent,
+    SheetFooter,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+
 import {
     SidebarContent,
     SidebarProvider,
@@ -7,12 +26,12 @@ import {
     SidebarGroupContent,
     SidebarMenu,
     SidebarMenuItem,
-    SidebarMenuButton,
     SidebarFooter,
 } from '@/components/ui/sidebar';
 
 import { Calendar, LayoutDashboardIcon, Settings } from 'lucide-react';
 import Link from 'next/link';
+import useSmallScreen from '@/hooks/is-small';
 
 // Menu items.
 const items = [
@@ -36,18 +55,90 @@ const footer = [
     },
 ];
 
-export default function App({ children }: { children?: any }) {
+export function HamburgerMenu() {
+    const [open, setOpen] = React.useState(false);
+
     return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTitle className="hidden">Menu</SheetTitle>
+            <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="md:hidden">
+                    <Menu className="h-10 w-5" />
+                    <span className="sr-only">Toggle menu</span>
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-28 flex flex-col">
+                {items.map((item, i) => (
+                    <div key={i} className="w-16 mx-auto">
+                        <Link href={item.url}>
+                            <item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
+                        </Link>
+                    </div>
+                ))}
+
+                <div className="flex-grow" />
+
+                <SheetFooter className="mt-auto">
+                    {footer.map((item, i) => (
+                        <Link href={item.url} key={i}>
+                            <item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
+                        </Link>
+                    ))}
+                </SheetFooter>
+            </SheetContent>
+        </Sheet>
+    );
+}
+
+export default function App({ children }: { children?: any }) {
+    const isSmall = useSmallScreen();
+
+    return isSmall ? (
+        <div className="flex flex-col">
+            <div className="flex flex-row w-max mx-auto gap-2 items-center">
+                <div className="flex flex-row w-max gap-2">
+                    {items.map((item, i) => (
+                        <div key={i} className="w-12 mx-auto">
+                            <Link href={item.url}>
+                                <item.icon className="!size-full p-2 hover:bg-foreground hover:text-background rounded-2xl" />
+                            </Link>
+                        </div>
+                    ))}
+                </div>
+
+                <div className="flex flex-row w-max gap-2">
+                    {footer.map((item, i) => (
+                        <div key={i} className="w-12 mx-auto">
+                            <Link href={item.url}>
+                                <item.icon className="!size-full p-2 hover:bg-foreground hover:text-background rounded-2xl" />
+                            </Link>
+                        </div>
+                    ))}
+                </div>
+                {/* {items.map((item, i) => (
+                    <div key={i} className="w-12 mx-auto">
+                        <Link href={item.url}>
+                            <item.icon className="!size-full p-2 hover:bg-foreground hover:text-background rounded-2xl" />
+                        </Link>
+                    </div>
+                ))} */}
+            </div>
+            {children}
+        </div>
+    ) : (
         <div className="flex w-full">
-            <div className='md:w-28'>
-                <SidebarProvider>
+            <div className="md:w-28">
+                <SidebarProvider
+                    open={true}
+                    defaultOpen={true}
+                >
                     <Sidebar className="w-28">
                         <SidebarContent>
                             <SidebarGroup>
                                 <SidebarGroupLabel>
                                     Klayrion v0.0.1-alpha.0
                                 </SidebarGroupLabel>
-                                <SidebarGroupContent>
+                                <SidebarGroupContent className="mt-14">
                                     <SidebarMenu>
                                         {items.map((item, i) => (
                                             <SidebarMenuItem
@@ -63,7 +154,7 @@ export default function App({ children }: { children?: any }) {
                                 </SidebarGroupContent>
                             </SidebarGroup>
                         </SidebarContent>
-                        <SidebarFooter className='mb-4'>
+                        <SidebarFooter className="mb-4">
                             <SidebarMenu>
                                 {footer.map((item, i) => (
                                     <SidebarMenuItem