hotel-manage-stack/kitchen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add name, email and sign out button to sidebar footer

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-22 11:10:12 +00:00
parent 5022162218
commit 62f34894e1
1 changed files with 18 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/Layout.tsx
View file

@ -3,7 +3,7 @@ import {
LayoutDashboard, Upload, FileText, Search, List, AlertCircle, LayoutDashboard, Upload, FileText, Search, List, AlertCircle,
ShoppingCart, TrendingUp, BarChart2, PieChart, Activity, RefreshCw, ShoppingCart, TrendingUp, BarChart2, PieChart, Activity, RefreshCw,
Calendar, Users, Hotel, BookOpen, Wheat, ChefHat, UtensilsCrossed, Calendar, Users, Hotel, BookOpen, Wheat, ChefHat, UtensilsCrossed,
Menu, ShieldCheck, Package, Settings, ChevronRight, TableProperties, Menu, ShieldCheck, Package, Settings, ChevronRight, TableProperties, LogOut,
} from 'lucide-react' } from 'lucide-react'
import { useAuth } from './AuthGate' import { useAuth } from './AuthGate'
import { can } from '../types' import { can } from '../types'
@ -31,6 +31,11 @@ function NavItem({ to, label, icon: Icon }: { to: string; label: string; icon: R
export default function Layout() { export default function Layout() {
const { user } = useAuth() const { user } = useAuth()
async function logout() {
await fetch('/kitchen/api/auth/logout', { method: 'POST', credentials: 'include' })
window.location.reload()
}
return ( return (
<div className="app-shell"> <div className="app-shell">
<aside className="sidebar"> <aside className="sidebar">
@ -100,7 +105,18 @@ export default function Layout() {
)} )}
</nav> </nav>
<div className="sidebar-user">{user.name || user.email}</div> <div className="sidebar-user" style={{ whiteSpace: 'normal' }}>
<div style={{ fontWeight: 600, color: 'var(--text)', fontSize: '12px', marginBottom: '2px' }}>{user.name}</div>
<div style={{ fontSize: '11px', marginBottom: '8px' }}>{user.email}</div>
<button onClick={logout} style={{
display: 'flex', alignItems: 'center', gap: '6px',
background: 'none', border: 'none', color: 'inherit',
fontSize: '12px', padding: 0, cursor: 'pointer',
}}>
<LogOut size={13} strokeWidth={1.75} />
Sign out
</button>
</div>
</aside> </aside>
{/* Mobile top bar */} {/* Mobile top bar */}