portfolio/src/widgets/Navigation/ui/SidebarNav.tsx

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { CONTACT_LINKS, cn } from '$shared/lib';
import type { NavItem } from '../model/types';

/**
 * Props for SidebarNav.
 */
interface Props {
  /**
   * Navigation items to render
   */
  items: NavItem[];
}

/**
 * Fixed sidebar navigation, visible on lg+ screens.
 * Active section determined by current URL pathname.
 */
export function SidebarNav({ items }: Props) {
  const pathname = usePathname();

  /**
   * An item is active when its slug matches the current pathname,
   * or when the pathname is root and it is the first item.
   */
  function isActive(item: NavItem): boolean {
    if (pathname === `/${item.id}`) {
      return true;
    }
    if (pathname === '/' && items[0]?.id === item.id) {
      return true;
    }
    return false;
  }

  return (
    <nav className="fixed top-0 left-0 h-screen w-full lg:w-1/3 bg-cream brutal-border-right hidden lg:block overflow-y-auto z-50">
      <div className="px-8 py-12 space-y-2">
        <div className="mb-12">
          <h2>Index</h2>
          <div className="brutal-border-top pt-4">
            <p className="text-sm opacity-60">Digital Monograph</p>
          </div>
        </div>

        {items.map((item) => (
          <Link
            key={item.id}
            href={`/${item.id}`}
            className={cn(
              'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
              isActive(item)
                ? 'shadow-brutal-2xl opacity-100 translate-x-0'
                : 'opacity-40 shadow-none hover:opacity-60',
            )}
          >
            <div className="flex items-baseline gap-4">
              <span className="text-sm opacity-60">{item.number}</span>
              <span className="font-heading text-xl font-black">{item.label}</span>
            </div>
          </Link>
        ))}

        <div className="mt-12 pt-12 brutal-border-top">
          <p className="text-sm uppercase tracking-wider mb-4 opacity-60">Quick Links</p>
          <div className="space-y-3">
            <a href={`mailto:${CONTACT_LINKS.email}`} className="block">
              Email
            </a>
            <a href={CONTACT_LINKS.linkedin} className="block">
              LinkedIn
            </a>
            <a href={CONTACT_LINKS.instagram} className="block">
              Instagram
            </a>
            <a href={CONTACT_LINKS.arena} className="block">
              Are.na
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
}