feat: gradient color on navbar links

src/assets/css/global.css

@@ -120,3 +120,11 @@ button {
   opacity: 0;
   transition: opacity 400ms;
 }
+
+.gradient {
+  background: linear-gradient(to right, #625cbf, #c55fa3, #fccc50);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}

src/containers/Navbar/Navbar.styles.tsx

@@ -74,17 +74,29 @@ export const StyledNavbar = styled.nav`
   }
 `;
 
-export const NavLink = styled(Link)<{ order?: number; disabled?: boolean }>`
-  text-transform: uppercase;
-  order: ${({ order }) => order ?? "initial"};
+export const NavLinkContainer = styled.div<{ order?: number }>`
   width: 120px;
-  text-align: center;
-  margin: 0 30px;
+  order: ${({ order }) => order ?? "initial"};
+  display: flex;
+  justify-content: center;
+`;
+
+export const NavLink = styled(Link)<{ disabled?: boolean }>`
+  text-transform: uppercase;
+
+  &:hover {
+    background: linear-gradient(to right, #625cbf, #c55fa3, #fccc50);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+
+  margin: 0 auto;
   ${({ disabled }) =>
     disabled &&
     `
     pointer-events: none;
-    opacity: .6;
   `};
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {

src/containers/Navbar/index.tsx

@@ -2,6 +2,7 @@ import {
   LogoContainer,
   MenuButton,
   NavLink,
+  NavLinkContainer,
   StyledNavbar,
   WonderLogo,
 } from "./Navbar.styles";
@@ -42,6 +43,22 @@ interface NavbarProps {}
 
 export const Navbar = ({}: NavbarProps) => {
   const [showNavbar, setShowNavbar] = useState(false);
+  const [navLink, setNavLink] = useState(navLinks);
+
+  const handleClick = (i: number) => {
+    setShowNavbar(!showNavbar);
+
+    // reset values
+    const newNavLink = navLink.map((link) => ({
+      name: link.name,
+      url: link.url,
+      disabled: false,
+    }));
+
+    newNavLink[i].disabled = true;
+    setNavLink(newNavLink);
+  };
+
   return (
     <StyledNavbar id={showNavbar ? "show" : ""}>
       <LogoContainer>
@@ -53,17 +70,21 @@ export const Navbar = ({}: NavbarProps) => {
         </MenuButton>
       </LogoContainer>
 
-      {navLinks.map((link, i) => (
-        <NavLink
-          id={showNavbar ? "" : "hide"}
-          to={link.url}
-          order={i + 1}
-          key={link.name}
-          disabled={link.disabled}
-          onClick={() => setShowNavbar(!showNavbar)}
-        >
-          {link.name}
-        </NavLink>
+      {navLink.map((link, i) => (
+        <NavLinkContainer order={i + 1}>
+          <NavLink
+            id={showNavbar ? "" : "hide"}
+            to={link.url}
+            key={link.name}
+            disabled={link.disabled}
+            className={link.disabled ? "gradient" : ""}
+            onClick={() => {
+              handleClick(i);
+            }}
+          >
+            {link.name}
+          </NavLink>
+        </NavLinkContainer>
       ))}
     </StyledNavbar>
   );

src/pages/Intro/index.tsx

@@ -10,7 +10,7 @@ import {
   NAVBAR_INDEX,
   Section,
 } from "~/components/common";
-import LogoImage from "~/assets/Logo.png";
+import LogoImage from "~/assets/Logo.svg";
 import KEYHOLE from "~/assets/key.png";
 import VLINE from "~/assets/dotted_line.svg";
 import INTROKEY from "~/assets/intro_key.svg";