Make portal mobile-friendly with floating buttons and slide-over panels

Replace fixed sidebar with floating action buttons (menu + add node) in
bottom-left corner. Sidebar and node panel now slide in as overlay drawers
with backdrop dismiss, capped width for small screens, and slide animations.
This commit is contained in:
2026-02-02 17:10:32 +01:00
parent 08c26754a8
commit fc075a377b
4 changed files with 106 additions and 31 deletions

View File

@@ -9,18 +9,23 @@ export default function Sidebar({
selectedId,
onSelect,
onAddNode,
onClose,
}: {
selectedId: string | null;
onSelect: (id: string) => void;
onAddNode: () => void;
onClose: () => void;
}) {
const [kindFilter, setKindFilter] = useState('');
const { data: nodes, isLoading } = useNodes(kindFilter ? { kind: kindFilter } : undefined);
return (
<aside className="w-72 bg-gray-900 border-r border-gray-800 flex flex-col h-full">
<aside className="h-full bg-gray-900 border-r border-gray-800 flex flex-col">
<div className="p-4 border-b border-gray-800">
<h1 className="text-lg font-bold text-white mb-3">Cortex Portal</h1>
<div className="flex items-center justify-between mb-3">
<h1 className="text-lg font-bold text-white">Cortex Portal</h1>
<button onClick={onClose} className="text-gray-500 hover:text-white text-xl leading-none">&times;</button>
</div>
<SearchBar onSelect={onSelect} />
<div className="flex gap-1 mt-3 flex-wrap">
{KINDS.map((k) => (