From 437c7a517fd0fe2f4263eb13ade2dc8ac9a833c4 Mon Sep 17 00:00:00 2001 From: muhtadeetaron Date: Wed, 4 Mar 2026 03:22:22 +0600 Subject: [PATCH] feat: Quests page responsiveness and sidebar enhancements --- src/components/AppSidebar.tsx | 348 ++++++++++++++++-- src/components/LessonModal.tsx | 6 + src/components/lessons/LessonShell.tsx | 20 +- src/pages/student/Lessons.tsx | 9 + src/pages/student/QuestMap.tsx | 16 + src/pages/student/Rewards.tsx | 2 +- .../lessons/CirclePropertiesLesson.tsx | 2 +- .../student/lessons/CollectingDataLesson.tsx | 2 +- .../lessons/CongruenceSimilarityLesson.tsx | 2 +- .../student/lessons/DataAnalysisLesson.tsx | 2 +- .../lessons/DataRepresentationLesson.tsx | 2 +- .../student/lessons/EBRWCommasLesson.tsx | 2 +- .../lessons/EBRWCraftStructureLesson.tsx | 2 +- .../lessons/EBRWDashesApostrophesLesson.tsx | 2 +- .../lessons/EBRWExplicitMeaningLesson.tsx | 2 +- .../lessons/EBRWExpressionIdeasLesson.tsx | 2 +- .../lessons/EBRWGraphicDisplaysLesson.tsx | 2 +- .../student/lessons/EBRWInferencesLesson.tsx | 2 +- .../student/lessons/EBRWMainIdeaLesson.tsx | 2 +- .../student/lessons/EBRWPronounsLesson.tsx | 2 +- .../lessons/EBRWSemicolonsColonsLesson.tsx | 2 +- .../lessons/EBRWSentenceStructureLesson.tsx | 2 +- .../student/lessons/EBRWSubjectVerbLesson.tsx | 2 +- .../student/lessons/EBRWTransitionsLesson.tsx | 2 +- src/pages/student/lessons/EBRWVerbsLesson.tsx | 2 +- .../lessons/EBRWVocabMeaningLesson.tsx | 2 +- .../lessons/EBRWVocabPreciseLesson.tsx | 2 +- .../LinearParallelPerpendicularLesson.tsx | 2 +- .../lessons/LinearTransformationsLesson.tsx | 2 +- .../student/lessons/LinesAnglesLesson.tsx | 2 +- .../lessons/PolynomialFunctionsLesson.tsx | 2 +- .../student/lessons/ProportionalLesson.tsx | 2 +- .../lessons/QuadraticEquationsLesson.tsx | 2 +- .../student/lessons/RationalRadicalLesson.tsx | 2 +- .../lessons/SystemsEquationsLesson.tsx | 2 +- src/pages/student/lessons/TrigLesson.tsx | 2 +- src/pages/student/targeted-practice/page.tsx | 2 +- 37 files changed, 398 insertions(+), 65 deletions(-) diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx index f228123..066fdd0 100644 --- a/src/components/AppSidebar.tsx +++ b/src/components/AppSidebar.tsx @@ -1,5 +1,4 @@ import { - Sidebar, SidebarContent, SidebarHeader, SidebarFooter, @@ -19,11 +18,12 @@ import { Target, Zap, Trophy, + Map, } from "lucide-react"; import { useState } from "react"; import logo from "../assets/ed_logo1.png"; -import { NavLink, useNavigate } from "react-router-dom"; +import { NavLink, useNavigate, useLocation } from "react-router-dom"; import { useAuthStore } from "../stores/authStore"; import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"; @@ -31,16 +31,199 @@ export function AppSidebar() { const [open, setOpen] = useState(false); const user = useAuthStore((s) => s.user); const navigate = useNavigate(); + const location = useLocation(); + const isQuestPage = location.pathname.startsWith("/student/quests"); + + const STYLES = ` + /* ══ DEFAULT sidebar (cream frosted glass) ══ */ + .as-sidebar-container { + position: fixed; + top: 0.5rem; + bottom: 0.5rem; + left: 0.5rem; + width: 16rem; + z-index: 10; + border-radius: 1.75rem; + overflow: hidden; + pointer-events: auto; + background: rgba(255,251,244,0.72); + backdrop-filter: blur(24px) saturate(180%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + border: 1.5px solid rgba(255,255,255,0.7); + box-shadow: + 0 8px 32px rgba(0,0,0,0.12), + 0 2px 8px rgba(0,0,0,0.06), + inset 0 1px 0 rgba(255,255,255,0.8); + transition: + background 0.4s ease, + border-color 0.4s ease, + box-shadow 0.4s ease, + z-index 0.3s ease; + display: flex; + flex-direction: column; + height: calc(100vh - 1rem); + } + + /* ══ QUEST mode sidebar (dark navy pirate + gold) ══ */ + .as-sidebar-container.quest-mode { + background: linear-gradient( + 180deg, + rgba(251,191,36,0.12) 0%, + rgba(251,191,36,0.08) 50%, + rgba(251,191,36,0.1) 100% + ); + background-size: 100% 200%; + animation: asSweepDown 3s linear infinite; + border-color: rgba(251,191,36,0.28); + box-shadow: + 0 8px 32px rgba(0,0,0,0.25), + 0 2px 8px rgba(0,0,0,0.15), + inset 0 1px 0 rgba(255,255,255,0.08); + } + + /* Shimmer animation from top to bottom */ + @keyframes asSweepDown { + 0% { background-position: 0% 200%; } + 100% { background-position: 0% -200%; } + } + + /* On quest page, sidebar stays visible above content */ + .as-sidebar-container.quest-mode { + z-index: 40; + } + + .as-sidebar-inner { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + height: 100%; + } + + .as-gradient-overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + } + + .as-gradient-overlay.default { + background: radial-gradient( + circle at top, + rgba(168,85,247,0.18), + transparent 55% + ), + radial-gradient( + circle at bottom, + rgba(249,115,22,0.1), + transparent 55% + ); + } + + .as-gradient-overlay.quest { + background: transparent; + } + + /* Ensure Sidebar sub-components are transparent */ + .as-sidebar-inner > * { + background: transparent; + } + + .as-sidebar-inner [class*="SidebarHeader"], + .as-sidebar-inner [class*="SidebarContent"], + .as-sidebar-inner [class*="SidebarFooter"], + .as-sidebar-inner [class*="SidebarGroup"], + .as-sidebar-inner [class*="SidebarMenu"] { + background: transparent; + } + + /* Quest mode text visibility */ + .as-sidebar-container.quest-mode [class*="SidebarGroupLabel"] { + color: rgba(255, 255, 255, 0.4) !important; + } + + .as-sidebar-container.quest-mode a { + color: rgba(255, 255, 255, 0.6) !important; + background: transparent !important; + } + + .as-sidebar-container.quest-mode a:hover { + color: rgba(255, 255, 255, 0.85) !important; + background: rgba(255, 255, 255, 0.08) !important; + } + + .as-sidebar-container.quest-mode a.active { + color: #fbbf24 !important; + } + + .as-sidebar-container.quest-mode span { + color: inherit; + } + + /* Quest header text */ + .as-sidebar-container.quest-mode .text-slate-900 { + color: rgba(255, 255, 255, 0.9) !important; + } + + .as-sidebar-container.quest-mode .text-slate-400 { + color: rgba(255, 255, 255, 0.4) !important; + } + + /* Quest mode removes white hover background from menu buttons */ + .as-sidebar-container.quest-mode [class*="SidebarMenuButton"]:hover { + background: transparent !important; + } + + .as-sidebar-container.quest-mode [class*="SidebarMenuButton"] { + background: transparent !important; + } + + /* Prevent group-hover from adding white background in quest mode */ + .as-sidebar-container.quest-mode .group:hover { + background: transparent !important; + } + + /* Quest mode footer button styling */ + .as-sidebar-container.quest-mode [class*="SidebarFooter"] button { + background: rgba(255, 255, 255, 0.08) !important; + --tw-ring-color: rgba(255, 255, 255, 0.05) !important; + border-color: rgba(255, 255, 255, 0.05) !important; + } + + .as-sidebar-container.quest-mode [class*="SidebarFooter"] button:hover { + background: rgba(255, 255, 255, 0.12) !important; + } + + /* Override Tailwind bg-white and ring classes for quest mode */ + .as-sidebar-container.quest-mode button[class*="bg-white"] { + background-color: rgba(255, 255, 255, 0.08) !important; + } + + .as-sidebar-container.quest-mode button[class*="ring-white"]:not(:hover) { + --tw-ring-color: rgba(255, 255, 255, 0.05) !important; + border-color: rgba(255, 255, 255, 0.05) !important; + } + + .as-sidebar-container.quest-mode button:hover[class*="hover:bg-white"] { + background-color: rgba(255, 255, 255, 0.12) !important; + } + + .as-sidebar-container.quest-mode a:hover { + --tw-ring-color: rgba(255, 255, 255, 0.05) !important; + } + `; return ( - -
-
+ <> + +
+
-
+
{/* HEADER */}
@@ -76,12 +259,12 @@ export function AppSidebar() { - `flex items-center gap-2.5 text-sm font-satoshi ${ + `flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 ${ isActive ? "text-slate-900" : "text-slate-500 group-hover:text-slate-900" @@ -92,11 +275,20 @@ export function AppSidebar() { <> - Home + + Home + )} @@ -109,13 +301,13 @@ export function AppSidebar() { onMouseLeave={() => setOpen(false)} > - `flex items-center gap-2.5 text-sm font-satoshi ${ + `flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 ${ isActive ? "text-slate-900" : "text-slate-500 group-hover:text-slate-900" @@ -126,13 +318,23 @@ export function AppSidebar() { <> - Practice + + Practice + - + Targeted Practice - + Drills - + Hard Test Modules )} + {/* QUESTS */} + + + { + if (isActive && isQuestPage) { + return "flex items-center gap-2.5 text-sm rounded-2xl px-2 py-2.5 transition-all duration-200"; + } + if (isActive) { + return "flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 text-slate-900"; + } + return "flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 text-slate-500 group-hover:text-slate-900"; + }} + > + {({ isActive }) => ( + <> + + + Quests + + + )} + + + + {/* LESSONS */} - `flex items-center gap-2.5 text-sm font-satoshi ${ + `flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 ${ isActive ? "text-slate-900" : "text-slate-500 group-hover:text-slate-900" @@ -206,11 +480,20 @@ export function AppSidebar() { <> @@ -221,12 +504,12 @@ export function AppSidebar() { - `flex items-center gap-2.5 text-sm font-satoshi ${ + `flex items-center gap-2.5 text-sm font-satoshi rounded-2xl px-2 py-2.5 transition-all duration-200 ${ isActive ? "text-slate-900" : "text-slate-500 group-hover:text-slate-900" @@ -237,11 +520,20 @@ export function AppSidebar() { <> - Rewards + + Rewards + )} @@ -268,11 +560,15 @@ export function AppSidebar() { {user?.name} {user?.email}
- +
- + ); } diff --git a/src/components/LessonModal.tsx b/src/components/LessonModal.tsx index c51984c..5477c69 100644 --- a/src/components/LessonModal.tsx +++ b/src/components/LessonModal.tsx @@ -48,6 +48,12 @@ const STYLES = ` display: flex; flex-direction: column; } + + @media (min-width: 1024px) { + .lm-content { + max-width: 1000px; + } + } .lm-dialog-header-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; diff --git a/src/components/lessons/LessonShell.tsx b/src/components/lessons/LessonShell.tsx index 8917a17..5b6644a 100644 --- a/src/components/lessons/LessonShell.tsx +++ b/src/components/lessons/LessonShell.tsx @@ -25,7 +25,8 @@ const PALETTES = { activeBg: "bg-blue-600", activeText: "text-blue-900", pastBg: "bg-blue-400", - sidebarActive: "bg-white/80 shadow-md border border-blue-100", + sidebarActive: + "bg-white/80 shadow-md border border-blue-100 lg:bg-transparent lg:shadow-none lg:border-transparent", dotBg: "bg-blue-100", dotText: "text-blue-500", glassClass: "glass-blue", @@ -34,7 +35,8 @@ const PALETTES = { activeBg: "bg-violet-600", activeText: "text-violet-900", pastBg: "bg-violet-400", - sidebarActive: "bg-white/80 shadow-md border border-violet-100", + sidebarActive: + "bg-white/80 shadow-md border border-violet-100 lg:bg-transparent lg:shadow-none lg:border-transparent", dotBg: "bg-violet-100", dotText: "text-violet-500", glassClass: "glass-violet", @@ -43,7 +45,8 @@ const PALETTES = { activeBg: "bg-amber-600", activeText: "text-amber-900", pastBg: "bg-amber-400", - sidebarActive: "bg-white/80 shadow-md border border-amber-100", + sidebarActive: + "bg-white/80 shadow-md border border-amber-100 lg:bg-transparent lg:shadow-none lg:border-transparent", dotBg: "bg-amber-100", dotText: "text-amber-500", glassClass: "glass-amber", @@ -52,7 +55,8 @@ const PALETTES = { activeBg: "bg-emerald-600", activeText: "text-emerald-900", pastBg: "bg-emerald-400", - sidebarActive: "bg-white/80 shadow-md border border-emerald-100", + sidebarActive: + "bg-white/80 shadow-md border border-emerald-100 lg:bg-transparent lg:shadow-none lg:border-transparent", dotBg: "bg-emerald-100", dotText: "text-emerald-500", glassClass: "glass-emerald", @@ -134,7 +138,7 @@ export default function LessonShell({

Sections

-