'use client'; import React, { useEffect, useMemo, useRef, useState } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { ChevronLeft, ChevronRight } from 'lucide-react'; import { toCollectionSlug } from '@/lib/collections'; import type { Collection } from '@/utils/api'; import { cn } from '@/lib/utils'; export function CollectionSidebar({ collections, currentSlug, }: { collections: Collection[]; currentSlug: string; }) { const [collapsed, setCollapsed] = useState(false); const activeRef = useRef(null); const pathname = usePathname(); const isTrends = pathname?.endsWith('/trends') || pathname?.endsWith('/trends/'); const filteredCollections = useMemo( () => [...collections].sort((left, right) => left.name.localeCompare(right.name)), [collections], ); useEffect(() => { activeRef.current?.scrollIntoView({ block: 'center' }); }, [currentSlug]); return ( ); }