From e47bec0abc1f8fcbadfbfb4f692de90417d5ecdd Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 3 Nov 2020 19:36:48 -0800
Subject: [PATCH] refactor menu/nav a bit

---
 src/app/GlobalHeader.js | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/GlobalHeader.js b/src/app/GlobalHeader.js
index 375b8224..2571f8ac 100644
--- a/src/app/GlobalHeader.js
+++ b/src/app/GlobalHeader.js
@@ -154,6 +154,12 @@ function UserNavBarSection() {
   }
 }
 
+/**
+ * Renders the given <NavLinkItem /> children as a dropdown menu or as a list
+ * of buttons, depending on the screen size.
+ *
+ * It actually renders both, and shows/hides them by media query!
+ */
 function NavLinksList({ children }) {
   return (
     <>
@@ -163,27 +169,27 @@ function NavLinksList({ children }) {
             <NavButton icon={<HamburgerIcon />} />
           </MenuButton>
           <MenuList>
-            {React.Children.map(children, (c) =>
-              React.cloneElement(c, { listVariant: "menu" })
-            )}
+            {React.Children.map(children, (c) => (
+              <MenuItem {...c.props} />
+            ))}
           </MenuList>
         </Menu>
       </Box>
       <HStack spacing="2" display={{ base: "none", md: "flex" }}>
-        {React.Children.map(children, (c) =>
-          React.cloneElement(c, { listVariant: "buttons" })
-        )}
+        {React.Children.map(children, (c) => (
+          <NavButton {...c.props} />
+        ))}
       </HStack>
     </>
   );
 }
 
-function NavLinkItem({ listVariant, ...props }) {
-  if (listVariant === "menu") {
-    return <MenuItem {...props} />;
-  } else {
-    return <NavButton {...props} />;
-  }
+function NavLinkItem() {
+  throw new Error(
+    `NavLinkItem should only be rendered in a NavLinksList, which should ` +
+      `render it as both a MenuItem or NavButton element. That way, we can ` +
+      `show the best layout depending on a CSS media query!`
+  );
 }
 
 const NavButton = React.forwardRef(({ icon, ...props }, ref) => {