From 3a273a3c02eba796e04e23a016d176b008a723f8 Mon Sep 17 00:00:00 2001 From: jyc0328 Date: Sat, 10 Aug 2024 19:15:08 +0900 Subject: [PATCH 1/2] feat: Home icon on/off implemented --- src/assets/{home.svg => btn_home_off.svg} | 0 src/assets/btn_home_on.svg | 8 +++++++ .../global/GlobalNavigationBar.module.scss | 12 +++++++---- src/components/global/GlobalNavigationBar.tsx | 21 ++++++++++++++----- 4 files changed, 32 insertions(+), 9 deletions(-) rename src/assets/{home.svg => btn_home_off.svg} (100%) create mode 100644 src/assets/btn_home_on.svg diff --git a/src/assets/home.svg b/src/assets/btn_home_off.svg similarity index 100% rename from src/assets/home.svg rename to src/assets/btn_home_off.svg diff --git a/src/assets/btn_home_on.svg b/src/assets/btn_home_on.svg new file mode 100644 index 0000000..6940f9d --- /dev/null +++ b/src/assets/btn_home_on.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss index f9bdf8d..f246b4b 100644 --- a/src/components/global/GlobalNavigationBar.module.scss +++ b/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,11 @@ justify-content: center; z-index: 1000; } + +.iconContainer_on { + background-color: var(--gray_50); +} + +.iconContainer_off { + background-color: var(--white); +} \ No newline at end of file diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index 8b239ab..d2dcc8a 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,7 +7,8 @@ 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 Home_off } from '../../assets/btn_home_off.svg'; +import { ReactComponent as Home_on } from '../../assets/btn_home_on.svg'; import { ReactComponent as Explore } from '../../assets/explore.svg'; import { ReactComponent as User } from '../../assets/user.svg'; import { ReactComponent as Login } from '../../assets/login.svg'; @@ -15,6 +16,7 @@ import { ReactComponent as Login } from '../../assets/login.svg'; const GlobalNavigationBar = (props: { children?: React.ReactNode }) => { const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); + const location = useLocation(); const { loginNeeded, registerStatus, setLoginNeeded } = useRegisterStore(); @@ -39,6 +41,11 @@ 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 (
@@ -46,8 +53,12 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
-
- +
+ {isHomeActive ? ( + + ) : ( + + )}
@@ -57,7 +68,7 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
From 66f7dd886f40f85044677608f26da1f3dd143cce Mon Sep 17 00:00:00 2001 From: jyc0328 Date: Sat, 10 Aug 2024 20:07:42 +0900 Subject: [PATCH 2/2] feat: explore,user on/off implemented --- src/assets/{explore.svg => btn_explore_off.svg} | 0 src/assets/btn_explore_on.svg | 8 ++++++++ .../global/GlobalNavigationBar.module.scss | 3 ++- src/components/global/GlobalNavigationBar.tsx | 15 +++++++++------ .../userProfile/followModal/Following.module.scss | 2 +- 5 files changed, 20 insertions(+), 8 deletions(-) rename src/assets/{explore.svg => btn_explore_off.svg} (100%) create mode 100644 src/assets/btn_explore_on.svg diff --git a/src/assets/explore.svg b/src/assets/btn_explore_off.svg similarity index 100% rename from src/assets/explore.svg rename to src/assets/btn_explore_off.svg diff --git a/src/assets/btn_explore_on.svg b/src/assets/btn_explore_on.svg new file mode 100644 index 0000000..d12e7fe --- /dev/null +++ b/src/assets/btn_explore_on.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss index f246b4b..d5255be 100644 --- a/src/components/global/GlobalNavigationBar.module.scss +++ b/src/components/global/GlobalNavigationBar.module.scss @@ -81,4 +81,5 @@ .iconContainer_off { background-color: var(--white); -} \ No newline at end of file +} + diff --git a/src/components/global/GlobalNavigationBar.tsx b/src/components/global/GlobalNavigationBar.tsx index d2dcc8a..62d6e02 100644 --- a/src/components/global/GlobalNavigationBar.tsx +++ b/src/components/global/GlobalNavigationBar.tsx @@ -9,7 +9,8 @@ import styles from './GlobalNavigationBar.module.scss'; import { ReactComponent as MapuLogo } from '../../assets/mapu-logo.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 } from '../../assets/explore.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'; @@ -62,14 +63,16 @@ const GlobalNavigationBar = (props: { children?: React.ReactNode }) => {
-
- +
+ {isExploreActive ? ( + + ) : ( + + )}
-
+
diff --git a/src/components/userProfile/followModal/Following.module.scss b/src/components/userProfile/followModal/Following.module.scss index 1bd59bb..fc7ed6f 100644 --- a/src/components/userProfile/followModal/Following.module.scss +++ b/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;