fix recursive NavDropdown

ayan4m1 · Apr 12, 2024 · 27b9d2c · 27b9d2c
1 parent 857fbb8
commit 27b9d2c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 19 deletions.
diff --git a/src/components/header.js b/src/components/header.js
@@ -58,7 +58,7 @@ export default function Header() {
         <Navbar.Toggle />
         <Navbar.Collapse>
           <Nav className="ms-2">
-            <NavDropdown icon={faNewspaper} label="Articles">
+            <NavDropdown icon={faNewspaper} title="Articles">
               {data.allArticleCategoriesJson.nodes.map((category) => (
                 <NavLink
                   key={category.name}
@@ -67,9 +67,14 @@ export default function Header() {
                 />
               ))}
             </NavDropdown>
-            <NavLink icon={faFileArchive} label="Projects" topLevel />
-            <NavLink icon={faHeart} label="Things I Love" topLevel />
-            <NavDropdown icon={faGamepad} label="Games">
+            <NavLink
+              icon={faFileArchive}
+              label="Projects"
+              topLevel
+              to="/projects"
+            />
+            <NavLink icon={faHeart} label="Things I Love" topLevel to="/love" />
+            <NavDropdown icon={faGamepad} title="Games">
               <NavLink to="/games/sudoku" icon={faTable} label="Sudoku" />
               <NavLink
                 to="/games/mahjong"
@@ -82,7 +87,7 @@ export default function Header() {
                 label="Coloree"
               />
             </NavDropdown>
-            <NavDropdown icon={faWrench} label="Utilities">
+            <NavDropdown icon={faWrench} title="Utilities">
               <NavLink
                 to="/utilities/bom-sheet-maker"
                 icon={faTable}

diff --git a/src/components/nav/dropdown.js b/src/components/nav/dropdown.js
@@ -1,32 +1,24 @@
 import { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { NavDropdown as BsNavDropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import NavLink from 'components/nav/link';
-
-export default function NavDropdown({ links = [], icon, title }) {
+export default function NavDropdown({ children, icon, title }) {
   return (
-    <NavDropdown
+    <BsNavDropdown
       title={
         <Fragment>
           {Boolean(icon) && <FontAwesomeIcon icon={icon} />} {title}
         </Fragment>
       }
     >
-      {links.map(({ name, title }) => (
-        <NavLink key={name} to={`/${name}`} label={title} />
-      ))}
-    </NavDropdown>
+      {children}
+    </BsNavDropdown>
   );
 }
 
 NavDropdown.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      title: PropTypes.string
-    })
-  ).isRequired,
+  children: PropTypes.node.isRequired,
   icon: PropTypes.object,
   title: PropTypes.string.isRequired
 };