feature Added : Hamburger menu on learn page for small screens

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",

src/components/Sidebar.tsx

@@ -10,16 +10,25 @@ import {
   HelperIcon,
   HelperText,
   DividerLine,
+  CloseButton,
 } from "../styles/components/Sidebar";
-import { BulbOutlined } from "@ant-design/icons";
+import { BulbOutlined, CloseOutlined } from "@ant-design/icons";
 
-interface SidebarProps {
-  steps: { title: string; link: string }[];
-}
-const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
+const Sidebar: React.FC<{ steps: { title: string; link: string }[], isOpen?: boolean, toggleSidebar: () => void }> = ({
+  steps,
+  isOpen,
+  toggleSidebar,
+}) => {
   return (
-    <SidebarContainer>
-      <SidebarTitle>Learning Pathway</SidebarTitle>
+    <SidebarContainer className={isOpen ? "active" : ""}>
+      <SidebarTitle>
+      Learning Pathway
+      {isOpen && ( 
+        <CloseButton onClick={toggleSidebar}>
+          <CloseOutlined />
+        </CloseButton> 
+      )}
+      </SidebarTitle>
       <SidebarList>
         {steps.map((step, index) => (
           <SidebarListItem key={index}>

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 (

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,4 +27,25 @@ html[data-theme="light"] {
     --active-text-color: #1b2540; 
     --hover-bg-color: #e0e0e0;
     --hover-text-color: #050c40;
+    --icon-color: #121212;
+}
+.hamburger-menu {
+  display: none;
+  font-size: 30px;
+  cursor: pointer;
+  position: fixed !important;
+  top: 80px;
+  right: 40px;
+  z-index: 1000;
+  color: var(--icon-color);
+}
+
+.hamburger-hidden {
+  transform: translateY(-120px);
+}
+
+@media (max-width:768px) {
+  .hamburger-menu {
+    display: block;
+  }
 }

src/pages/LearnNow.tsx

@@ -1,16 +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 { LearnNowContainer, 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 (
     <LearnNowContainer>
-      <SidebarContainer>
-        <Sidebar steps={steps} />
-      </SidebarContainer>
-      <ContentContainer>
+    {!isSidebarOpen && ( 
+      <div className={`hamburger-menu ${isVisible ? "" : "hamburger-hidden"}`} onClick={toggleSidebar}>
+        &#9776;
+      </div>
+    )}
+        <Sidebar steps={steps} isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+        <ContentContainer>
         <Outlet />
       </ContentContainer>
     </LearnNowContainer>

src/styles/components/Sidebar.ts

@@ -3,17 +3,27 @@ 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;
   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: 20;
+    right: 0;
+    transform: translateX(100%);
+    z-index: 999;
+  }
+
+  &.active {
+    transform: translateX(0);
   }
 `;
 
@@ -22,6 +32,22 @@ 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;
+  color: var(--icon-color);
+
+  @media (max-width: 768px) {
+    display: block;
+  }
 `;
 
 export const SidebarList = styled.ul`