fix nav for mobile

frontend-react/src/components/calendar/CalendarPage.tsx

@@ -1,14 +1,9 @@
 import { useQuery } from "@apollo/react-hooks"
 import { Badge, Box, Divider, Flex } from "@chakra-ui/core"
 import { RouteComponentProps, useLocation } from "@reach/router"
-import React, {
-  useContext,
-  useState,
-  useRef,
-  useEffect,
-  useLayoutEffect,
-} from "react"
+import React, { useContext, useEffect, useRef, useState } from "react"
 import { Helmet } from "react-helmet-async"
+import { FaFilter } from "react-icons/fa"
 import {
   UpcomingEventsData,
   UPCOMING_EVENTS,
@@ -20,9 +15,8 @@ import Error from "../common/Error"
 import Loading from "../common/Loading"
 import PageHeader from "../common/PageHeader"
 import SubHeader from "../common/SubHeader"
-import TournamentInfo from "./TournamentInfo"
 import Input from "../elements/Input"
-import { FaFilter } from "react-icons/fa"
+import TournamentInfo from "./TournamentInfo"
 
 const badgeColor: { [key: string]: string } = {
   Friday: "purple",

frontend-react/src/components/root/MobileNav.tsx

@@ -5,6 +5,7 @@ import {
   DrawerCloseButton,
   useColorMode,
   DrawerOverlay,
+  Box,
 } from "@chakra-ui/core"
 
 import { SideNavContent } from "./SideNavContent"
@@ -27,8 +28,10 @@ const MobileNav: React.FC<MobileNavProps> = ({ btnRef, isOpen, onClose }) => {
     >
       <DrawerOverlay />
       <DrawerContent bg={bgColor[colorMode]}>
-        <DrawerCloseButton />
-        <SideNavContent showLogo={false} />
+        <Box overflowX="hidden" mx="auto">
+          <DrawerCloseButton />
+          <SideNavContent isMobile />
+        </Box>
       </DrawerContent>
     </Drawer>
   )

frontend-react/src/components/root/SideNavBanner.tsx

@@ -6,7 +6,11 @@ import { BANNERS, BannersData } from "../../graphql/queries/banners"
 import IconButton from "../elements/IconButton"
 import Markdown from "../elements/Markdown"
 
-const SideNavBanner: React.FC = () => {
+interface SideNavBannerProps {
+  showClose?: boolean
+}
+
+const SideNavBanner: React.FC<SideNavBannerProps> = ({ showClose = true }) => {
   const [closed, setClosed] = useState(false)
   const { data } = useQuery<BannersData>(BANNERS)
 
@@ -27,25 +31,27 @@ const SideNavBanner: React.FC = () => {
       borderRadius="5px"
       p="1em"
       backgroundColor={banner.bgColor}
-      mt="2em"
+      my="2em"
       color={banner.textColor}
       w="200px"
       mx="auto"
       textAlign="center"
     >
-      <Box position="absolute" right="30px" mt="-10px">
-        <IconButton
-          icon={IoMdClose}
-          size="md"
-          onClick={() => {
-            setClosed(true)
-            localStorage.setItem(
-              "closedBanners",
-              JSON.stringify(closedBannerIds.concat(banner.id))
-            )
-          }}
-        />
-      </Box>
+      {showClose && (
+        <Box position="absolute" right="30px" mt="-10px">
+          <IconButton
+            icon={IoMdClose}
+            size="md"
+            onClick={() => {
+              setClosed(true)
+              localStorage.setItem(
+                "closedBanners",
+                JSON.stringify(closedBannerIds.concat(banner.id))
+              )
+            }}
+          />
+        </Box>
+      )}
       <Image src={banner.logoUrl} maxW="50%" mb="0.5em" minH="50px" mx="auto" />
 
       <Markdown value={banner.description} />

frontend-react/src/components/root/SideNavContent.tsx

@@ -115,10 +115,12 @@ const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
 }
 
 interface SideNavProps {
-  showLogo?: boolean
+  isMobile?: boolean
 }
 
-export const SideNavContent: React.FC<SideNavProps> = ({ showLogo = true }) => {
+export const SideNavContent: React.FC<SideNavProps> = ({
+  isMobile = false,
+}) => {
   const { colorMode, toggleColorMode } = useColorMode()
   const { data, error, loading } = useQuery<UserData>(USER)
 
@@ -133,13 +135,38 @@ export const SideNavContent: React.FC<SideNavProps> = ({ showLogo = true }) => {
       alignItems="center"
     >
       <Flex direction="column">
-        {showLogo && (
+        {!isMobile && (
           <Flex alignSelf="center">
             <Link to="/">
               <Logo />
             </Link>
           </Flex>
         )}
+        {isMobile && (
+          <Flex align="flex-end" direction="column" alignItems="center">
+            <DividingBox location="bottom" margin="0.7em">
+              <Flex
+                alignSelf="center"
+                alignItems="center"
+                justifyContent="center"
+                flexBasis="100%"
+              >
+                <IconButton
+                  aria-label={`Switch to ${
+                    colorMode === "light" ? "dark" : "light"
+                  } mode`}
+                  variant="ghost"
+                  color="current"
+                  fontSize="20px"
+                  onClick={toggleColorMode}
+                  icon={colorMode === "light" ? FiSun : FiMoon}
+                />
+                <ColorPicker />
+              </Flex>
+            </DividingBox>
+            {!loading && !error && <UserItem data={data} />}
+          </Flex>
+        )}
         <List mt="2em">
           <NavItem to="plans" icon={FiMap} title="Map Planner" />
           <NavItem to="calendar" icon={FiCalendar} title="Calendar" />
@@ -159,31 +186,33 @@ export const SideNavContent: React.FC<SideNavProps> = ({ showLogo = true }) => {
             <NavItem to="plus" icon={FiPlus} title="Plus Server" />
           )}
         </List>
-        <SideNavBanner />
-      </Flex>
-      <Flex align="flex-end" direction="column" alignItems="center">
-        <DividingBox location="bottom" margin="0.7em">
-          <Flex
-            alignSelf="center"
-            alignItems="center"
-            justifyContent="center"
-            flexBasis="100%"
-          >
-            <IconButton
-              aria-label={`Switch to ${
-                colorMode === "light" ? "dark" : "light"
-              } mode`}
-              variant="ghost"
-              color="current"
-              fontSize="20px"
-              onClick={toggleColorMode}
-              icon={colorMode === "light" ? FiSun : FiMoon}
-            />
-            <ColorPicker />
-          </Flex>
-        </DividingBox>
-        {!loading && !error && <UserItem data={data} />}
+        <SideNavBanner showClose={!isMobile} />
       </Flex>
+      {!isMobile && (
+        <Flex align="flex-end" direction="column" alignItems="center">
+          <DividingBox location="bottom" margin="0.7em">
+            <Flex
+              alignSelf="center"
+              alignItems="center"
+              justifyContent="center"
+              flexBasis="100%"
+            >
+              <IconButton
+                aria-label={`Switch to ${
+                  colorMode === "light" ? "dark" : "light"
+                } mode`}
+                variant="ghost"
+                color="current"
+                fontSize="20px"
+                onClick={toggleColorMode}
+                icon={colorMode === "light" ? FiSun : FiMoon}
+              />
+              <ColorPicker />
+            </Flex>
+          </DividingBox>
+          {!loading && !error && <UserItem data={data} />}
+        </Flex>
+      )}
     </Flex>
   )
 }