104 lines
3.8 KiB
JavaScript
104 lines
3.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Outlet, useLocation } from 'react-router-dom';
|
|
import {
|
|
Sun,
|
|
Moon,
|
|
Search
|
|
} from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';
|
|
import { AutoLabSidebar } from '../components/AutoLabSidebar';
|
|
|
|
export const AutoLabLayout = () => {
|
|
useDocumentMetadata('Auto Lab', 'autolab');
|
|
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
|
const [isDarkMode, setIsDarkMode] = useState(false); // Default to light as per screenshots
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
if (isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
}, [isDarkMode]);
|
|
|
|
// Map path to title
|
|
const getPageTitle = (pathname) => {
|
|
if (pathname.includes('cadastro')) return 'Cadastro';
|
|
if (pathname.includes('estoque')) return 'Estoque';
|
|
if (pathname.includes('vendas')) return 'Vendas';
|
|
if (pathname.includes('clientes')) return 'Clientes';
|
|
if (pathname.includes('configuracao')) return 'Configuração';
|
|
return 'Ambiente Auto Lab';
|
|
};
|
|
|
|
return (
|
|
<div className={cn(
|
|
"flex min-h-screen font-inter selection:bg-emerald-500/30",
|
|
isDarkMode ? "dark bg-[#141414] text-slate-100" : "bg-slate-50 text-slate-900"
|
|
)}>
|
|
{/* Sidebar */}
|
|
<AutoLabSidebar
|
|
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 - Styled like screenshots */}
|
|
<header className={cn(
|
|
"h-16 px-8 sticky top-0 z-40 flex items-center justify-between",
|
|
"bg-[#1b4332] text-white shadow-lg"
|
|
)}>
|
|
<div className="flex items-center gap-6 flex-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">{getPageTitle(location.pathname)}</h1>
|
|
|
|
{/* Header Search Bar */}
|
|
<div className="relative max-w-md w-full">
|
|
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/60" />
|
|
<input
|
|
type="text"
|
|
placeholder="Pesquisar..."
|
|
className="w-full bg-white/10 border border-white/20 rounded-lg py-1.5 pl-10 pr-4 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
{/* Theme Toggle */}
|
|
<button
|
|
onClick={() => setIsDarkMode(!isDarkMode)}
|
|
className={cn(
|
|
"p-2 rounded-full transition-colors",
|
|
"text-white/80 hover:text-white hover:bg-white/10"
|
|
)}
|
|
>
|
|
{isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 p-6 min-w-0 overflow-hidden bg-slate-50 dark:bg-[#0f0f0f]">
|
|
<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">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|