121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname, useSearchParams } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
Lightbulb,
|
|
Bell,
|
|
Tag,
|
|
Archive,
|
|
Trash2,
|
|
Pencil,
|
|
ChevronRight,
|
|
Plus
|
|
} from 'lucide-react'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { NotebooksList } from './notebooks-list'
|
|
|
|
export function Sidebar({ className, user }: { className?: string, user?: any }) {
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const { labels } = useLabels()
|
|
const { t } = useLanguage()
|
|
|
|
// Helper to determine if a link is active
|
|
const isActive = (href: string, exact = false) => {
|
|
if (href === '/') {
|
|
// Home is active only if no special filters are applied
|
|
return pathname === '/' &&
|
|
!searchParams.get('label') &&
|
|
!searchParams.get('archived') &&
|
|
!searchParams.get('trashed')
|
|
}
|
|
|
|
// For labels
|
|
if (href.startsWith('/?label=')) {
|
|
const labelParam = searchParams.get('label')
|
|
// Extract label from href
|
|
const labelFromHref = href.split('=')[1]
|
|
return labelParam === labelFromHref
|
|
}
|
|
|
|
// For other routes
|
|
return pathname === href
|
|
}
|
|
|
|
const NavItem = ({ href, icon: Icon, label, active }: any) => (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"flex items-center gap-4 px-6 py-3 rounded-r-full mr-2 transition-colors",
|
|
"text-sm font-medium tracking-wide",
|
|
active
|
|
? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-foreground"
|
|
: "text-muted-foreground hover:bg-muted/50 dark:hover:bg-muted/30"
|
|
)}
|
|
>
|
|
<Icon className={cn("w-5 h-5", active ? "fill-current" : "")} />
|
|
<span className="truncate">{label}</span>
|
|
</Link>
|
|
)
|
|
|
|
return (
|
|
<aside className={cn(
|
|
"w-[280px] flex-none flex-col bg-white dark:bg-[#1e2128] overflow-y-auto hidden md:flex py-2",
|
|
className
|
|
)}>
|
|
{/* Main Navigation */}
|
|
<div className="flex flex-col">
|
|
<NavItem
|
|
href="/"
|
|
icon={Lightbulb}
|
|
label={t('sidebar.notes') || 'Notes'}
|
|
active={isActive('/')}
|
|
/>
|
|
<NavItem
|
|
href="/reminders"
|
|
icon={Bell}
|
|
label={t('sidebar.reminders') || 'Rappels'}
|
|
active={isActive('/reminders')}
|
|
/>
|
|
</div>
|
|
|
|
{/* Notebooks Section */}
|
|
<div className="flex flex-col mt-2">
|
|
<NotebooksList />
|
|
</div>
|
|
|
|
|
|
|
|
{/* Archive & Trash */}
|
|
<div className="flex flex-col mt-2 border-t border-transparent">
|
|
<NavItem
|
|
href="/archive"
|
|
icon={Archive}
|
|
label={t('sidebar.archive') || 'Archives'}
|
|
active={pathname === '/archive'}
|
|
/>
|
|
<NavItem
|
|
href="/trash"
|
|
icon={Trash2}
|
|
label={t('sidebar.trash') || 'Corbeille'}
|
|
active={pathname === '/trash'}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer / Copyright / Terms */}
|
|
<div className="mt-auto px-6 py-4 text-[10px] text-gray-400">
|
|
<div className="flex gap-2 mb-1">
|
|
<Link href="#" className="hover:underline">{t('footer.privacy')}</Link>
|
|
<span>•</span>
|
|
<Link href="#" className="hover:underline">{t('footer.terms')}</Link>
|
|
</div>
|
|
<p>{t('footer.openSource')}</p>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|