fix: dark mode persistence on Learn page (#183)

* fix(navbar): implement responsive collapse at 955px

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix(navbar): implement responsive collapse at 955px

- Add mobile-first responsive navbar
- Preserve help dropdown functionality
- Optimize logo/text hierarchy

Closes #172

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: dark mode persistence on Learn page

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* feat: add additional style changes for Learn page consistency

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

* fix: remove console.log and revert unrelated navbar changes

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

---------

Signed-off-by: Yashsaraswat2004 <saraswatyash2004@gmail.com>

Author: yashsaraswat2004

src/components/Navbar.tsx

@@ -254,4 +254,4 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
   );
 }
 
-export default Navbar;
+export default Navbar;

src/components/Sidebar.tsx

@@ -49,4 +49,4 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
   );
 };
 
-export default Sidebar;
+export default Sidebar;

src/components/ToggleDarkMode.tsx

@@ -14,6 +14,8 @@ const ToggleDarkMode: React.FC = () => {
   const handleChange = () => {
     toggleDarkMode();
     setIsDarkMode((prev) => !prev);
+    const newTheme = !isDarkMode ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", newTheme);
   };
 
   return (

src/index.css

@@ -7,3 +7,23 @@ body {
   margin: 0;
   padding: 0;
 }
+
+html[data-theme="dark"] {
+    --bg-color: #121212;
+    --text-color: #ffffff;
+    --border-color: #444444;
+    --active-bg-color: #333333;
+    --active-text-color: #ffffff; 
+    --hover-bg-color: #444444;
+    --hover-text-color: #ffffff;
+}
+
+html[data-theme="light"] {
+    --bg-color: #ffffff;
+    --text-color: #121212;
+    --border-color: #ddd;
+    --active-bg-color: #e0e0e0;
+    --active-text-color: #1b2540; 
+    --hover-bg-color: #e0e0e0;
+    --hover-text-color: #050c40;
+}

src/pages/LearnNow.tsx

@@ -1,14 +1,18 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
 import Sidebar from "../components/Sidebar";
-import { LearnNowContainer } from "../styles/pages/LearnNow";
+import { LearnNowContainer, SidebarContainer, ContentContainer } from "../styles/pages/LearnNow";
 import { steps } from "../constants/learningSteps/steps";
 
 const LearnNow: React.FC = () => {
   return (
     <LearnNowContainer>
-      <Sidebar steps={steps} />
-      <Outlet />
+      <SidebarContainer>
+        <Sidebar steps={steps} />
+      </SidebarContainer>
+      <ContentContainer>
+        <Outlet />
+      </ContentContainer>
     </LearnNowContainer>
   );
 };

src/styles/components/Content.ts

@@ -5,7 +5,7 @@ export const ContentContainer = styled.div`
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
-  background: #ffffff;
+  background-color: var(--bg-color) !important;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
@@ -18,12 +18,13 @@ export const ContentContainer = styled.div`
   h6 {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    color: #333;
+    color: var(--text-color) !important;
   }
 
   p {
     line-height: 1.6;
     margin-bottom: 1em;
+    color: var(--text-color) !important;
   }
 
   a {
@@ -41,6 +42,7 @@ export const ContentContainer = styled.div`
 
     li {
       margin-bottom: 0.5em;
+      color: var(--text-color) !important;
     }
   }
 

src/styles/components/Sidebar.ts

@@ -3,13 +3,13 @@ import { NavLink } from "react-router-dom";
 
 export const SidebarContainer = styled.div`
   width: 260px;
-  background-color: #f5f5f5;
+  background-color: var(--bg-color) !important;
   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;
   @media (max-width: 768px) {
     width: 100%;
     height: auto;
@@ -21,7 +21,7 @@ export const SidebarTitle = styled.h2`
   font-size: 1.2rem;
   font-weight: 500;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text-color) !important;
 `;
 
 export const SidebarList = styled.ul`
@@ -41,19 +41,19 @@ export const SidebarLink = styled(NavLink)`
   border-radius: 4px;
   font-size: 0.95rem;
   font-weight: 600;
-  color: #717171;
+  color: var(--text-color) !important;
   transition: background-color 0.3s, color 0.3s;
 
   &.active {
-    background-color: #e0e0e0;
-    color: #1b2540;
+    background-color: var(--active-bg-color) !important;
+    color: var(--active-text-color) !important;
     font-weight: 600;
     border-left: 2.5px solid #19c6c7;
   }
 
   &:hover {
-    background-color: #e0e0e0;
-    color: #050c40;
+    background-color: var(--hover-bg-color) !important;
+    color: var(--hover-text-color) !important;
     text-decoration: underline;
   }
 `;
@@ -81,7 +81,7 @@ export const HelperText = styled.div`
   color: #333;
 
   a {
-    color: #19c6c7;
+    color: #19c6c7 !important;
     text-decoration: none;
 
     &:hover {
@@ -98,4 +98,4 @@ export const DividerLine = styled.div`
   height: 1px;
   background-color: #ddd;
   margin: 7rem 0 1rem 0;
-`;
+`;

src/styles/pages/LearnNow.ts

@@ -6,9 +6,9 @@ export const LearnNowContainer = styled.div`
 
 export const SidebarContainer = styled.div`
   width: 250px;
-  background-color: #f4f4f4;
-  padding: 20px;
-  border-right: 1px solid #ddd;
+  background-color: var(--bg-color) !important; 
+  padding: 0;
+  border-right: 1px solid var(--border-color) !important;
 
   h2 {
     margin-top: 0;
@@ -25,11 +25,13 @@ export const SidebarContainer = styled.div`
 
   a {
     text-decoration: none;
-    color: #333;
+    color: var(--text-color) !important; 
   }
 `;
 
 export const ContentContainer = styled.div`
   flex: 1;
   padding: 20px;
+  background-color: var(--bg-color) !important; 
+  color: var(--text-color) !important;
 `;