mobile responsive home page

www/src/components/HomeNavigation/NavDrawer.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import {
   makeStyles,
   createStyles,
+  useTheme,
+  useMediaQuery,
   Drawer,
   DrawerProps,
   Grid,
@@ -11,10 +13,10 @@ import {
   ListItem,
   ListItemIcon,
   ListItemText,
-  Divider,
 } from "@material-ui/core";
 import { fade } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";
+import AddIcon from "@material-ui/icons/Add";
 
 import { APP_BAR_HEIGHT } from ".";
 import FiretableLogo from "assets/Firetable";
@@ -36,6 +38,15 @@ const useStyles = makeStyles((theme) =>
       padding: theme.spacing(0, 0.5, 0, 2),
     },
 
+    nav: { height: "100%" },
+    list: {
+      display: "flex",
+      flexDirection: "column",
+      flexWrap: "nowrap",
+
+      height: "100%",
+    },
+
     listItem: {
       color: theme.palette.text.secondary,
       minHeight: 48,
@@ -57,13 +68,22 @@ const useStyles = makeStyles((theme) =>
       display: "block",
       color: "inherit",
     },
+
+    createTable: { marginTop: "auto" },
   })
 );
 
-export interface INavDrawerProps extends DrawerProps {}
+export interface INavDrawerProps extends DrawerProps {
+  handleCreateTable: () => void;
+}
 
-export default function NavDrawer(props: INavDrawerProps) {
+export default function NavDrawer({
+  handleCreateTable,
+  ...props
+}: INavDrawerProps) {
   const classes = useStyles();
+  const theme = useTheme();
+  const isSm = useMediaQuery(theme.breakpoints.down("sm"));
 
   const { sections } = useFiretableContext();
   const { location } = useRouter();
@@ -72,7 +92,7 @@ export default function NavDrawer(props: INavDrawerProps) {
   return (
     <Drawer
       open
-      variant="persistent"
+      variant={isSm ? "temporary" : "persistent"}
       {...props}
       classes={{ paper: classes.paper }}
     >
@@ -98,8 +118,8 @@ export default function NavDrawer(props: INavDrawerProps) {
         </Grid>
       </Grid>
 
-      <nav>
-        <List>
+      <nav className={classes.nav}>
+        <List className={classes.list}>
           {sections &&
             Object.keys(sections).map((section) => (
               <li key={section}>
@@ -114,6 +134,7 @@ export default function NavDrawer(props: INavDrawerProps) {
                     root: classes.listItem,
                     selected: classes.listItemSelected,
                   }}
+                  onClick={isSm ? (props.onClose as any) : undefined}
                 >
                   <ListItemText
                     primary={section}
@@ -122,6 +143,22 @@ export default function NavDrawer(props: INavDrawerProps) {
                 </ListItem>
               </li>
             ))}
+
+          <li className={classes.createTable}>
+            <ListItem
+              button
+              onClick={handleCreateTable}
+              classes={{ root: classes.listItem }}
+            >
+              <ListItemIcon>
+                <AddIcon />
+              </ListItemIcon>
+              <ListItemText
+                primary="Create Table"
+                classes={{ primary: classes.listItemText }}
+              />
+            </ListItem>
+          </li>
         </List>
       </nav>
     </Drawer>

www/src/components/HomeNavigation/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import clsx from "clsx";
 import _find from "lodash/find";
 
@@ -25,18 +25,20 @@ const useStyles = makeStyles((theme) =>
     open: {},
 
     navDrawerContainer: {
-      width: 0,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-
-      "$open &": {
-        width: NAV_DRAWER_WIDTH,
+      [theme.breakpoints.up("md")]: {
+        width: 0,
         transition: theme.transitions.create("width", {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen,
         }),
+
+        "$open &": {
+          width: NAV_DRAWER_WIDTH,
+          transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        },
       },
     },
 
@@ -44,16 +46,18 @@ const useStyles = makeStyles((theme) =>
       height: APP_BAR_HEIGHT,
       [theme.breakpoints.down("sm")]: { paddingRight: 0 },
 
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      "$open &": {
-        width: `calc(100% - ${NAV_DRAWER_WIDTH}px)`,
+      [theme.breakpoints.up("md")]: {
         transition: theme.transitions.create("width", {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen,
         }),
+        "$open &": {
+          width: `calc(100% - ${NAV_DRAWER_WIDTH}px)`,
+          transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        },
       },
     },
     maxHeight: {
@@ -81,14 +85,24 @@ const useStyles = makeStyles((theme) =>
   })
 );
 
+export interface IHomeNavigationProps {
+  children: React.ReactNode;
+
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+  handleCreateTable: () => void;
+}
+
 export default function HomeNavigation({
   children,
-}: React.PropsWithChildren<{}>) {
+  open,
+  setOpen,
+  handleCreateTable,
+}: IHomeNavigationProps) {
   const classes = useStyles();
   const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });
 
-  const [open, setOpen] = useState(false);
-
   return (
     <Grid
       container
@@ -97,7 +111,11 @@ export default function HomeNavigation({
       className={clsx(open && classes.open)}
     >
       <Grid item className={classes.navDrawerContainer}>
-        <NavDrawer open={open} onClose={() => setOpen(false)} />
+        <NavDrawer
+          open={open}
+          onClose={() => setOpen(false)}
+          handleCreateTable={handleCreateTable}
+        />
       </Grid>
 
       <Grid item xs>

www/src/views/TablesView.tsx

@@ -107,17 +107,25 @@ const TablesView = () => {
       data: null,
     });
 
-  const { sections, userClaims } = useFiretableContext();
+  const { sections } = useFiretableContext();
   const { userDoc } = useAppContext();
 
   const favs = userDoc.state.doc?.favoriteTables
     ? userDoc.state.doc.favoriteTables
     : [];
 
+  const handleCreateTable = () =>
+    setSettingsDialogState({
+      mode: TableSettingsDialogModes.create,
+      data: null,
+    });
+
+  const [open, setOpen] = useState(false);
+
   const TableCard = ({ table }) => {
     const checked = Boolean(_find(favs, table));
     return (
-      <Grid key={table.name} item xs={12} sm={6} md={4}>
+      <Grid key={table.name} item xs={12} sm={6} md={open ? 6 : 4}>
         <StyledCard
           className={classes.card}
           overline={table.section}
@@ -168,7 +176,11 @@ const TablesView = () => {
   };
 
   return (
-    <HomeNavigation>
+    <HomeNavigation
+      open={open}
+      setOpen={setOpen}
+      handleCreateTable={handleCreateTable}
+    >
       <main className={classes.root}>
         <Container>
           {favs.length !== 0 && (
@@ -230,12 +242,7 @@ const TablesView = () => {
                 className={classes.fab}
                 color="secondary"
                 aria-label="Create table"
-                onClick={() => {
-                  setSettingsDialogState({
-                    mode: TableSettingsDialogModes.create,
-                    data: null,
-                  });
-                }}
+                onClick={handleCreateTable}
               >
                 <AddIcon />
               </Fab>