From 7667551f0798fe2e703944566af792d604f7168e Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Thu, 2 Jul 2026 15:56:04 +0000
Subject: [PATCH] feat(portal): collapsible sidebar in app frame

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>
---
 src/components/Sidebar.tsx | 32 ++++++++++++++++-------
 src/pages/AppFrame.tsx     | 52 +++++++++++++++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 690547b..751c100 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -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' }}>
diff --git a/src/pages/AppFrame.tsx b/src/pages/AppFrame.tsx
index 7fc1ed1..fb27799 100644
--- a/src/pages/AppFrame.tsx
+++ b/src/pages/AppFrame.tsx
@@ -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}