From 2de840b53e3c2d347ff616ca5731d93a56ee5d0c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 3 Nov 2020 14:57:26 -0800
Subject: [PATCH] fix mobile flash-of-wrong-nav-menu

In the previous impl, the buttons variant of the menu would appear on first render, and then the breakpoint stuff would adjust and re-render as the compact nav menu. Now I'm using CSS to show/hide instead!
---
 src/app/GlobalHeader.js | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js
index 5155a3a..375b822 100644
--- a/src/app/GlobalHeader.js
+++ b/src/app/GlobalHeader.js
@@ -155,26 +155,31 @@ 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;
-  }
+  return (
+    <>
+      <Box display={{ base: "block", md: "none" }}>
+        <Menu>
+          <MenuButton>
+            <NavButton icon={<HamburgerIcon />} />
+          </MenuButton>
+          <MenuList>
+            {React.Children.map(children, (c) =>
+              React.cloneElement(c, { listVariant: "menu" })
+            )}
+          </MenuList>
+        </Menu>
+      </Box>
+      <HStack spacing="2" display={{ base: "none", md: "flex" }}>
+        {React.Children.map(children, (c) =>
+          React.cloneElement(c, { listVariant: "buttons" })
+        )}
+      </HStack>
+    </>
+  );
 }
 
-function NavLinkItem(props) {
-  const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
-
-  if (navStyle === "menu") {
+function NavLinkItem({ listVariant, ...props }) {
+  if (listVariant === "menu") {
     return <MenuItem {...props} />;
   } else {
     return <NavButton {...props} />;