90 lines
3.1 KiB
JavaScript
90 lines
3.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import {
|
|
Menu,
|
|
Sun,
|
|
Moon,
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';
|
|
import { PrafrotSidebar } from '../components/PrafrotSidebar';
|
|
import { FeedbackContainer } from '../components/FeedbackNotification';
|
|
|
|
export const PrafrotLayout = () => {
|
|
useDocumentMetadata('Prafrota', 'prafrot');
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
const [isDarkMode, setIsDarkMode] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}, [isDarkMode]);
|
|
|
|
return (
|
|
<div className={cn(
|
|
"flex min-h-screen font-inter selection:bg-emerald-500/30 theme-frota",
|
|
isDarkMode ? "dark bg-[#141414] text-slate-100" : "bg-slate-50 text-slate-900"
|
|
)}>
|
|
<FeedbackContainer />
|
|
{/* New Sidebar Component */}
|
|
<PrafrotSidebar
|
|
isCollapsed={isSidebarCollapsed}
|
|
onToggle={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
|
|
/>
|
|
|
|
{/* Main Content Area */}
|
|
<main
|
|
className={cn(
|
|
"flex-1 transition-all duration-300 min-h-screen flex flex-col min-w-0",
|
|
isSidebarCollapsed ? "ml-[100px]" : "ml-[280px]"
|
|
)}
|
|
>
|
|
{/* Header */}
|
|
<header className={cn(
|
|
"h-16 px-8 sticky top-0 z-40 backdrop-blur-md border-b flex items-center justify-between",
|
|
isDarkMode ? "bg-[#141414]/80 border-[#2a2a2a]" : "bg-slate-50/80 border-slate-200"
|
|
)}>
|
|
{/* <div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
|
|
className="text-slate-400 hover:text-emerald-500 transition-colors p-2 rounded-xl hover:bg-emerald-500/10"
|
|
>
|
|
<Menu size={20} />
|
|
</button>
|
|
</div> */}
|
|
|
|
<div className="flex items-center gap-4">
|
|
{/* Theme Toggle */}
|
|
<button
|
|
onClick={() => setIsDarkMode(!isDarkMode)}
|
|
className={cn(
|
|
"p-2 rounded-full transition-colors",
|
|
isDarkMode ? "text-slate-400 hover:text-yellow-400" : "text-slate-500 hover:text-orange-500"
|
|
)}
|
|
>
|
|
{isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 p-6 min-w-0 overflow-hidden">
|
|
<div className={cn(
|
|
"h-full w-full rounded-2xl border overflow-hidden flex flex-col shadow-sm",
|
|
isDarkMode
|
|
? "bg-[#1b1b1b] border-zinc-800 shadow-black/20"
|
|
: "bg-white border-slate-200 shadow-slate-200/50"
|
|
)}>
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-6">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|