wtf

barkmanui/src/common/components/BarkHeader.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Burger, Container, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import classes from './BarkHeader.module.css';
+import {NavLink} from "react-router";
 
 const links = [
     { link: '/', label: 'Home' },
@@ -10,21 +11,12 @@ const links = [
 
 export function BarkHeader() {
     const [opened, { toggle }] = useDisclosure(false);
-    const [active, setActive] = useState(links[0].link);
 
     const items = links.map((link) => (
-        <a
-            key={link.label}
-            href={link.link}
-            className={classes.link}
-            data-active={active === link.link || undefined}
-            onClick={(event) => {
-                event.preventDefault();
-                setActive(link.link);
-            }}
-        >
+        <NavLink className = {({ isActive }) =>
+                classes.link + ' ' + (isActive ? classes.active : '')} to={link.link} >
             {link.label}
-        </a>
+        </NavLink>
     ));
 
     return (