feat: Implement collapsible sidebar navigation

src/components/layout/AdminLayout.tsx

@@ -0,0 +1,62 @@
+import { ReactNode, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { AdminSidebar } from './AdminSidebar';
+import { AdminTopBar } from './AdminTopBar';
+import { useAuth } from '@/hooks/useAuth';
+import { useUserRole } from '@/hooks/useUserRole';
+
+interface AdminLayoutProps {
+  children: ReactNode;
+  onRefresh?: () => void;
+  isRefreshing?: boolean;
+}
+
+export function AdminLayout({ children, onRefresh, isRefreshing }: AdminLayoutProps) {
+  const { user, loading: authLoading } = useAuth();
+  const { isModerator, loading: roleLoading } = useUserRole();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!authLoading && !roleLoading) {
+      if (!user) {
+        navigate('/auth');
+        return;
+      }
+      
+      if (!isModerator()) {
+        navigate('/');
+        return;
+      }
+    }
+  }, [user, authLoading, roleLoading, navigate, isModerator]);
+
+  if (authLoading || roleLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading admin panel...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user || !isModerator()) {
+    return null;
+  }
+
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <div className="flex min-h-screen w-full">
+        <AdminSidebar />
+        <main className="flex-1 flex flex-col">
+          <AdminTopBar onRefresh={onRefresh} isRefreshing={isRefreshing} />
+          <div className="flex-1 overflow-auto">
+            {children}
+          </div>
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+}