aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/MainNav/MainNav.module.scss135
-rw-r--r--src/components/MainNav/MainNav.tsx9
-rw-r--r--src/styles/base/_animations.scss44
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%;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 15:13:05 +0000