init

frontend/components/admin-panel/admin-panel-layout.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { Footer } from "@/components/admin-panel/footer";
+import { Sidebar } from "@/components/admin-panel/sidebar";
+import { useSidebar } from "@/hooks/use-sidebar";
+import { useStore } from "@/hooks/use-store";
+import { cn } from "@/lib/utils";
+
+export default function AdminPanelLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const sidebar = useStore(useSidebar, (x) => x);
+  if (!sidebar) return null;
+  const { getOpenState, settings } = sidebar;
+  return (
+    <>
+      <Sidebar />
+      <main
+        className={cn(
+          "min-h-[calc(100vh_-_56px)] bg-zinc-50 dark:bg-zinc-900 transition-[margin-left] ease-in-out duration-300",
+          !settings.disabled
+            ? getOpenState()
+              ? "ml-0 lg:ml-72" // Sidebar geöffnet
+              : "ml-0 lg:ml-[90px]" // Sidebar minimiert
+            : "ml-0" // Sidebar deaktiviert
+        )}
+      >
+        {children}
+      </main>
+      <footer
+        className={cn(
+          "transition-[margin-left] ease-in-out duration-300",
+          !settings.disabled
+            ? getOpenState()
+              ? "ml-0 lg:ml-72"
+              : "ml-0 lg:ml-[90px]"
+            : "ml-0"
+        )}
+      >
+        <Footer />
+      </footer>
+    </>
+  );
+}