chore: add main nav link states

3 files changed, 184 insertions, 4 deletions

diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 8bd730f..22ffe22 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -108,9 +108,12 @@
 }
 
 .link {
+  --draw-border-width: #{fun.convert-px(4)};
+
   display: block;
-  padding: var(--spacing-xs) var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
   background: var(--color-bg);
+  background-repeat: no-repeat;
   font-size: var(--font-size-sm);
   font-variant: small-caps;
   font-weight: 600;
@@ -122,7 +125,135 @@
     }
 
     @include mix.dimensions("md") {
-      background: inherit;
+      margin: 0 var(--spacing-2xs);
+      background-color: inherit;
+      border-radius: 8%;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-image: linear-gradient(
+        to right,
+        var(--color-primary-lighter),
+        var(--color-primary-light)
+      ),
+      linear-gradient(
+        to bottom,
+        var(--color-primary-light),
+        var(--color-primary-lighter)
+      ),
+      linear-gradient(
+        to left,
+        var(--color-primary-lighter),
+        var(--color-primary-light)
+      ),
+      linear-gradient(
+        to top,
+        var(--color-primary-light),
+        var(--color-primary-lighter)
+      );
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 100% var(--draw-border-width),
+      var(--draw-border-width) 100%, 100% var(--draw-border-width),
+      var(--draw-border-width) 100%;
+    color: var(--color-primary-light);
+
+    :global {
+      animation: draw-borders 0.8s linear 1 0s;
+    }
+  }
+
+  &:focus {
+    color: var(--color-primary-light);
+  }
+
+  &:active {
+    background-image: linear-gradient(
+        to right,
+        var(--color-primary-light),
+        var(--color-primary-dark)
+      ),
+      linear-gradient(
+        to bottom,
+        var(--color-primary-dark),
+        var(--color-primary-light)
+      ),
+      linear-gradient(
+        to left,
+        var(--color-primary-light),
+        var(--color-primary-dark)
+      ),
+      linear-gradient(
+        to top,
+        var(--color-primary-dark),
+        var(--color-primary-light)
+      );
+    background-position: top left, top right, bottom right, bottom left;
+  }
+
+  &.current {
+    background-image: linear-gradient(to right, transparent, transparent),
+      linear-gradient(to bottom, transparent, transparent),
+      linear-gradient(
+        to left,
+        var(--color-primary-lighter),
+        var(--color-primary-light)
+      ),
+      linear-gradient(to top, transparent, transparent);
+    background-position: top left, top right, bottom center, bottom left;
+    background-size: 0% var(--draw-border-width), var(--draw-border-width) 0%,
+      60% var(--draw-border-width), var(--draw-border-width) 0%;
+    transition: all 0.3s linear 0s;
+
+    &:hover,
+    &:focus {
+      background-image: linear-gradient(
+          to right,
+          var(--color-primary-lighter),
+          var(--color-primary-light)
+        ),
+        linear-gradient(
+          to bottom,
+          var(--color-primary-light),
+          var(--color-primary-lighter)
+        ),
+        linear-gradient(
+          to left,
+          var(--color-primary-lighter),
+          var(--color-primary-light)
+        ),
+        linear-gradient(
+          to top,
+          var(--color-primary-light),
+          var(--color-primary-lighter)
+        );
+      background-size: 100% var(--draw-border-width),
+        var(--draw-border-width) 100%, 100% var(--draw-border-width),
+        var(--draw-border-width) 100%;
+    }
+
+    &:active {
+      background-image: linear-gradient(
+          to right,
+          var(--color-primary-light),
+          var(--color-primary-dark)
+        ),
+        linear-gradient(
+          to bottom,
+          var(--color-primary-dark),
+          var(--color-primary-light)
+        ),
+        linear-gradient(
+          to left,
+          var(--color-primary-light),
+          var(--color-primary-dark)
+        ),
+        linear-gradient(
+          to top,
+          var(--color-primary-dark),
+          var(--color-primary-light)
+        );
     }
   }
 }
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>
diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 903645f..3485729 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/functions" as fun;
+
 @keyframes pulse {
   from {
     transform: scale(1);
@@ -11,3 +13,45 @@
     transform: scale(1);
   }
 }
+
+@keyframes draw-borders {
+  0% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%;
+  }
+
+  25% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%;
+  }
+
+  50% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+
+  75% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+
+  100% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+}