Merge pull request #73 from ecss-soton/fade-in-on-hover

Fade-in-on-hover and logo
ecss-soton · Sep 11, 2024 · fffd974 · fffd974
2 parents 93d4301 + 93c57e8
commit fffd974
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/src/app/_components/Header/Nav/index.module.scss b/src/app/_components/Header/Nav/index.module.scss
@@ -20,6 +20,19 @@
   color: red;
 }
 
+.fadeIn {
+  span {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 300ms ease, transform 300ms ease;
+  }
+
+  &:hover span {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .hide {
   opacity: 0;
   visibility: hidden;

diff --git a/src/app/_components/Header/Nav/index.tsx b/src/app/_components/Header/Nav/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { CssVariable } from '@next/font'
 import { Inter } from '@next/font/google'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -36,18 +37,24 @@ export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
       {navItems.map(({ link }, i) => {
         const slug = (link.reference?.value as Page)?.slug
         const isActive = link.url === currentPath || `/${slug}` === currentPath
-        const label = isActive ? (
-          <>
-            <span className={classes.redBrackets}>[&nbsp;</span>
+        const style: React.CSSProperties = isActive
+          ? {
+              color: 'red',
+              opacity: 1,
+            }
+          : {
+              color: 'red',
+            }
+        const label = (
+          <div className={classes.fadeIn}>
+            <span style={style} className={classes.redBrackets}>
+              [&nbsp;
+            </span>
             {link.label}
-            <span className={classes.redBrackets}>&nbsp;]</span>
-          </>
-        ) : (
-          <>
-            <span className={classes.redBrackets}>&nbsp;&nbsp;</span>
-            {link.label}
-            <span className={classes.redBrackets}>&nbsp;&nbsp;</span>
-          </>
+            <span style={style} className={classes.redBrackets}>
+              &nbsp;]
+            </span>
+          </div>
         )
         return <CMSLink key={i} {...link} label={label} appearance="header" />
       })}

diff --git a/src/app/_components/Header/index.module.scss b/src/app/_components/Header/index.module.scss
@@ -31,6 +31,11 @@
 .logo {
   width: 100px;
   height: 100px;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.2); // Scale the logo to 120% on hover
+  }
 }
 
 .title {