91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import React, { ReactNode } from "react";
|
|
import { SidebarProvider } from "./sidebar-context";
|
|
import { ThemeProvider } from "./theme-context";
|
|
import { Breadcrumbs } from "./breadcrumbs";
|
|
import { BurgerButtonIcon } from "../icons";
|
|
import { RetractingSidebar } from "../landing-page/retracting-sidedar";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
export const AdminLayout = ({ children }: { children: ReactNode }) => {
|
|
const [isOpen, setIsOpen] = useState(true);
|
|
const [hasMounted, setHasMounted] = useState(false);
|
|
|
|
const updateSidebarData = (newData: boolean) => {
|
|
setIsOpen(newData);
|
|
};
|
|
|
|
// Hooks
|
|
useEffect(() => {
|
|
setHasMounted(true);
|
|
}, []);
|
|
|
|
// Render loading state until mounted
|
|
if (!hasMounted) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider>
|
|
<SidebarProvider>
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
|
|
<div className="flex h-screen overflow-hidden">
|
|
<RetractingSidebar
|
|
sidebarData={isOpen}
|
|
updateSidebarData={updateSidebarData}
|
|
/>
|
|
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key="main-content"
|
|
className="flex-1 flex flex-col overflow-hidden"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
{/* Header */}
|
|
<motion.header
|
|
className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-b border-slate-200/60 dark:border-slate-700/60 shadow-sm"
|
|
initial={{ y: -20, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ delay: 0.2, duration: 0.3 }}
|
|
>
|
|
<div className="flex items-center justify-between px-6 py-4">
|
|
<div className="flex items-center space-x-4">
|
|
<button
|
|
className="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors duration-200"
|
|
onClick={() => updateSidebarData(true)}
|
|
>
|
|
<BurgerButtonIcon />
|
|
</button>
|
|
<Breadcrumbs />
|
|
</div>
|
|
</div>
|
|
</motion.header>
|
|
|
|
{/* Main Content */}
|
|
<motion.main
|
|
className="flex-1 overflow-auto"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3, duration: 0.3 }}
|
|
>
|
|
<div className="h-full">
|
|
{children}
|
|
</div>
|
|
</motion.main>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
</SidebarProvider>
|
|
</ThemeProvider>
|
|
);
|
|
};
|