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:
@@ -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">×</button>
|
||||
</div>
|
||||
<SearchBar onSelect={onSelect} />
|
||||
<div className="flex gap-1 mt-3 flex-wrap">
|
||||
{KINDS.map((k) => (
|
||||
|
||||
Reference in New Issue
Block a user