6210ceb05e
Next.js route-level layouts provide Sidebar + gradient background automatically for all sub-pages. Individual pages no longer need their own wrapper divs or Sidebar imports. - learn/layout.tsx: Sidebar + purple gradient for all learning pages - parent/layout.tsx: Same for all parent portal pages - LearnLayout.tsx: Reusable component for other pages - Fixed broken <LearnLayout>}> artifacts from previous refactoring - Removed duplicate Sidebar/wrapper code from 9 sub-pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
34 lines
885 B
TypeScript
34 lines
885 B
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { useTheme } from '@/lib/ThemeContext'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
|
|
interface LearnLayoutProps {
|
|
children: React.ReactNode
|
|
gradient?: string
|
|
}
|
|
|
|
/**
|
|
* Shared layout for all learn sub-pages.
|
|
* Adds Sidebar + consistent gradient background.
|
|
*/
|
|
export function LearnLayout({ children, gradient }: LearnLayoutProps) {
|
|
const { isDark } = useTheme()
|
|
|
|
const bg = gradient || (isDark
|
|
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
|
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-cyan-100')
|
|
|
|
return (
|
|
<div className={`min-h-screen flex relative overflow-hidden ${bg}`}>
|
|
<div className="relative z-10 p-4 flex-shrink-0">
|
|
<Sidebar />
|
|
</div>
|
|
<div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|