Link mobile layout

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

@@ -1,9 +1,29 @@
 "use client";
 
-import { FC, PropsWithChildren, useState } from "react";
-import { Grid, Box } from "@mui/material";
-import { Sidebar } from "./Sidebar";
+import { FC, PropsWithChildren, useEffect, useState } from "react";
 import { SetupModeWarning } from "./SetupModeWarning";
+import {
+  AppBar as MuiAppBar,
+  ToolbarProps,
+  Box,
+  Grid,
+  IconButton,
+  styled,
+  Toolbar,
+  Typography,
+  Menu,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
+import { Sidebar } from "./Sidebar";
+import {
+  ExpandCircleDown,
+  MenuBookTwoTone,
+  MenuSharp,
+} from "@mui/icons-material";
+import { fonts } from "@link-stack/ui";
+import Image from "next/image";
+import LinkLogo from "public/link-logo-small.png";
 
 interface InternalLayoutProps extends PropsWithChildren {
   setupModeActive: boolean;
@@ -15,20 +35,93 @@ export const InternalLayout: FC<InternalLayoutProps> = ({
   setupModeActive,
   leafcutterEnabled,
 }) => {
-  const [open, setOpen] = useState(true);
+  const { poppins } = fonts;
+
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const [open, setOpen] = useState(false);
+  const [openWidth, setOpenWidth] = useState<number>(0);
+  const [closedWidth, setClosedWidth] = useState<number>(0);
+
+  useEffect(() => {
+    setClosedWidth(mobile ? 0 : 70);
+    setOpenWidth(270);
+    setOpen(!mobile);
+  }, [mobile]);
+
+  interface HeaderBarProps extends ToolbarProps {
+    open?: boolean;
+  }
+
+  const HeaderBar = styled(Toolbar, {
+    shouldForwardProp: (prop) => prop !== "open",
+  })<HeaderBarProps>(({ theme, open }) => ({
+    backgroundColor: "#25272A",
+    width: "100%",
+    height: "56px",
+  }));
 
   return (
     <Box sx={{ position: "relative" }}>
       <SetupModeWarning setupModeActive={setupModeActive} />
       <Grid container direction="row">
+        {mobile ? (<MuiAppBar>
+          <HeaderBar>
+            <IconButton
+              sx={{ color: "white" }}
+              aria-label="open drawer"
+              onClick={() => setOpen(true)}
+            >
+              <MenuSharp />
+            </IconButton>
+            <Typography
+              variant="h2"
+              sx={{
+                fontSize: 26,
+                color: "white",
+                fontWeight: 700,
+                fontFamily: poppins.style.fontFamily,
+                flexGrow: 1,
+              }}
+            >
+              CDR Link
+            </Typography>
+            <Box
+              sx={{
+                width: "40px",
+                height: "40px",
+                margin: open ? "0" : "0 auto",
+              }}
+            >
+              <Image
+                src={LinkLogo}
+                alt="Link logo"
+                width={40}
+                height={40}
+                style={{
+                  objectFit: "cover",
+                  filter: "grayscale(100) brightness(100)",
+                }}
+              />
+            </Box>
+          </HeaderBar>
+        </MuiAppBar>) : (null)}
         <Sidebar
           open={open}
           setOpen={setOpen}
-          leafcutterEnabled={leafcutterEnabled}
+          openWidth={openWidth}
+          closedWidth={closedWidth}
         />
         <Grid
           item
-          sx={{ ml: open ? "270px" : "70px", width: "100%", height: "100vh" }}
+          sx={{
+            mt: { xs: "56px", sm: "0" },
+            ml: { xs: open ? "270px" : "0px", sm: open ? "270px" : "70px" },
+            width: "100%",
+            height: { xs: "calc(100vh - 56px)", sm: "100vh" },
+            position: "relative",
+          }}
         >
           {children as any}
         </Grid>

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",
         },
       }}
     >