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

feat(portal): collapsible sidebar in app frame

Browse source 
When an app is open, the sidebar collapses to a 44px strip with a
chevron button. Clicking it opens the full sidebar as a fixed overlay
with a backdrop that closes on click. Also closes automatically when
the user interacts with / navigates within the iframe (window blur).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-02 15:56:04 +00:00
parent b08291aefe
commit 7667551f07
2 changed files with 71 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/Sidebar.tsx
View file

@ -1,12 +1,12 @@
import { useState } from 'react'
import { NavLink, useNavigate, useLocation } from 'react-router-dom'
import { LayoutGrid, Users, Activity, Settings, LogOut, ChevronDown, ShieldCheck, Building2 } from 'lucide-react'
import { LayoutGrid, Users, Activity, Settings, LogOut, ChevronDown, ChevronLeft, ShieldCheck, Building2 } from 'lucide-react'
import { AppIcon } from './AppIcon'
import type { User, App } from '../types'
interface Props { user: User; activeSlug?: string }
interface Props { user: User; activeSlug?: string; onCollapse?: () => void }
export function Sidebar({ user, activeSlug }: Props) {
export function Sidebar({ user, activeSlug, onCollapse }: Props) {
const navigate = useNavigate()
const location = useLocation()
@ -52,13 +52,27 @@ export function Sidebar({ user, activeSlug }: Props) {
display: 'flex', flexDirection: 'column', height: '100dvh',
position: 'sticky', top: 0,
}}>
<div style={{ padding: '1.25rem 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }}>
<div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.06em' }}>
MANAGE
</div>
<div style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>
{import.meta.env.VITE_HOTEL_NAME}
<div style={{
padding: '1.25rem 1rem 1rem', borderBottom: '1px solid var(--surface-2)',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
}}>
<div>
<div style={{ color: 'var(--gold)', fontWeight: 700, fontSize: '0.9rem', letterSpacing: '0.06em' }}>
MANAGE
</div>
<div style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>
{import.meta.env.VITE_HOTEL_NAME}
</div>
</div>
{onCollapse && (
<button onClick={onCollapse} title="Close menu" style={{
background: 'none', border: 'none', cursor: 'pointer',
color: 'var(--text-muted)', padding: '0.25rem',
display: 'flex', alignItems: 'center', borderRadius: 4,
}}>
<ChevronLeft size={16} strokeWidth={1.75} />
</button>
)}
</div>
<nav style={{ flex: 1, overflowY: 'auto', padding: '0.5rem 0' }}>