SettingsLayout.tsx

import { Outlet, Link } from "react-router";
import { SettingsSidebar } from "../components/SettingsSidebar";
import { LogOut, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/features/Login/context/AuthContext";
import { useState } from "react";

export default function SettingsLayout() {
    const { logout } = useAuth();
    const [isProfileOpen, setIsProfileOpen] = useState(false);

    const handleLogout = async () => {
        await logout();
    };

    return (
        <div className="flex flex-col h-screen bg-slate-50 overflow-hidden">
            {/* Subtle Grid & Gradient Background (Reused from Home) */}
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#e0f2fe_1px,transparent_1px),linear-gradient(to_bottom,#e0f2fe_1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-90 pointer-events-none z-0"></div>

            {/* Navbar (Reused from Home but simplified or modularized ideally) */}
            <header className="flex items-center justify-between px-6 py-4 bg-white/50 backdrop-blur-md border-b border-sky-100 z-20 relative">
                <div className="flex items-center space-x-3">
                    <Link to="/" className="flex items-center space-x-3">
                        <img src="/Localbase Logo.svg" alt="Localbase Logo" className="h-8 w-auto" />
                        <h1 className="text-xl font-bold text-sky-900 tracking-tight">Localbase</h1>
                    </Link>
                </div>
                <div className="flex items-center space-x-2">
                    <div className="relative isolate z-50">
                        <Button
                            variant="ghost"
                            size="icon"
                            className={`text-sky-700 hover:text-sky-900 hover:bg-sky-100 ${isProfileOpen ? 'bg-sky-100 text-sky-900' : ''}`}
                            onClick={() => setIsProfileOpen(!isProfileOpen)}
                        >
                            <User className="h-5 w-5" />
                            <span className="sr-only">Profile</span>
                        </Button>

                        {isProfileOpen && (
                            <>
                                <div className="fixed inset-0 z-40" onClick={() => setIsProfileOpen(false)}></div>
                                <div className="absolute right-0 mt-2 w-48 bg-white border border-sky-100 rounded-lg shadow-lg transition-all duration-200 z-50 animate-in fade-in zoom-in-95">
                                    <div className="p-1">
                                        <Button
                                            variant="ghost"
                                            className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50 cursor-pointer"
                                            onClick={handleLogout}
                                        >
                                            <LogOut className="mr-2 h-4 w-4" />
                                            Logout
                                        </Button>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </div>
            </header>

            {/* Main Content Area with Sidebar */}
            <div className="flex flex-1 overflow-hidden z-10 relative">
                <SettingsSidebar />
                <main className="flex-1 overflow-y-auto p-0">
                    <Outlet />
                </main>
            </div>
        </div>
    );
}