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

Mobile nav: replace bottom icon bar with burger menu for consistency

Browse source 
Matches the slide-in sidebar + top-bar burger pattern used by other apps (maintenance, cashup) instead of the bottom tab bar.
This commit is contained in:
jtricerolph 2026-07-23 17:43:13 +00:00
parent 69b4c50e14
commit baba818693
2 changed files with 61 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/App.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react'
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings } from 'lucide-react'
import { DollarSign, CalendarDays, TrendingUp, BarChart3, Wallet, Settings, Menu } from 'lucide-react'
import AuthGate, { useAuth } from './components/AuthGate'
import { UpdateBanner } from './components/UpdateBanner'
import { useVersionCheck } from './hooks/useVersionCheck'
@ -25,13 +25,19 @@ const NAV: { id: Page; label: string; icon: React.ElementType; cap?: string }[]
function Shell() {
const { user } = useAuth()
const [page, setPage] = useState<Page>('weekly')
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))
function selectPage(id: Page) {
setPage(id)
setMenuOpen(false)
}
return (
<div className="app-shell">
<div className={`app-shell${menuOpen ? ' menu-open' : ''}`}>
<nav className="sidebar">
<div className="sidebar-logo">
<DollarSign size={16} strokeWidth={1.75} />
@ -42,7 +48,7 @@ function Shell() {
<div
key={n.id}
className={`nav-item${page === n.id ? ' active' : ''}`}
onClick={() => setPage(n.id)}
onClick={() => selectPage(n.id)}
>
<n.icon size={16} strokeWidth={1.75} />
{n.label}
@ -54,6 +60,16 @@ function Shell() {
</div>
</nav>
{menuOpen && <div className="menu-backdrop" onClick={() => setMenuOpen(false)} />}
<header className="top-bar">
<button className="top-bar-burger" onClick={() => setMenuOpen(o => !o)}>
<Menu size={20} strokeWidth={1.75} />
</button>
<DollarSign size={18} strokeWidth={1.75} color="var(--gold)" />
<span className="top-bar-title">Wage Costs</span>
</header>
<main className="content">
{page === 'weekly' && <Weekly />}
{page === 'monthly' && <Monthly />}
@ -62,19 +78,6 @@ function Shell() {
{page === 'budgets' && <Budgets />}
{page === 'settings' && <SettingsPage />}
</main>
<nav className="bottom-nav">
{visibleNav.map(n => (
<div
key={n.id}
className={`bottom-nav-item${page === n.id ? ' active' : ''}`}
onClick={() => setPage(n.id)}
>
<n.icon size={18} strokeWidth={1.75} />
<span>{n.label}</span>
</div>
))}
</nav>
</div>
)
}