Fixed bug in Header and added react router support

Author: FinnIckler

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewca/wca-components",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "The WCA React Component Library",
   "repository": {
     "type": "git",
@@ -30,6 +30,7 @@
     "@types/react-dom": "^18.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.12.0",
     "fomantic-ui-css": "^2.9.2"
   },
   "devDependencies": {

package.json

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
 import UiIcon from '../UiIcon'
 
 interface Item {
   path: string
   title: string
   icon: string
   isDivider?: false
+  reactRoute?: boolean
 }
 
 interface Divider {
@@ -28,15 +30,12 @@ export default function Dropdown({
   items,
 }: DropdownProps) {
   const [hovered, setHovered] = useState(false)
-  const toggleHover = () => setHovered(!hovered)
-
   const close = () => setHovered(false)
-
   return (
     <li
       className={`dropdown ${active ? 'active' : ''} ${hovered ? 'open' : ''}`}
-      onMouseEnter={toggleHover}
-      onMouseLeave={toggleHover}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
     >
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" onClick={close} className="dropdown-toggle top-nav">
@@ -50,11 +49,17 @@ export default function Dropdown({
             // eslint-disable-next-line react/no-array-index-key
             return <li key={`divider-${index}`} className="divider" />
           }
+          // Now we know we have an item
+          const { title, reactRoute, path, icon } = item as Item
           return (
-            <li key={(item as Item).title}>
-              <a href={(item as Item).path}>
-                <UiIcon name={(item as Item).icon} /> {(item as Item).title}
-              </a>
+            <li key={title}>
+              {reactRoute ? (
+                <Link to={path} title={title} />
+              ) : (
+                <a href={path}>
+                  <UiIcon name={icon} /> {title}
+                </a>
+              )}
             </li>
           )
         })}