hide SideDrawer on mobiles

www/src/components/Navigation.tsx

@@ -17,10 +17,7 @@ import {
 } from "@material-ui/core";
 import HomeIcon from "@material-ui/icons/Home";
 
-import SideDrawer, {
-  DRAWER_COLLAPSED_WIDTH,
-  DRAWER_WIDTH,
-} from "components/SideDrawer";
+import { DRAWER_COLLAPSED_WIDTH } from "components/SideDrawer";
 
 import { useFiretableContext, Table } from "contexts/firetableContext";
 
@@ -29,9 +26,10 @@ export const APP_BAR_HEIGHT = 56;
 const useStyles = makeStyles(theme =>
   createStyles({
     appBar: {
-      paddingRight: ({ sideDrawerOpen }: { sideDrawerOpen?: boolean }) =>
-        sideDrawerOpen ? DRAWER_WIDTH : DRAWER_COLLAPSED_WIDTH,
+      paddingRight: DRAWER_COLLAPSED_WIDTH,
       height: APP_BAR_HEIGHT,
+
+      [theme.breakpoints.down("sm")]: { paddingRight: 0 },
     },
 
     maxHeight: {
@@ -67,13 +65,8 @@ export default function Navigation({
   children,
   tableCollection,
 }: React.PropsWithChildren<{ tableCollection: string }>) {
-  const {
-    tables,
-    sections,
-    userClaims,
-    sideDrawerOpen,
-  } = useFiretableContext();
-  const classes = useStyles({ sideDrawerOpen });
+  const { tables, sections, userClaims } = useFiretableContext();
+  const classes = useStyles();
 
   // Find the matching section for the current route
   const section = _find(tables, ["collection", tableCollection?.split("/")[0]])
@@ -200,8 +193,6 @@ export default function Navigation({
             </Button> */}
         </Toolbar>
       </AppBar>
-
-      <SideDrawer />
     </>
   );
 }

www/src/components/Table/TableHeader.tsx

@@ -28,6 +28,11 @@ const useStyles = makeStyles(theme =>
       margin: 0,
       padding: theme.spacing(0, 3.5, 0, 1),
       minHeight: TABLE_HEADER_HEIGHT,
+
+      [theme.breakpoints.down("sm")]: {
+        width: "100%",
+        paddingRight: theme.spacing(1),
+      },
     },
     collectionName: { textTransform: "uppercase" },
 

www/src/components/Table/index.tsx

@@ -2,6 +2,8 @@ import React, { lazy, Suspense, useEffect, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import _isEmpty from "lodash/isEmpty";
 
+import { useTheme } from "@material-ui/core";
+
 import "react-data-grid/dist/react-data-grid.css";
 import DataGrid, {
   Column,
@@ -45,6 +47,7 @@ interface Props {
 
 function Table(props: Props) {
   useStyles();
+  const theme = useTheme();
   const finalColumnClasses = useFinalColumnStyles();
 
   const { collection, filters } = props;
@@ -129,6 +132,11 @@ function Table(props: Props) {
 
   const inSubTable = collection.split("/").length > 1;
 
+  let tableWidth: any = `calc(100% - ${
+    sideDrawerOpen ? DRAWER_WIDTH : DRAWER_COLLAPSED_WIDTH
+  }px)`;
+  if (windowSize.width < theme.breakpoints.values.md) tableWidth = "100%";
+
   return (
     <EditorProvider>
       <Suspense fallback={<Loading message="Loading header" />}>
@@ -162,11 +170,7 @@ function Table(props: Props) {
           // TODO: Investigate why setting a numeric value causes
           // LOADING to pop up on screen when scrolling horizontally
           // width={windowSize.width - DRAWER_COLLAPSED_WIDTH}
-          minWidth={
-            `calc(100% - ${
-              sideDrawerOpen ? DRAWER_WIDTH : DRAWER_COLLAPSED_WIDTH
-            }px)` as any
-          }
+          minWidth={tableWidth}
           minHeight={
             windowSize.height -
             APP_BAR_HEIGHT * 2 -

www/src/views/TableView.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import queryString from "query-string";
-import Navigation from "../components/Navigation";
-import Table from "../components/Table";
 
-import { FireTableFilter } from "../hooks/useFiretable";
+import { Hidden } from "@material-ui/core";
 
-import useRouter from "../hooks/useRouter";
+import Navigation from "components/Navigation";
+import Table from "components/Table";
+import SideDrawer from "components/SideDrawer";
+
+import { FireTableFilter } from "hooks/useFiretable";
+import useRouter from "hooks/useRouter";
 
 export default function TableView() {
   const router = useRouter();
@@ -21,6 +24,7 @@ export default function TableView() {
     filters = JSON.parse(parsed.filters);
     //TODO: json schema validator
   }
+
   return (
     <Navigation tableCollection={tableCollection}>
       <Table
@@ -28,6 +32,10 @@ export default function TableView() {
         collection={tableCollection}
         filters={filters}
       />
+
+      <Hidden smDown>
+        <SideDrawer />
+      </Hidden>
     </Navigation>
   );
 }