From 64d09f040a2aa5c8a965bc03e6f039bf27919ceb Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 21 Sep 2020 03:31:49 -0700
Subject: [PATCH] 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 | 58 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js
index fd246a7..8b39501 100644
--- a/src/app/GlobalHeader.js
+++ b/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>
         )}
-        {id && (
-          <NavButton as={Link} to={`/user/${id}/items`}>
-            Items
-          </NavButton>
-        )}
-        <NavButton as={Link} to="/modeling">
-          Modeling
-        </NavButton>
+        <NavLinksList>
+          {id && (
+            <NavLinkItem as={Link} to={`/user/${id}/items`}>
+              Items
+            </NavLinkItem>
+          )}
+          <NavLinkItem as={Link} to="/modeling">
+            Modeling
+          </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;