Remaster avec skill supabase only et grillme
This commit is contained in:
+83
-40
@@ -1,3 +1,4 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '@/context/AuthContext'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -5,75 +6,117 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar'
|
||||
import {
|
||||
DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
LayoutDashboard, BookOpen, Users, Table2, History, Menu, X, Sun, Moon, LogOut, User,
|
||||
} from 'lucide-react'
|
||||
import { useTheme } from 'next-themes'
|
||||
|
||||
const navItems = [
|
||||
{ to: '/', label: 'Tableau de bord', icon: '📊' },
|
||||
{ to: '/skills', label: 'Compétences', icon: '📚', admin: true },
|
||||
{ to: '/members', label: 'Membres', icon: '👥', admin: true },
|
||||
{ to: '/matrix', label: 'Matrice', icon: '📋' },
|
||||
{ to: '/history', label: 'Historique', icon: '📜' },
|
||||
{ to: '/', label: 'Tableau de bord', icon: LayoutDashboard },
|
||||
{ to: '/skills', label: 'Compétences', icon: BookOpen, admin: true },
|
||||
{ to: '/members', label: 'Membres', icon: Users, admin: true },
|
||||
{ to: '/matrix', label: 'Matrice', icon: Table2 },
|
||||
{ to: '/history', label: 'Historique', icon: History },
|
||||
]
|
||||
|
||||
export function Layout({ children }) {
|
||||
const { profile, signOut } = useAuth()
|
||||
const { theme, setTheme } = useTheme()
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
async function handleSignOut() {
|
||||
await signOut()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex">
|
||||
<aside className="w-64 bg-gray-900 text-white flex flex-col">
|
||||
<div className="p-4 border-b border-gray-700">
|
||||
const sidebar = (
|
||||
<aside className={`w-64 bg-gray-900 text-white flex flex-col shrink-0 ${sidebarOpen ? 'fixed inset-0 z-50' : 'hidden lg:flex'}`}>
|
||||
<div className="p-4 border-b border-gray-700 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-bold">Compétences</h1>
|
||||
<p className="text-xs text-gray-400">Équipe SysAdmin</p>
|
||||
</div>
|
||||
<nav className="flex-1 p-2 space-y-1">
|
||||
{navItems
|
||||
.filter((item) => !item.admin || profile?.role === 'admin')
|
||||
.map((item) => (
|
||||
{sidebarOpen && (
|
||||
<button className="lg:hidden text-gray-400 hover:text-white" onClick={() => setSidebarOpen(false)}>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<nav className="flex-1 p-2 space-y-1">
|
||||
{navItems
|
||||
.filter((item) => !item.admin || profile?.role === 'admin')
|
||||
.map((item) => {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<Link
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
|
||||
location.pathname === item.to
|
||||
? 'bg-gray-700 text-white'
|
||||
: 'text-gray-300 hover:bg-gray-800 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<span>{item.icon}</span>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="p-4 border-t border-gray-700">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="w-full flex items-center gap-2 text-gray-300 hover:text-white">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarFallback className="text-xs">
|
||||
{profile?.full_name?.charAt(0)?.toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm truncate">{profile?.full_name || profile?.email}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuItem onClick={() => navigate('/profile')}>
|
||||
Mon profil
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleSignOut}>
|
||||
Déconnexion
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
})}
|
||||
</nav>
|
||||
<div className="p-4 border-t border-gray-700 space-y-2">
|
||||
<button
|
||||
className="flex items-center gap-2 text-sm text-gray-400 hover:text-white w-full"
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
{theme === 'dark' ? 'Mode clair' : 'Mode sombre'}
|
||||
</button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="w-full flex items-center gap-2 text-gray-300 hover:text-white">
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarFallback className="text-xs">
|
||||
{profile?.full_name?.charAt(0)?.toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm truncate">{profile?.full_name || profile?.email}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48">
|
||||
<DropdownMenuItem onClick={() => navigate('/profile')}>
|
||||
<User className="h-4 w-4 mr-2" />
|
||||
Mon profil
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleSignOut}>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
Déconnexion
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex bg-gray-50 dark:bg-gray-950 dark:text-gray-100">
|
||||
{sidebarOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
|
||||
)}
|
||||
{sidebar}
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
<div className="lg:hidden flex items-center justify-between p-4 border-b bg-white dark:bg-gray-900 dark:border-gray-800">
|
||||
<button onClick={() => setSidebarOpen(true)} className="text-gray-700 dark:text-gray-300">
|
||||
<Menu className="h-5 w-5" />
|
||||
</button>
|
||||
<span className="font-bold text-sm">Compétences</span>
|
||||
<div className="w-5" />
|
||||
</div>
|
||||
<div className="p-4 md:p-8 overflow-auto">
|
||||
{children}
|
||||
</div>
|
||||
</aside>
|
||||
<main className="flex-1 bg-gray-50 p-8 overflow-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user