Add user/logout section to sidebar footer
Sidebar was missing the account info + sign-out control that every other app's sidebar has; it showed a static hotel-name label instead. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
2114e60fce
commit
ae10646d32
1 changed files with 14 additions and 5 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu } from 'lucide-react'
|
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu, LogOut } from 'lucide-react'
|
||||||
import AuthGate, { useAuth } from './components/AuthGate'
|
import AuthGate, { useAuth } from './components/AuthGate'
|
||||||
import { UpdateBanner } from './components/UpdateBanner'
|
import { UpdateBanner } from './components/UpdateBanner'
|
||||||
import { useVersionCheck } from './hooks/useVersionCheck'
|
import { useVersionCheck } from './hooks/useVersionCheck'
|
||||||
|
|
@ -27,8 +27,6 @@ function Shell() {
|
||||||
const [page, setPage] = useState<Page>('weekly')
|
const [page, setPage] = useState<Page>('weekly')
|
||||||
const [menuOpen, setMenuOpen] = useState(false)
|
const [menuOpen, setMenuOpen] = useState(false)
|
||||||
|
|
||||||
const hotelName = import.meta.env.VITE_HOTEL_NAME || 'Hotel'
|
|
||||||
|
|
||||||
const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
|
const visibleNav = NAV.filter(n => !n.cap || can(user, n.cap))
|
||||||
|
|
||||||
function selectPage(id: Page) {
|
function selectPage(id: Page) {
|
||||||
|
|
@ -36,6 +34,11 @@ function Shell() {
|
||||||
setMenuOpen(false)
|
setMenuOpen(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
await fetch('/wages/api/auth/logout', { method: 'POST', credentials: 'include' })
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
|
<div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
|
||||||
<nav className="sidebar">
|
<nav className="sidebar">
|
||||||
|
|
@ -55,8 +58,14 @@ function Shell() {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div style={{ padding: '12px 16px', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }}>
|
<div className="sidebar-footer">
|
||||||
{hotelName}
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div className="sidebar-user-name">{user.name}</div>
|
||||||
|
<div className="sidebar-user">{user.email}</div>
|
||||||
|
</div>
|
||||||
|
<button onClick={logout} className="sidebar-logout" title="Sign out">
|
||||||
|
<LogOut size={14} strokeWidth={1.75} />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue