From 06d0b7bb010f5ac1b3a0c8117b274a700f7266fe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 7 Jan 2022 17:46:34 +0100
Subject: chore: add main nav link states

---
 src/components/MainNav/MainNav.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components/MainNav/MainNav.tsx')

diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index 0f5147b..0339a35 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -10,6 +10,7 @@ import {
 } from '@components/Icons';
 import { mainNav } from '@config/nav';
 import styles from './MainNav.module.scss';
+import { useRouter } from 'next/router';
 
 const MainNav = ({
   isOpened,
@@ -18,6 +19,8 @@ const MainNav = ({
   isOpened: boolean;
   setIsOpened: (value: SetStateAction<boolean>) => void;
 }) => {
+  const router = useRouter();
+
   const getIcon = (id: string) => {
     switch (id) {
       case 'home':
@@ -34,10 +37,12 @@ const MainNav = ({
   };
 
   const navItems = mainNav.map((item) => {
+    const currentClass = router.asPath === item.slug ? styles.current : '';
+
     return (
-      <li key={item.id} className={styles.item}>
+      <li key={item.id}>
         <Link href={item.slug}>
-          <a className={styles.link}>
+          <a className={`${styles.link} ${currentClass}`}>
             {getIcon(item.id)}
             <span>{item.name}</span>
           </a>
-- 
cgit v1.2.3