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' }}>

52
src/pages/AppFrame.tsx
View file

@ -1,4 +1,6 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { ChevronRight } from 'lucide-react'
import { Sidebar } from '../components/Sidebar'
import type { User } from '../types'
@ -6,6 +8,15 @@ export function AppFrame({ user }: { user: User }) {
const { slug } = useParams<{ slug: string }>()
const navigate = useNavigate()
const app = user.apps.find(a => a.slug === slug)
const [menuOpen, setMenuOpen] = useState(false)
// Auto-close when user clicks into / navigates within the iframe
useEffect(() => {
if (!menuOpen) return
const close = () => setMenuOpen(false)
window.addEventListener('blur', close)
return () => window.removeEventListener('blur', close)
}, [menuOpen])
if (!app) {
return (
@ -25,11 +36,44 @@ export function AppFrame({ user }: { user: User }) {
return (
<div style={{ display: 'flex', height: '100dvh' }}>
<Sidebar user={user} activeSlug={slug} />
{/* Collapsed sidebar strip */}
<div style={{
width: 44, flexShrink: 0,
background: 'var(--navy)', borderRight: '1px solid var(--surface-2)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
height: '100dvh', position: 'sticky', top: 0,
}}>
<button
onClick={() => setMenuOpen(true)}
title="Open menu"
style={{
background: 'none', border: 'none', cursor: 'pointer',
color: 'var(--text-muted)', padding: '0.5rem',
display: 'flex', alignItems: 'center', justifyContent: 'center',
borderRadius: 6,
}}
>
<ChevronRight size={18} strokeWidth={1.75} />
</button>
</div>
{/* Overlay sidebar + backdrop when open */}
{menuOpen && (
<>
<div
onClick={() => setMenuOpen(false)}
style={{ position: 'fixed', inset: 0, zIndex: 19, background: 'rgba(0,0,0,0.35)' }}
/>
<div style={{ position: 'fixed', left: 0, top: 0, height: '100dvh', zIndex: 20 }}>
<Sidebar user={user} activeSlug={slug} onCollapse={() => setMenuOpen(false)} />
</div>
</>
)}
{/* App iframe */}
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
<div style={{
height: '3px', background: app.theme_color, flexShrink: 0,
}} />
<div style={{ height: '3px', background: app.theme_color, flexShrink: 0 }} />
<iframe
src={`${app.base_path}/`}
title={app.name}