Link mobile layout

apps/link/app/(main)/_components/Sidebar.tsx

@@ -12,6 +12,8 @@ import {
   ListItemSecondaryAction,
   Drawer,
   Collapse,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import {
   FeaturedPlayList as FeaturedPlayListIcon,
@@ -35,9 +37,6 @@ import { getOverviewTicketCountsAction } from "app/_actions/overviews";
 import { SearchBox } from "./SearchBox";
 import { fonts } from "@link-stack/ui";
 
-const openWidth = 270;
-const closedWidth = 70;
-
 const MenuItem = ({
   name,
   href,
@@ -178,14 +177,12 @@ const MenuItem = ({
 interface SidebarProps {
   open: boolean;
   setOpen: (open: boolean) => void;
+  openWidth: number;
+  closedWidth: number;
   leafcutterEnabled?: boolean;
 }
 
-export const Sidebar: FC<SidebarProps> = ({
-  open,
-  setOpen,
-  leafcutterEnabled = false,
-}) => {
+export const Sidebar: FC<SidebarProps> = ({ open, setOpen, openWidth, closedWidth, leafcutterEnabled = false }) => {
   const pathname = usePathname();
   const { data: session } = useSession();
   const [overviewCounts, setOverviewCounts] = useState<any>(null);
@@ -207,6 +204,9 @@ export const Sidebar: FC<SidebarProps> = ({
     return () => clearInterval(interval);
   }, []);
 
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
+  
   const logout = () => {
     signOut({ callbackUrl: "/login" });
   };
@@ -214,14 +214,15 @@ export const Sidebar: FC<SidebarProps> = ({
   return (
     <Drawer
       sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
-      variant="permanent"
+      variant={mobile ? "temporary" : "permanent"}
       anchor="left"
       open={open}
+      onClose={() => {if (mobile) setOpen(false)}}
       PaperProps={{
         sx: {
           width: open ? openWidth : closedWidth,
           border: 0,
-          overflow: "visible",
+          overflow: open ? "visible" : "hidden",
         },
       }}
     >