feat: header animated-underline

martapanc · Jul 5, 2023 · fa5a5ca · fa5a5ca
1 parent 6f93da4
commit fa5a5ca
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -58,13 +58,7 @@ export default function Header() {
           <nav className='m-4 flex w-full items-center justify-between'>
             <UnstyledLink
               href='/'
-              className={`font-bold 
-            ${
-              theme === 'dark'
-                ? 'text-blue-50 hover:text-blue-200'
-                : 'text-slate-900 hover:text-slate-700'
-            } 
-          `}
+              className='font-bold text-slate-900 hover:text-slate-700 dark:text-blue-50 dark:hover:text-blue-200'
             >
               Home
             </UnstyledLink>
@@ -74,11 +68,7 @@ export default function Header() {
                 <li key={`${href}${label}`}>
                   <UnstyledLink
                     href={href}
-                    className={`${
-                      theme === 'dark'
-                        ? 'text-blue-50 hover:text-blue-200'
-                        : 'text-slate-900 hover:text-slate-700'
-                    }`}
+                    className='animated-underline-2 dark:animated-underline rounded-sm font-medium text-slate-950 dark:text-blue-50'
                   >
                     {label}
                   </UnstyledLink>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -115,15 +115,32 @@
     background-position: 100% 100%, 0 100%;
     background-repeat: no-repeat;
   }
+
+  .animated-underline-2 {
+    background-image: linear-gradient(#33333300, #33333300),
+      linear-gradient(
+        to right,
+        var(--color-primary-600),
+        var(--color-primary-800)
+      );
+    background-size: 100% 2px, 0 2px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    padding-bottom: 3px;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
-    .animated-underline {
+    .animated-underline,
+    .animated-underline-2 {
       transition: 0.3s ease;
       transition-property: background-size, color, background-color,
         border-color;
     }
   }
   .animated-underline:hover,
-  .animated-underline:focus-visible {
+  .animated-underline-2:hover,
+  .animated-underline:focus-visible,
+  .animated-underline-2:focus-visible {
     background-size: 0 2px, 100% 2px;
   }
 }