Fixing navbar hover and active page state

Author: mariana-caldas

.gitignore

@@ -1,4 +1,5 @@
 .next
 node_modules
 .env
+.DS_Store
 

components/Nav.js

@@ -4,8 +4,10 @@ import Image from 'next/image';
 import Container from './Container';
 import styles from '../styles/Nav.module.scss';
 import { linksNav } from '../utils/links';
+import { useRouter } from 'next/router';
 
 export default function Nav() {
+  const router = useRouter();
   const [active, setActive] = useState(false);
   const headerRef = useRef();
   const containerRef = useRef();
@@ -62,7 +64,12 @@ export default function Nav() {
                   return (
                     <li className={styles.nav__item} key={id}>
                       <Link href={href}>
-                        <a className={styles.nav__link} title={text}>
+                        <a
+                          className={`${styles.nav__link} ${
+                            router.pathname == href ? `${styles.current}` : ''
+                          }`}
+                          title={text}
+                        >
                           {text}
                         </a>
                       </Link>

styles/Nav.module.scss

@@ -116,6 +116,22 @@
     line-height: 2.5;
     font-weight: 400;
     display: block;
+    @include transition(all 0.3s ease);
+
+    &:hover,
+    &.current {
+      font-weight: 600;
+    }
+
+    &:before {
+      display: block;
+      content: attr(title);
+      font-weight: bold;
+      height: 1px;
+      color: transparent;
+      overflow: hidden;
+      visibility: hidden;
+    }
 
     @include large-desktop {
       font-size: 1.5rem;
@@ -143,7 +159,7 @@
       width: 25px;
       height: 2px;
       margin: 5px auto;
-      transition: all 0.3s ease-in-out;
+      @include transition(opacity 0.3s ease);
       background-color: $white;
     }