re-add nav menu, to prevent bad wrapping on iphone

noticed that the left-title and right-nav were running into each other on a standard iphone layout... menu fixes this!

src/app/GlobalHeader.js

@@ -1,5 +1,16 @@
 import React from "react";
-import { Box, Button, HStack, IconButton } from "@chakra-ui/core";
+import {
+  Box,
+  Button,
+  HStack,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  useBreakpointValue,
+} from "@chakra-ui/core";
+import { HamburgerIcon } from "@chakra-ui/icons";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
@@ -107,14 +118,16 @@ function UserNavBarSection() {
             Hi, {username}!
           </Box>
         )}
+        <NavLinksList>
           {id && (
-          <NavButton as={Link} to={`/user/${id}/items`}>
+            <NavLinkItem as={Link} to={`/user/${id}/items`}>
               Items
-          </NavButton>
+            </NavLinkItem>
           )}
-        <NavButton as={Link} to="/modeling">
+          <NavLinkItem as={Link} to="/modeling">
             Modeling
-        </NavButton>
+          </NavLinkItem>
+        </NavLinksList>
         <NavButton onClick={() => logout({ returnTo: window.location.origin })}>
           Log out
         </NavButton>
@@ -132,6 +145,33 @@ function UserNavBarSection() {
   }
 }
 
+function NavLinksList({ children }) {
+  const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
+
+  if (navStyle === "menu") {
+    return (
+      <Menu>
+        <MenuButton>
+          <NavButton icon={<HamburgerIcon />} />
+        </MenuButton>
+        <MenuList>{children}</MenuList>
+      </Menu>
+    );
+  } else {
+    return children;
+  }
+}
+
+function NavLinkItem(props) {
+  const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
+
+  if (navStyle === "menu") {
+    return <MenuItem {...props} />;
+  } else {
+    return <NavButton {...props} />;
+  }
+}
+
 const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
   const Component = icon ? IconButton : Button;