mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 12:31:13 -05:00
feat: Implement collapsible sidebar navigation
This commit is contained in:
gpt-engineer-app[bot]
62
src/components/layout/AdminLayout.tsx
Normal file
62
src/components/layout/AdminLayout.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
148
src/components/layout/AdminSidebar.tsx
Normal file
148
src/components/layout/AdminSidebar.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { LayoutDashboard, FileText, Flag, Users, Settings, ArrowLeft } from 'lucide-react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
useSidebar,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
|
||||
const navigationItems = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
url: '/admin',
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
title: 'Moderation Queue',
|
||||
url: '/admin/moderation',
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
title: 'Reports',
|
||||
url: '/admin/reports',
|
||||
icon: Flag,
|
||||
},
|
||||
{
|
||||
title: 'User Management',
|
||||
url: '/admin/users',
|
||||
icon: Users,
|
||||
},
|
||||
];
|
||||
|
||||
export function AdminSidebar() {
|
||||
const location = useLocation();
|
||||
const { state } = useSidebar();
|
||||
const { isSuperuser } = useUserRole();
|
||||
const isCollapsed = state === 'collapsed';
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/admin') {
|
||||
return location.pathname === '/admin';
|
||||
}
|
||||
return location.pathname.startsWith(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon" className="border-r">
|
||||
<SidebarHeader className="border-b px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
|
||||
<span className="text-sm font-bold">TW</span>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-semibold">ThrillWiki</span>
|
||||
<span className="text-xs text-muted-foreground">Admin Panel</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{navigationItems.map((item) => (
|
||||
<SidebarMenuItem key={item.url}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={isActive(item.url)}
|
||||
tooltip={isCollapsed ? item.title : undefined}
|
||||
>
|
||||
<NavLink
|
||||
to={item.url}
|
||||
end={item.url === '/admin'}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-3 rounded-md transition-colors',
|
||||
isActive
|
||||
? 'bg-primary/10 text-primary font-medium'
|
||||
: 'hover:bg-muted/50'
|
||||
)
|
||||
}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
{!isCollapsed && <span>{item.title}</span>}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
|
||||
{isSuperuser() && (
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={isActive('/admin/settings')}
|
||||
tooltip={isCollapsed ? 'Settings' : undefined}
|
||||
>
|
||||
<NavLink
|
||||
to="/admin/settings"
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-3 rounded-md transition-colors',
|
||||
isActive
|
||||
? 'bg-primary/10 text-primary font-medium'
|
||||
: 'hover:bg-muted/50'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Settings className="h-5 w-5" />
|
||||
{!isCollapsed && <span>Settings</span>}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
)}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter className="border-t p-2">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild tooltip={isCollapsed ? 'Back to ThrillWiki' : undefined}>
|
||||
<NavLink
|
||||
to="/"
|
||||
className="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
{!isCollapsed && <span>Back to ThrillWiki</span>}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
38
src/components/layout/AdminTopBar.tsx
Normal file
38
src/components/layout/AdminTopBar.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SidebarTrigger } from '@/components/ui/sidebar';
|
||||
import { ThemeToggle } from '@/components/theme/ThemeToggle';
|
||||
import { NotificationCenter } from '@/components/notifications/NotificationCenter';
|
||||
import { AuthButtons } from '@/components/auth/AuthButtons';
|
||||
|
||||
interface AdminTopBarProps {
|
||||
onRefresh?: () => void;
|
||||
isRefreshing?: boolean;
|
||||
}
|
||||
|
||||
export function AdminTopBar({ onRefresh, isRefreshing }: AdminTopBarProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
|
||||
{onRefresh && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="gap-2"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||
<span className="hidden sm:inline">Refresh</span>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<NotificationCenter />
|
||||
<ThemeToggle />
|
||||
<AuthButtons />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user