client: add small theme-toggle button

Casuals4Fun · Apr 4, 2024 · 01d3cbe · 01d3cbe
1 parent 9f5c1c8
commit 01d3cbe
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 26 deletions.
diff --git a/client/src/components/button/toggle-theme.tsx b/client/src/components/button/toggle-theme.tsx
@@ -11,7 +11,7 @@ const ToggleTheme = () => {
     }
 
     return (
-        <div className='theme__button'>
+        <div className='theme__button' title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}>
             <input
                 id="toggle"
                 className='toggle-activator'

diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -18,8 +18,9 @@
 }
 
 #left-sidebar .profile__container {
+    position: fixed;
+    bottom: 20px;
     display: none;
-    padding-bottom: 20px;
 }
 
 #left-sidebar ul {
@@ -126,7 +127,24 @@
     }
 
     #left-sidebar .profile__container {
-        display: block;
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    #left-sidebar .profile__container .theme-btn {
+        display: grid;
+        background-color: transparent;
+    }
+
+    #left-sidebar .profile__container .theme-btn .sun {
+        width: 67.5%;
+        height: 67.5%;
+    }
+
+    #left-sidebar .profile__container .theme-btn .moon {
+        width: 82.5%;
+        height: 82.5%;
     }
 }
 

diff --git a/client/src/components/sidebar/left-sidebar.tsx b/client/src/components/sidebar/left-sidebar.tsx
@@ -1,14 +1,17 @@
 import "./left-sidebar.css";
 import { useLocation, Link, useNavigate } from "react-router-dom";
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore";
+import { Theme, useNavStore } from "../../store/useNavStore";
 import { leftSidebarLinks } from "../../data/left-sidebar-links";
 import Profile from "./profile";
+import { GoPerson } from "react-icons/go";
 
 const LeftSidebar = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
   const { setRoute, isAuthenticated, setAuthTab } = useAuthStore();
+  const { theme, setTheme } = useNavStore();
 
   const handleLinkClick = (href: string, name: string) => {
     if (name === "Create Debate") {
@@ -22,6 +25,12 @@ const LeftSidebar = () => {
     else navigate(href);
   };
 
+  const handleToggleTheme = () => {
+    const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+    document.querySelector("body")?.setAttribute('data-theme', newTheme);
+    setTheme(newTheme);
+  }
+
   return (
     <div id='left-sidebar'>
       <Link to='/' className='logo__wrapper'>
@@ -41,14 +50,22 @@ const LeftSidebar = () => {
         ))}
       </ul>
       <div className='profile__container'>
-        {/* {isAuthenticated === AuthStatus.Authenticated ? (
+        {isAuthenticated === AuthStatus.Authenticated ? (
           <Profile />
         ) : (
-          <button style={{ marginBottom: '6px' }} onClick={() => setAuthTab(AuthTab.Login)}>
-            <GoPerson size={30} />
-          </button>
-        )} */}
-        <Profile />
+          <>
+            <button
+              className='theme-btn'
+              onClick={handleToggleTheme}
+              title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
+            >
+              {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
+            </button>
+            <button onClick={() => setAuthTab(AuthTab.Login)}>
+              <GoPerson size={30} />
+            </button>
+          </>
+        )}
       </div>
     </div>
   )

diff --git a/client/src/components/sidebar/profile.css b/client/src/components/sidebar/profile.css
@@ -22,15 +22,10 @@
     font-size: 17.5px;
     background-color: var(--explore_input_bg);
     color: var(--body_color);
-    transition: 0.2s ease-in-out;
-}
-
-.profile__wrapper .login-btn:hover {
-    background-color: var(--body_color);
-    color: var(--body_background);
 }
 
 .profile__image,
+.theme-btn,
 .modal-profile__image {
     width: 40px;
     height: 40px;
@@ -42,6 +37,12 @@
     flex-shrink: 0;
 }
 
+
+.theme-btn {
+    display: none;
+    background-color: var(--explore_input_bg);
+}
+
 .modal-profile__image {
     width: 45px;
     height: 45px;
@@ -55,6 +56,18 @@
     object-fit: cover;
 }
 
+.theme-btn .sun {
+    width: 50%;
+    height: 50%;
+    object-fit: cover;
+}
+
+.theme-btn .moon {
+    width: 65%;
+    height: 65%;
+    object-fit: cover;
+}
+
 .modal-profile__info {
     display: flex;
     flex-direction: column;
@@ -158,4 +171,8 @@
         border-bottom: 1px solid var(--nav_border);
         border-radius: 0;
     }
-}
+
+    .theme-btn {
+        display: grid;
+    }
+}
diff --git a/client/src/components/sidebar/profile.tsx b/client/src/components/sidebar/profile.tsx
@@ -1,7 +1,7 @@
 import "./profile.css";
 import { useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { useNavStore } from "../../store/useNavStore";
+import { Theme, useNavStore } from "../../store/useNavStore";
 import { AuthStatus, AuthTab, useAuthStore } from "../../store/useAuthStore";
 import ToggleTheme from "../button/toggle-theme";
 import useLogout from "../../hooks/useLogout";
@@ -13,9 +13,15 @@ import { FaRegUser } from "react-icons/fa";
 
 const Profile = () => {
     const navigate = useNavigate();
-    const { expand, setExpand } = useNavStore();
+    const { expand, setExpand, theme, setTheme } = useNavStore();
     const { isAuthenticated, setIsAuthenticated, user, setUser, authTab, setAuthTab } = useAuthStore();
 
+    const handleToggleTheme = () => {
+        const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light;
+        document.querySelector("body")?.setAttribute('data-theme', newTheme);
+        setTheme(newTheme);
+    }
+
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             const target = event.target as HTMLElement;
@@ -55,14 +61,23 @@ const Profile = () => {
                     )}
                 </div>
             ) : (
-                <button
-                    className='login-btn'
-                    style={{ border: `${authTab !== AuthTab.Closed ? '2px solid var(--body_color)' : ''}` }}
-                    onClick={() => setAuthTab(AuthTab.Login)}
-                >
-                    <GoPerson size={20} />
-                    <p>Login</p>
-                </button>
+                <>
+                    <button
+                        className='theme-btn'
+                        onClick={handleToggleTheme}
+                        title={theme === Theme.Dark ? 'Switch to Light mode' : 'Switch to Dark mode'}
+                    >
+                        {theme === Theme.Dark ? <img className="sun" src="theme/sun.svg" alt="" /> : <img className="moon" src="theme/moon.png" alt="" />}
+                    </button>
+                    <button
+                        className='login-btn'
+                        style={{ border: `${authTab !== AuthTab.Closed ? '2px solid var(--body_color)' : ''}` }}
+                        onClick={() => setAuthTab(AuthTab.Login)}
+                    >
+                        <GoPerson size={20} />
+                        <p>Login</p>
+                    </button>
+                </>
             )}
 
             {expand && (