Merge pull request #98 from KUIT-MAPU/feat/97-GlobalNavigationBar-Ico…

…n-On/Off

Feat/97 global navigation bar icon on/off

src/components/global/GlobalNavigationBar.module.scss

@@ -44,10 +44,6 @@
   border-bottom: 1px solid var(--gray_50);
 }
 
-.userIconContainer {
-  background-color: var(--gray_50);
-}
-
 .icon {
   color: var(--white);
   font-size: 24px;
@@ -78,3 +74,12 @@
   justify-content: center;
   z-index: 1000;
 }
+
+.iconContainer_on {
+  background-color: var(--gray_50);
+}
+
+.iconContainer_off {
+  background-color: var(--white);
+}
+

src/components/global/GlobalNavigationBar.tsx

@@ -1,20 +1,23 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import AuthContainer from '../login/AuthContainer';
 import useRegisterStore from '../../stores/registerStore';
 import { RegisterStatus } from '../../types/enum/RegisterStatus';
 
 import styles from './GlobalNavigationBar.module.scss';
 import { ReactComponent as MapuLogo } from '../../assets/mapu-logo.svg';
-import { ReactComponent as Home } from '../../assets/home.svg';
-import { ReactComponent as Explore } from '../../assets/explore.svg';
+import { ReactComponent as Home_off } from '../../assets/btn_home_off.svg';
+import { ReactComponent as Home_on } from '../../assets/btn_home_on.svg';
+import { ReactComponent as Explore_off } from '../../assets/btn_explore_off.svg';
+import { ReactComponent as Explore_on } from '../../assets/btn_explore_on.svg';
 import { ReactComponent as User } from '../../assets/user.svg';
 import { ReactComponent as Login } from '../../assets/login.svg';
 
 const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
   const [isLog, setIsLog] = useState<boolean>(false);
   const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
+  const location = useLocation();
 
   const { loginNeeded, registerStatus, setLoginNeeded } = useRegisterStore();
 
@@ -39,26 +42,37 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
     setLoginNeeded(true);
     setIsOverlayVisible(true);
   };
+
+  const isHomeActive = location.pathname === '/timeline';
+  const isExploreActive = location.pathname === '/explore';
+  const isUserpageActive = location.pathname === '/user/:userId';
+
   return (
     <div className={styles.container}>
       <div className={styles.LeftSideBar}>
         <div className={styles.logoIconContainer}>
           <MapuLogo className={styles.icon} />
         </div>
         <Link to="/timeline" className={styles.link}>
-          <div className={styles.iconContainer}>
-            <Home className={styles.icon} />
+          <div className={`${styles.iconContainer} ${isHomeActive ? styles.iconContainer_on : styles.iconContainer_off}`}>
+            {isHomeActive ? (
+              <Home_on className={styles.icon} />
+            ) : (
+              <Home_off className={styles.icon} />
+            )}
           </div>
         </Link>
         <Link to="/explore" className={styles.link}>
-          <div className={styles.iconContainer}>
-            <Explore className={styles.icon} />
+          <div className={`${styles.iconContainer} ${isExploreActive ? styles.iconContainer_on : styles.iconContainer_off}`}>
+          {isExploreActive ? (
+              <Explore_on className={styles.icon} />
+            ) : (
+              <Explore_off className={styles.icon} />
+            )}
           </div>
         </Link>
         <Link to="/user/:userId" className={styles.link}>
-          <div
-            className={`${styles.iconContainer} ${styles.userIconContainer}`}
-          >
+        <div className={`${styles.iconContainer} ${isUserpageActive ? styles.iconContainer_on : styles.iconContainer_off}`}>
             <User className={styles.icon} />
           </div>
         </Link>

src/components/userProfile/followModal/Following.module.scss

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;