UI: Section-aware sidebar active colors - gold for Pro Tier, teal for AI Coach in light mode
This commit is contained in:
@@ -95,9 +95,10 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavItem href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
|
||||
<NavItem href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
|
||||
<NavItem section="pro" href="/dashboard" icon={<LayoutDashboard size={17} />} label="Overview" active={pathname === "/dashboard"} />
|
||||
<NavItem section="pro" href="/dashboard/leaderboard" icon={<Trophy size={17} />} label="Leaderboard" active={pathname.startsWith("/dashboard/leaderboard")} />
|
||||
<NavItem
|
||||
section="pro"
|
||||
href="/dashboard/progress"
|
||||
icon={<BarChart3 size={17} />}
|
||||
label="Syllabus Tracker"
|
||||
@@ -105,6 +106,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("chapter-wise-progress-tracking")}
|
||||
/>
|
||||
<NavItem
|
||||
section="pro"
|
||||
href="/dashboard/cbt"
|
||||
icon={<CheckSquare size={17} />}
|
||||
label="Mock Tests (CBT)"
|
||||
@@ -112,6 +114,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("weekly-test-series")}
|
||||
/>
|
||||
<NavItem
|
||||
section="pro"
|
||||
href="/dashboard/materials"
|
||||
icon={<BookOpen size={17} />}
|
||||
label="Quick Notes"
|
||||
@@ -119,6 +122,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
||||
/>
|
||||
<NavItem
|
||||
section="pro"
|
||||
href="/dashboard/analytics"
|
||||
icon={<LineChart size={17} />}
|
||||
label="Performance Analytics"
|
||||
@@ -126,6 +130,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
||||
/>
|
||||
<NavItem
|
||||
section="pro"
|
||||
href="/dashboard/community"
|
||||
icon={<School size={17} />}
|
||||
label="Doubt Forum"
|
||||
@@ -146,6 +151,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
</div>
|
||||
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/tutor"
|
||||
icon={<BrainCircuitIcon />}
|
||||
label="AI Tutor"
|
||||
@@ -153,6 +159,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("ai-tutor-chat")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/cbt-dpp"
|
||||
icon={<Zap size={17} />}
|
||||
label="PrepPilot AI"
|
||||
@@ -160,6 +167,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("ai-tutor-chat")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/readiness"
|
||||
icon={<Gauge size={17} />}
|
||||
label="Exam Readiness"
|
||||
@@ -167,6 +175,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/college-predictor"
|
||||
icon={<School size={17} />}
|
||||
label="College Predictor"
|
||||
@@ -174,6 +183,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("college-predictor")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/strategy"
|
||||
icon={<Target size={17} />}
|
||||
label="Exam Strategy"
|
||||
@@ -181,6 +191,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("exam-day-strategy")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/study-plan"
|
||||
icon={<Calendar size={17} />}
|
||||
label="AI Study Plan"
|
||||
@@ -188,6 +199,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("personalized-study-plan")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/time-optimization"
|
||||
icon={<Clock size={17} />}
|
||||
label="Time Optimization"
|
||||
@@ -195,6 +207,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("personalized-study-plan")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/heatmap"
|
||||
icon={<Flame size={17} />}
|
||||
label="Mistake Heatmap"
|
||||
@@ -202,6 +215,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("ai-mistake-tracking")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/weekly-progress"
|
||||
icon={<Activity size={17} />}
|
||||
label="Weekly Progress"
|
||||
@@ -209,6 +223,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
isLocked={!hasAccessTo("detailed-performance-analytics")}
|
||||
/>
|
||||
<NavItem
|
||||
section="ai"
|
||||
href="/dashboard/ai-coach/mistakes"
|
||||
icon={<BrainCircuit size={17} />}
|
||||
label="Mistake Analyzer"
|
||||
@@ -332,28 +347,49 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
)
|
||||
}
|
||||
|
||||
function NavItem({ href, icon, label, active, isLocked }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean }) {
|
||||
return (
|
||||
<Link
|
||||
href={isLocked ? "#" : href}
|
||||
className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${
|
||||
active
|
||||
? "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
|
||||
function NavItem({ href, icon, label, active, isLocked, section }: { href: string, icon: React.ReactNode, label: string, active?: boolean, isLocked?: boolean, section?: "pro" | "ai" }) {
|
||||
// Section-aware active color tokens (light mode only, dark mode falls back to cyan)
|
||||
const activeClasses = active
|
||||
? section === "pro"
|
||||
? "bg-yellow-50 light:bg-yellow-50 text-yellow-700 dark:bg-[#00F0FF]/10 dark:text-[#00F0FF] font-semibold border border-yellow-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
|
||||
: section === "ai"
|
||||
? "bg-cyan-50 dark:bg-[#00F0FF]/10 text-cyan-800 dark:text-[#00F0FF] font-semibold border border-cyan-300/60 dark:border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(6,182,212,0.2)] dark:shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
|
||||
: "bg-[#00F0FF]/10 text-[#00F0FF] font-semibold border border-[#00F0FF]/20 shadow-[0_0_12px_-4px_rgba(0,240,255,0.3)]"
|
||||
: isLocked
|
||||
? "text-muted-foreground/40 cursor-not-allowed border border-transparent"
|
||||
: "text-muted-foreground/80 hover:bg-secondary/60 hover:text-foreground border border-transparent hover:border-border/40"
|
||||
}`}
|
||||
|
||||
const iconActiveClass = active
|
||||
? section === "pro"
|
||||
? "text-yellow-600 dark:text-[#00F0FF]"
|
||||
: section === "ai"
|
||||
? "text-cyan-700 dark:text-[#00F0FF]"
|
||||
: "text-[#00F0FF]"
|
||||
: isLocked
|
||||
? "text-muted-foreground/30"
|
||||
: "text-muted-foreground/60 group-hover:text-foreground/80"
|
||||
|
||||
const activeBarClass = active
|
||||
? section === "pro"
|
||||
? "w-1 h-4 rounded-full bg-yellow-500 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(234,179,8,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
|
||||
: section === "ai"
|
||||
? "w-1 h-4 rounded-full bg-cyan-600 dark:bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(6,182,212,0.6)] dark:shadow-[0_0_6px_rgba(0,240,255,0.8)]"
|
||||
: "w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"
|
||||
: ""
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={isLocked ? "#" : href}
|
||||
className={`group flex items-center justify-between px-3 py-2 rounded-xl transition-all duration-200 ${activeClasses}`}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className={`transition-all duration-200 ${
|
||||
active ? "text-[#00F0FF]" : isLocked ? "text-muted-foreground/30" : "text-muted-foreground/60 group-hover:text-foreground/80"
|
||||
}`}>
|
||||
<span className={`transition-all duration-200 ${iconActiveClass}`}>
|
||||
{icon}
|
||||
</span>
|
||||
<span className="text-[13px] font-medium tracking-[-0.01em]">{label}</span>
|
||||
</div>
|
||||
{isLocked && <Lock size={11} className="text-muted-foreground/30 shrink-0" />}
|
||||
{active && <span className="w-1 h-4 rounded-full bg-[#00F0FF] shrink-0 shadow-[0_0_6px_rgba(0,240,255,0.8)]"></span>}
|
||||
{active && <span className={activeBarClass}></span>}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user