47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import { BookOpen, Tag, Trash2 } from 'lucide-react';
|
|
import { PaneLayout } from '@/app/carnet/page';
|
|
|
|
interface NavigationProps {
|
|
onLayoutChange?: (layout: PaneLayout) => void;
|
|
}
|
|
|
|
export const Navigation: React.FC<NavigationProps> = ({ onLayoutChange }) => {
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
|
<h2 className="text-menu-item font-medium text-text">Navigation</h2>
|
|
</div>
|
|
|
|
{/* Navigation Items */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div
|
|
className="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
|
onClick={() => onLayoutChange?.(PaneLayout.ItemSelection)}
|
|
>
|
|
<BookOpen className="w-5 h-5 mr-3 text-passive-1" />
|
|
<h3 className="text-menu-item font-medium text-text">All Notes</h3>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
|
onClick={() => onLayoutChange?.(PaneLayout.TagSelection)}
|
|
>
|
|
<Tag className="w-5 h-5 mr-3 text-passive-1" />
|
|
<h3 className="text-menu-item font-medium text-text">Tags</h3>
|
|
</div>
|
|
|
|
<div
|
|
className="flex items-center p-3 hover:bg-contrast cursor-pointer"
|
|
onClick={() => onLayoutChange?.(PaneLayout.TableView)}
|
|
>
|
|
<Trash2 className="w-5 h-5 mr-3 text-passive-1" />
|
|
<h3 className="text-menu-item font-medium text-text">Trash</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|