hotel-manage-stack/maintenance
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:05 +00:00
parent 626d4d4d72
commit b3f4adeb3e
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

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { NavLink, useLocation } from 'react-router-dom'
import { Wrench, ClipboardList, History, Boxes, HardHat, Repeat, MapPin, Settings, Menu } from 'lucide-react'
import { Wrench, ClipboardList, History, Boxes, HardHat, Repeat, MapPin, Settings, Menu, LogOut } from 'lucide-react'
import { useAuth } from './AuthGate'
import { can } from '../types'
@ -22,6 +22,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
const location = useLocation()
const [menuOpen, setMenuOpen] = useState(false)
async function logout() {
await fetch('/maintenance/api/auth/logout', { method: 'POST', credentials: 'include' })
window.location.reload()
}
useEffect(() => { setMenuOpen(false) }, [location.pathname])
return (
@ -39,7 +44,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
</NavLink>
))}
</nav>
<div className="sidebar-user">{user.name}</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>
{menuOpen && <div className="menu-backdrop" onClick={() => setMenuOpen(false)} />}