From 7aea1ead45a648867b67169b76d7f7411ec14bda Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nrk@kindly.ai>
Date: Sun, 6 Feb 2022 21:10:37 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Active=20styles=20for=20log=20an?=
 =?UTF-8?q?d=20stats?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index d7bd7bd..39a9322 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -7,6 +7,11 @@ import { NavLink } from "react-router-dom";
 import { ReactComponent as Logo } from "../assets/brick.svg";
 import styles from "./Header.module.css";
 
+interface NavLinkStyleProps {
+  isActive: boolean;
+}
+const navLinkStyles = ({ isActive }: NavLinkStyleProps) => (isActive ? "nav-link active" : "nav-link");
+
 export const Header: React.FC = () => {
   return (
     <header>
@@ -31,7 +36,7 @@ export const Header: React.FC = () => {
         <div className="collapse navbar-collapse" id="navbarNav">
           <ul className="navbar-nav">
             <li className="nav-item">
-              <NavLink to="/" className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")} end>
+              <NavLink to="/" className={navLinkStyles} end>
                 <span className={styles.navIcon}>
                   <House />
                 </span>{" "}
@@ -39,25 +44,25 @@ export const Header: React.FC = () => {
               </NavLink>
             </li>
             <li className="nav-item">
-              <NavLink to="/deposit" className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}>
+              <NavLink to="/deposit" className={navLinkStyles}>
                 Sett inn penger
               </NavLink>
             </li>
             <li className="nav-item">
-              <a href="/log" className="nav-link">
+              <NavLink to="/log" className={navLinkStyles}>
                 <span className={styles.navIcon}>
                   <CardList />
                 </span>{" "}
                 Logg
-              </a>
+              </NavLink>
             </li>
             <li className="nav-item">
-              <a href="/stats" className="nav-link">
+              <NavLink to="/stats" className={navLinkStyles}>
                 <span className={styles.navIcon}>
                   <BarChart />
                 </span>{" "}
                 Statistikk
-              </a>
+              </NavLink>
             </li>
           </ul>
         </div>