feat(ui/web/navbar): add hover effect

cuhacking · Jan 6, 2025 · c99c9c3 · c99c9c3
1 parent 5ca4fb0
commit c99c9c3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/libs/website/shared/ui/navigation/footer/ui/footer.presenter.tsx b/libs/website/shared/ui/navigation/footer/ui/footer.presenter.tsx
@@ -16,7 +16,11 @@ export function FooterPresenter({ logo, socials }: FooterProps) {
     <footer className="max-w-screen-xl px-4 mx-auto pt-5 pb-3.5 gap-y-6 flex flex-col lg:flex-row justify-center lg:justify-between">
       <div className="flex flex-row items-center justify-center gap-2">
         <Link to="/" aria-label="Return to homepage">
-          <img src={logo} alt="cuHacking logo" />
+          <img
+            src={logo}
+            alt="cuHacking logo"
+            className="transition-transform duration-300 hover:scale-[1.2]"
+          />
         </Link>
         <h2 className="text-transparent bg-greendiant bg-clip-text font-extrabold text-[34px]">
           cuHacking

diff --git a/libs/website/shared/ui/navigation/navbar/ui/nav-item.tsx b/libs/website/shared/ui/navigation/navbar/ui/nav-item.tsx
@@ -1,14 +1,31 @@
+import { cn } from '@cuhacking/shared/utils/cn'
 import { Link } from '@remix-run/react'
+import { cva } from 'class-variance-authority'
 import React from 'react'
 // TODO: Refactor to use <Link> from Remix
+const navItemStyles = cva('text-xs font-bold', {
+  variants: {
+    index: {
+      0: 'text-blue-400',
+      1: 'text-lime-500',
+      2: 'text-yellow-500',
+      3: 'text-red-500',
+    },
+  },
+})
 export function NavItem({ index, link, name }) {
   return (
     <Link to={link}>
-      <span className="text-xs text-border">
-        {String(index + 1).padStart(2, '0')}
-        /
-      </span>
-      {name}
+      <p
+        className="relative text-base before:absolute before:bottom-0 before:left-1/2 before:h-[2px] before:w-0 before:bg-current before:transition-all before:duration-300
+                    before:origin-center hover:before:w-full hover:before:left-0"
+      >
+        <span className={cn(navItemStyles({ index }))}>
+          {String(index + 1).padStart(2, '0')}
+          /
+        </span>
+        {name}
+      </p>
     </Link>
   )
 }
diff --git a/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx b/libs/website/shared/ui/navigation/navbar/ui/navbar.presenter.tsx
@@ -48,7 +48,11 @@ export function NavbarPresenter({
   return (
     <div className="mx-auto max-w-screen-xl px-4 py-2.5 flex justify-between">
       <Link to="/" aria-label="Return to homepage">
-        <img src={logo} alt="cuHacking logo" className="relative z-[60]" />
+        <img
+          src={logo}
+          alt="cuHacking logo"
+          className="transition-transform duration-300 hover:scale-[1.2] relative z-[60]"
+        />
       </Link>
       <NavigationMenu className="hidden md:block">
         <NavigationMenuList className="gap-x-10">

diff --git a/libs/website/shared/ui/socials/socials.tsx b/libs/website/shared/ui/socials/socials.tsx
@@ -22,7 +22,11 @@ export function Socials({ socials, className }: SocialsProps) {
           to={link}
           aria-label="social media link"
         >
-          <Icon media={media} prefix="/socials" />
+          <Icon
+            media={media}
+            prefix="/socials"
+            className="transition-transform duration-300 hover:scale-[1.2]"
+          />
         </Link>
       ))}
     </div>