From 8355de89f0e7b24e17efca3d9da6b614f3d7732e Mon Sep 17 00:00:00 2001 From: Yashsaraswat2004 Date: Fri, 14 Mar 2025 01:26:51 +0530 Subject: [PATCH 1/4] feature Added : Hamburger menu on learn page for small screens Signed-off-by: Yashsaraswat2004 --- src/components/Sidebar.tsx | 18 +++++++++++++---- src/index.css | 19 ++++++++++++++++++ src/pages/LearnNow.tsx | 33 +++++++++++++++++++++++++++++--- src/styles/components/Sidebar.ts | 28 +++++++++++++++++++++++++-- 4 files changed, 89 insertions(+), 9 deletions(-) diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index d64b2caf..d7e6b74d 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -10,15 +10,25 @@ import { HelperIcon, HelperText, DividerLine, + CloseButton, } from "../styles/components/Sidebar"; -import { BulbOutlined } from "@ant-design/icons"; +import { BulbOutlined, CloseOutlined } from "@ant-design/icons"; -const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({ +const Sidebar: React.FC<{ steps: { title: string; link: string }[], isOpen?: boolean, toggleSidebar: () => void }> = ({ steps, + isOpen, + toggleSidebar, }) => { return ( - - Learning Pathway + + + Learning Pathway + {isOpen && ( + + + + )} + {steps.map((step, index) => ( diff --git a/src/index.css b/src/index.css index 203d8bb9..ab2a6fdd 100644 --- a/src/index.css +++ b/src/index.css @@ -26,4 +26,23 @@ html[data-theme="light"] { --active-text-color: #1b2540; --hover-bg-color: #e0e0e0; --hover-text-color: #050c40; +} +.hamburger-menu { + display: none; + font-size: 30px; + cursor: pointer; + position: fixed !important; + top: 80px; + right: 40px; + z-index: 1000; +} + +.hamburger-hidden { + transform: translateY(-120px); +} + +@media (max-width:768px) { + .hamburger-menu { + display: block; + } } \ No newline at end of file diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx index 594a128c..3e009d54 100644 --- a/src/pages/LearnNow.tsx +++ b/src/pages/LearnNow.tsx @@ -1,14 +1,41 @@ -import React from "react"; +import React, {useState, useEffect} from "react"; import { Outlet } from "react-router-dom"; import Sidebar from "../components/Sidebar"; import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow"; import { steps } from "../constants/learningSteps/steps"; const LearnNow: React.FC = () => { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const [isVisible, setIsVisible] = useState(true); + let lastScrollY = 0; + + useEffect(() => { + const handleScroll = () => { + const currentScrollY = window.scrollY; + if (currentScrollY > lastScrollY) { + setIsVisible(false); + } else { + setIsVisible(true); + } + lastScrollY = currentScrollY; + }; + + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const toggleSidebar = () => { + setIsSidebarOpen(!isSidebarOpen); + } return ( - - + {!isSidebarOpen && ( +
+ ☰ +
+ )} + + diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts index 81136a41..6f18fd3d 100644 --- a/src/styles/components/Sidebar.ts +++ b/src/styles/components/Sidebar.ts @@ -9,11 +9,20 @@ export const SidebarContainer = styled.div` border-radius: 4px; position: relative; overflow-y: auto; - border-right: 1px solid #ddd; + transition: transform 0.3s ease; + @media (max-width: 768px) { width: 100%; height: auto; - position: static; + position: fixed !important; + top: 0; + right: 0; + transform: translateX(100%); + z-index: 999; + } + + &.active { + transform: translateX(0); } `; @@ -22,6 +31,21 @@ export const SidebarTitle = styled.h2` font-weight: 500; margin-bottom: 1rem; color: var(--text-color) !important; + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const CloseButton = styled.button` + background: none; + border: none; + font-size: 1.2rem; + cursor: pointer; + display: none; + + @media (max-width: 768px) { + display: block; + } `; export const SidebarList = styled.ul` From 259b706531c988791c6aa8c375fa8845d90575ec Mon Sep 17 00:00:00 2001 From: Yashsaraswat2004 Date: Fri, 14 Mar 2025 09:49:05 +0530 Subject: [PATCH 2/4] Resolved Merge conflicts Signed-off-by: Yashsaraswat2004 --- src/pages/LearnNow.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx index 3e009d54..763e4cb7 100644 --- a/src/pages/LearnNow.tsx +++ b/src/pages/LearnNow.tsx @@ -1,7 +1,7 @@ import React, {useState, useEffect} from "react"; import { Outlet } from "react-router-dom"; import Sidebar from "../components/Sidebar"; -import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow"; +import { LearnNowContainer} from "../styles/pages/LearnNow"; import { steps } from "../constants/learningSteps/steps"; const LearnNow: React.FC = () => { @@ -34,12 +34,8 @@ const LearnNow: React.FC = () => { ☰ )} - - - - ); }; From 195bc2f99e12b0350f707543c60a26c344664351 Mon Sep 17 00:00:00 2001 From: Yashsaraswat2004 Date: Fri, 14 Mar 2025 10:32:05 +0530 Subject: [PATCH 3/4] Fix: Resolve merge conflicts, apply dark mode to hamburger menu, and minor bug fixes Signed-off-by: Yashsaraswat2004 --- src/index.css | 3 +++ src/pages/LearnNow.tsx | 4 +++- src/styles/components/Sidebar.ts | 2 ++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index ab2a6fdd..d18cdba5 100644 --- a/src/index.css +++ b/src/index.css @@ -16,6 +16,7 @@ html[data-theme="dark"] { --active-text-color: #ffffff; --hover-bg-color: #444444; --hover-text-color: #ffffff; + --icon-color: #ffffff; } html[data-theme="light"] { @@ -26,6 +27,7 @@ html[data-theme="light"] { --active-text-color: #1b2540; --hover-bg-color: #e0e0e0; --hover-text-color: #050c40; + --icon-color: #121212; } .hamburger-menu { display: none; @@ -35,6 +37,7 @@ html[data-theme="light"] { top: 80px; right: 40px; z-index: 1000; + color: var(--icon-color); } .hamburger-hidden { diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx index 763e4cb7..880e0e8b 100644 --- a/src/pages/LearnNow.tsx +++ b/src/pages/LearnNow.tsx @@ -1,7 +1,7 @@ import React, {useState, useEffect} from "react"; import { Outlet } from "react-router-dom"; import Sidebar from "../components/Sidebar"; -import { LearnNowContainer} from "../styles/pages/LearnNow"; +import { LearnNowContainer, ContentContainer} from "../styles/pages/LearnNow"; import { steps } from "../constants/learningSteps/steps"; const LearnNow: React.FC = () => { @@ -35,7 +35,9 @@ const LearnNow: React.FC = () => { )} + + ); }; diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts index 6f18fd3d..2db7aeb7 100644 --- a/src/styles/components/Sidebar.ts +++ b/src/styles/components/Sidebar.ts @@ -9,6 +9,7 @@ export const SidebarContainer = styled.div` border-radius: 4px; position: relative; overflow-y: auto; + border-right: 1px solid #ddd; transition: transform 0.3s ease; @media (max-width: 768px) { @@ -42,6 +43,7 @@ export const CloseButton = styled.button` font-size: 1.2rem; cursor: pointer; display: none; + color: var(--icon-color); @media (max-width: 768px) { display: block; From 7f5feb610b73bf62c1a53aeaf3e6bf63d3542334 Mon Sep 17 00:00:00 2001 From: Yashsaraswat2004 Date: Wed, 19 Mar 2025 10:56:59 +0530 Subject: [PATCH 4/4] fix: initialize theme on app load to resolve sidebar background Signed-off-by: Yashsaraswat2004 --- src/App.tsx | 8 ++++++++ src/components/ToggleDarkMode.tsx | 3 ++- src/styles/components/Sidebar.ts | 4 ++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d65e6f29..049fad07 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -93,8 +93,16 @@ const App = () => { } }, [searchParams]); +useEffect(() => { + const savedTheme = localStorage.getItem("theme") || "light"; + document.documentElement.setAttribute("data-theme", savedTheme); + useAppStore.setState({ + backgroundColor: savedTheme === "dark" ? "#121212" : "#ffffff", + }); +}, []); + const panels = [ { key: "templateMark", diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx index d3bd390b..d545bb0a 100644 --- a/src/components/ToggleDarkMode.tsx +++ b/src/components/ToggleDarkMode.tsx @@ -13,9 +13,10 @@ const ToggleDarkMode: React.FC = () => { const handleChange = () => { toggleDarkMode(); - setIsDarkMode((prev) => !prev); const newTheme = !isDarkMode ? "dark" : "light"; + localStorage.setItem("theme", newTheme); document.documentElement.setAttribute("data-theme", newTheme); + setIsDarkMode((prev) => !prev); }; return ( diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts index 2db7aeb7..ed7eacbd 100644 --- a/src/styles/components/Sidebar.ts +++ b/src/styles/components/Sidebar.ts @@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom"; export const SidebarContainer = styled.div` width: 260px; - background-color: var(--bg-color) !important; + background-color: var(--bg-color); padding: 1rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); border-radius: 4px; @@ -16,7 +16,7 @@ export const SidebarContainer = styled.div` width: 100%; height: auto; position: fixed !important; - top: 0; + top: 20; right: 0; transform: translateX(100%); z-index: 999;