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