Spaces:
Sleeping
Sleeping
File size: 1,542 Bytes
7949d20 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import ConversationItem from './ConversationItem.jsx'
export default function Sidebar({
conversations,
activeId,
onSelectConv,
onNewChat,
onEditTitle,
onDeleteChat,
sidebarOpen,
sidebarCollapsed,
onToggleCollapse,
onClose,
}) {
return (
<aside className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}>
<div className="sidebar-header">
<div className="brand-row">
<button className="icon-button ghost desktop-only" onClick={onToggleCollapse} aria-label="Toggle sidebar">
{sidebarCollapsed ? '»' : '«'}
</button>
</div>
<div className="mobile-header-row">
<button className="primary new-chat-btn" onClick={onNewChat}>
New chat
</button>
<button className="icon-button ghost mobile-only" onClick={onClose} aria-label="Close sidebar">
✕
</button>
</div>
<button className="primary" onClick={onNewChat}>
New chat
</button>
</div>
<div className="conversation-list">
{conversations.map((conversation) => (
<ConversationItem
key={conversation.id}
conversation={conversation}
isActive={conversation.id === activeId}
onSelect={() => {
onSelectConv(conversation.id)
onClose()
}}
onEditTitle={onEditTitle}
onDelete={onDeleteChat}
/>
))}
</div>
</aside>
)
}
|