Merge pull request #9 from taxepfa/dev

Improve nav link colors

components/Header.module.css

@@ -45,7 +45,8 @@
 
   @media (pointer: fine) {
     &:hover {
-      color: var(--mantine-color-blue-light-color);
+      color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+      text-decoration: underline;
     }
   }
 }

components/NavLink.module.css

@@ -1,26 +1,7 @@
-.root {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    height: rem(4px);
-    left: rem(2px);
-    width: calc(100% - rem(2px));
-    background: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-    top: rem(-8px);
-    transform: scaleY(0);
-    transform-origin: top;
-    transition: all 0.2s ease;
-
-    @media (min-width: $mantine-breakpoint-xs) {
-      transform-origin: bottom;
-      top: auto;
-      bottom: rem(-8px);
-    }
+.current {
+  &,
+  &:focus,
+  &:not(:hover) {
+    color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-blue-4));
   }
 }
-
-.current::after {
-  transform: scaleY(1);
-}

components/NavLink.tsx

@@ -19,13 +19,9 @@ export function NavLink({ className, textClassName, href, icon, text }: NavLinkP
     <Link href={href} passHref legacyBehavior>
       <Box
         component="a"
-        className={clsx(
-          classes.root,
-          {
-            [classes.current]: href === usePathname(),
-          },
-          className
-        )}
+        className={clsx(className, {
+          [classes.current]: href === usePathname(),
+        })}
       >
         {icon}
         <div className={textClassName}>{text}</div>