Tetardtek
71070b2e76
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 34s
- Sidebar → bottom nav fixe sur mobile (<768px) - Classes CSS layout: .sidebar, .nav-item, .grid-2, .layout-* - Grids 2col → 1col sur mobile (Dashboard, Combat, Forge) - HudBar compact + wrapping sur mobile - GuideDrawer full-width mobile - Cards padding réduit mobile - Header username masqué mobile
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { Swords, Package, Hammer, User, LogOut, Shield, Scroll, Trophy, ShoppingBag, BookOpen } from 'lucide-react';
|
|
import { HudBar } from './HudBar';
|
|
import { GuideDrawer } from './GuideDrawer';
|
|
|
|
const NAV = [
|
|
{ to: '/dashboard', icon: User, label: 'Personnage' },
|
|
{ to: '/quests', icon: Scroll, label: 'Quêtes' },
|
|
{ to: '/combat', icon: Swords, label: 'Combat' },
|
|
{ to: '/inventory', icon: Package, label: 'Inventaire' },
|
|
{ to: '/craft', icon: Hammer, label: 'Artisanat' },
|
|
{ to: '/forge', icon: Shield, label: 'Forge' },
|
|
{ to: '/shop', icon: ShoppingBag, label: 'Boutique' },
|
|
{ to: '/achievements', icon: Trophy, label: 'Succès' },
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
const { user, logout } = useAuth();
|
|
const loc = useLocation();
|
|
const [guideOpen, setGuideOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="layout">
|
|
{/* Header */}
|
|
<header style={{
|
|
background: '#161b25', borderBottom: '1px solid #2a3448',
|
|
padding: '0 1.5rem', display: 'flex', alignItems: 'center',
|
|
justifyContent: 'space-between', height: 52,
|
|
position: 'sticky', top: 0, zIndex: 10,
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<span style={{ fontSize: 20 }}>🐸</span>
|
|
<span style={{ fontWeight: 800, color: '#f4c94e', letterSpacing: '-0.5px' }}>TetaRdPG</span>
|
|
</div>
|
|
{user && (
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<span className="header-username" style={{ fontSize: 13, color: '#6b7a99' }}>{user.username}</span>
|
|
<button className="btn btn-ghost" style={{ padding: '0.3rem 0.6rem' }} onClick={logout} title="Déconnexion">
|
|
<LogOut size={14} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
<HudBar />
|
|
<div className="layout-body">
|
|
{/* Sidebar / Bottom nav */}
|
|
<nav className="sidebar">
|
|
{NAV.map(({ to, icon: Icon, label }) => {
|
|
const active = loc.pathname.startsWith(to);
|
|
return (
|
|
<Link key={to} to={to} title={label} className={`nav-item ${active ? 'active' : ''}`}>
|
|
<Icon size={18} />
|
|
</Link>
|
|
);
|
|
})}
|
|
<div className="nav-spacer" style={{ flex: 1 }} />
|
|
<button
|
|
onClick={() => setGuideOpen(true)}
|
|
title="Guide rapide"
|
|
className={`nav-item ${guideOpen ? 'active' : ''}`}
|
|
>
|
|
<BookOpen size={18} />
|
|
</button>
|
|
</nav>
|
|
|
|
{/* Main content */}
|
|
<main className="layout-main">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
<GuideDrawer open={guideOpen} onClose={() => setGuideOpen(false)} />
|
|
</div>
|
|
);
|
|
}
|