Skip to content

Close Menu #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MaddieWright merged 1 commit into from
Mar 11, 2026
Merged

Close Menu #70

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions frontend/components/ui-sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Cross1 from '@/components/radix/cross1';
import NodeButton from './node-button';
import React, { useState } from 'react';
import { Input } from '@/components/ui/input';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
import { ChevronDown } from 'lucide-react';


export default function Sidebar() {
Expand Down Expand Up @@ -42,6 +42,7 @@ export default function Sidebar() {
];

const [searchTerm, setSearchTerm] = useState('');
const [collapsed, setCollapsed] = useState(false);

const filteredNodes = AvailableNodes.filter((node) =>
node.label.toLowerCase().includes(searchTerm.toLowerCase())
Expand All @@ -53,32 +54,42 @@ export default function Sidebar() {
<Card className="max-h-[calc(100vh-2rem)] flex flex-col ">
<CardHeader className="flex flex-row items-center justify-between pb-4">
<CardTitle className="font-ibmplex font-semibold text-xl text-black">Menu</CardTitle>
<Cross1 />
<button
onClick={() => setCollapsed(!collapsed)}
className="p-1 rounded hover:bg-gray-100"
aria-label={collapsed ? 'Expand menu' : 'Collapse menu'}
>
{collapsed ? <ChevronDown size={15} /> : <Cross1 />}
</button>
</CardHeader>

<div className='pb-4'>
<Input
type="text"
placeholder="Search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="items-center px-7 py-2 mx-4 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700 placeholder-gray-500"
/>
</div>
{!collapsed && (
<>
<div className='pb-4'>
<Input
type="text"
placeholder="Search"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="items-center px-7 py-2 mx-4 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700 placeholder-gray-500"
/>
</div>

<CardContent className="overflow-y-auto flex-1 px-4 pb-4 space-y-3">
{(searchTerm ? filteredNodes : AvailableNodes).map((node) => (
<NodeButton
key={node.id}
id={node.id}
label={node.label}
description={node.description}
/>
))}
</CardContent>
<CardContent className="overflow-y-auto flex-1 px-4 pb-4 space-y-3">
{(searchTerm ? filteredNodes : AvailableNodes).map((node) => (
<NodeButton
key={node.id}
id={node.id}
label={node.label}
description={node.description}
/>
))}
</CardContent>
</>
)}
</Card>
</ResizablePanel>
<ResizableHandle withHandle className="bg-border-none" />
<ResizableHandle withHandle className={collapsed ? 'invisible' : 'bg-border-none'} />
<ResizablePanel defaultSize={40} minSize={5} />
</ResizablePanelGroup>
);
Expand Down
Loading