side navigator can now actually link to different places, it is now placed inside the Router

src/pages/PageContainer.tsx

@@ -0,0 +1,61 @@
+import { Container, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import classNames from "classnames";
+import React, { PropsWithChildren } from "react";
+
+const useStyles = makeStyles((theme: Theme) => ({
+  pageContainer: {
+    // border: "1px solid red",
+    width: "100%",
+    overflowX: "hidden",
+    overflowY: "auto",
+    height: `calc(100vh - 112px)`,
+    [theme.breakpoints.up("sm")]: {
+      height: `calc(100vh - 64px)`
+    }
+  },
+  fullViewportContainer: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    height: "100vh",
+    width: "100vw",
+    backgroundColor: theme.palette.background.default,
+    zIndex: 2000,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  centerCenter: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+}))
+
+interface Props extends PropsWithChildren{
+  fullViewport?: boolean;
+  isCenterCenter?: boolean;
+}
+
+export const PageContainer: React.FunctionComponent<Props> = props => {
+  const classes = useStyles();
+  const { children } = props;
+  let fullViewport = false
+  let isCenterCenter = false
+  return (
+    <Container
+      className={classNames(
+        fullViewport ? classes.fullViewportContainer : classes.pageContainer,
+        isCenterCenter && classes.centerCenter
+      )}
+      disableGutters
+      // maxWidth={true}
+      children={<React.Fragment>{children}</React.Fragment>}
+    />
+  );
+};
+
+export default PageContainer;

src/pages/Teams.tsx

@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import { useMobile } from "hooks";
+import PageContainer from "pages/PageContainer";
+// import TeamList from "teams/TeamList";
+
+export default function Teams() {
+  const isMobile = useMobile();
+  return (
+    <PageContainer>
+      <Box paddingY={isMobile ? 0.5 : 1} paddingX={isMobile ? 1 : 2}>
+        {/* <TeamList /> */}
+        Teams!
+      </Box>
+    </PageContainer>
+  );
+}