don't hard-code active color; pass as a prop throughout header

nicholeuf · Feb 13, 2024 · 92a393e · 92a393e
1 parent 37e6f42
commit 92a393e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/Header/HeaderLogo.tsx b/src/components/Header/HeaderLogo.tsx
@@ -7,9 +7,10 @@ import { constants } from '@/app/styles/theme';
 interface HeaderLogoProps {
   width: string;
   color: string;
+  activeColor: string;
 }
 
-const HeaderLogo: React.FC<HeaderLogoProps> = ({ width, color }) => {
+const HeaderLogo: React.FC<HeaderLogoProps> = ({ width, color, activeColor }) => {
   return (
     <Box
       sx={{
@@ -32,7 +33,7 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({ width, color }) => {
           textDecoration: 'none',
           color,
           '&:hover': {
-            color: 'primary.main',
+            color: activeColor,
           },
         }}
         component={NextLink}

diff --git a/src/components/Header/Navigation.tsx b/src/components/Header/Navigation.tsx
@@ -13,9 +13,10 @@ const links = [work, about, contact];
 
 interface NavigationProps {
   color: string;
+  activeColor: string;
 }
 
-const Navigation: React.FC<NavigationProps> = ({ color }) => {
+const Navigation: React.FC<NavigationProps> = ({ color, activeColor }) => {
   const pathname = usePathname();
   return (
     <nav>
@@ -29,7 +30,7 @@ const Navigation: React.FC<NavigationProps> = ({ color }) => {
           const isActive = pathname === href;
 
           const borderBottom = isActive
-          ? `${constants.spacing.xs} solid ${constants.colors.guava}`
+          ? `${constants.spacing.xs} solid ${activeColor}`
           : '';
 
           return (
@@ -53,7 +54,7 @@ const Navigation: React.FC<NavigationProps> = ({ color }) => {
                   color,
                   borderBottom,
                   '&:hover': {
-                    color: constants.colors.guava
+                    color: activeColor
                   },
                 }}
               >

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -7,6 +7,7 @@ import { constants } from '@/app/styles/theme';
 
 const Header = () => {
   const color = constants.colors.carob;
+  const activeColor = constants.colors.guava;
   return (
     <AppBar
       position='fixed'
@@ -27,8 +28,9 @@ const Header = () => {
         // width === height of header to make logo a box
         width={constants.header.height} 
         color={color} 
+        activeColor={activeColor}
       />
-      <Navigation color={color} />
+      <Navigation color={color} activeColor={activeColor} />
     </AppBar>
   );
 };