On screens ≤600px the sidebar collapses off-screen. A hamburger button in the message header opens it as a slide-over drawer with a dim overlay; tapping a room/network or the ✕ button closes it. Desktop layout is unchanged. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
18 lines
660 B
TypeScript
18 lines
660 B
TypeScript
import { useState } from 'react'
|
|
import { Sidebar } from '../components/Sidebar'
|
|
import { MessagePane } from '../components/MessagePane'
|
|
import { FileBrowser } from '../components/FileBrowser'
|
|
import { useWaste } from '../store'
|
|
|
|
export function Chat() {
|
|
const { activeFilePeer } = useWaste()
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
|
return (
|
|
<div className={`chat-layout${activeFilePeer ? ' has-file-browser' : ''}${sidebarOpen ? ' sidebar-open' : ''}`}>
|
|
<Sidebar onClose={() => setSidebarOpen(false)} />
|
|
<MessagePane onMenuClick={() => setSidebarOpen(v => !v)} />
|
|
{activeFilePeer && <FileBrowser />}
|
|
</div>
|
|
)
|
|
}
|