feat: 🎨remove hooks and update active link component

MacPaw · Oct 10, 2023 · 667c7ed · 667c7ed
1 parent a6960d1
commit 667c7ed
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 30 deletions.
diff --git a/internal/ActiveLink/ActiveLink.js b/internal/ActiveLink/ActiveLink.js
@@ -1,14 +1,11 @@
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
-import styles from './activeLink.module.css';
 import clsx from 'clsx';
 
-const ActiveLink = ({ children, ...props }) => {
+const ActiveLink = ({ children, className, activeClassName, ...props }) => {
   const { asPath, isReady } = useRouter();
-  const [computedClassName, setComputedClassName] = useState(
-    styles.navigationLink
-  );
+  const [computedClassName, setComputedClassName] = useState(className);
 
   useEffect(() => {
     if (isReady) {
@@ -20,11 +17,9 @@ const ActiveLink = ({ children, ...props }) => {
         ''
       );
 
-      const newClassName = clsx(
-        linkPathname === activePathname
-          ? `${styles.activeLink} ${styles.navigationLink}`
-          : styles.navigationLink
-      );
+      const newClassName = clsx(className, {
+        [activeClassName]: linkPathname === activePathname,
+      });
 
       if (newClassName !== computedClassName) {
         setComputedClassName(newClassName);

diff --git a/internal/ActiveLink/activeLink.module.css b/internal/ActiveLink/activeLink.module.css
diff --git a/internal/MobileNavigation/MobileNavigation.js b/internal/MobileNavigation/MobileNavigation.js
@@ -22,11 +22,21 @@ const MobileNavigation = () => {
         className={styles.dropdown}
       >
         <DropdownItem>
-          <ActiveLink href='/docs'>Installation</ActiveLink>
+          <ActiveLink
+            href='/docs'
+            className={styles.navigationLink}
+            activeClassName={styles.activeLink}
+          >
+            Installation
+          </ActiveLink>
         </DropdownItem>
         {pages.map((link) => (
           <DropdownItem key={link}>
-            <ActiveLink href={`/docs/${link}`}>
+            <ActiveLink
+              href={`/docs/${link}`}
+              className={styles.navigationLink}
+              activeClassName={styles.activeLink}
+            >
               {link.replace('-', ' ')}
             </ActiveLink>
           </DropdownItem>

diff --git a/internal/MobileNavigation/mobileNavigation.module.css b/internal/MobileNavigation/mobileNavigation.module.css
@@ -13,6 +13,18 @@
   cursor: pointer;
 }
 
+.navigationLink {
+  margin: 8px 0;
+  display: block;
+  color: #000;
+  text-decoration: none;
+  text-transform: capitalize;
+}
+
+.activeLink {
+  color: #5093ff;
+}
+
 @media screen and (max-width: 1280px) {
   .container {
     display: flex;

diff --git a/internal/Navigation/Navigation.module.css b/internal/Navigation/Navigation.module.css
@@ -22,6 +22,18 @@
   padding: 6px 12px;
 }
 
+.navigationLink {
+  margin: 8px 0;
+  display: block;
+  color: #000;
+  text-decoration: none;
+  text-transform: capitalize;
+}
+
+.activeLink {
+  color: #5093ff;
+}
+
 @media screen and (max-width: 1280px) {
   .navigation {
     display: none;

diff --git a/internal/hooks/useGetFormattedPathname.js b/internal/hooks/useGetFormattedPathname.js