brand_book/apps/web/components/layout/Sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

type NavItem = {
  label: string;
  href: string;
  soon?: boolean;
};

type NavSection = {
  title: string;
  items: NavItem[];
};

const NAV: NavSection[] = [
  {
    title: "Фундамент",
    items: [
      { label: "Логотип", href: "/foundation/logo" },
      { label: "Цвета", href: "/foundation/colors" },
      { label: "Типографика", href: "/foundation/typography" },
      { label: "Иконография", href: "/foundation/icons", soon: true },
    ],
  },
  {
    title: "Компоненты",
    items: [
      { label: "Кнопки", href: "/components/buttons", soon: true },
      { label: "Форм-контролы", href: "/components/forms", soon: true },
      { label: "Карточки", href: "/components/cards", soon: true },
      { label: "Бейджи и теги", href: "/components/badges", soon: true },
      { label: "Алерты", href: "/components/alerts", soon: true },
      { label: "Модальные окна", href: "/components/modals", soon: true },
      { label: "Таблицы", href: "/components/tables", soon: true },
      { label: "Навигация", href: "/components/navigation", soon: true },
    ],
  },
  {
    title: "Блоки",
    items: [
      { label: "Hero", href: "/blocks/hero", soon: true },
      { label: "CEO-текст", href: "/blocks/ceo", soon: true },
      { label: "Наши врачи", href: "/blocks/doctors", soon: true },
      { label: "Отзывы", href: "/blocks/reviews", soon: true },
      { label: "Новости", href: "/blocks/news", soon: true },
      { label: "Формы контакта", href: "/blocks/contact-forms", soon: true },
      { label: "Контакт", href: "/blocks/contact", soon: true },
      { label: "Услуги", href: "/blocks/services", soon: true },
    ],
  },
  {
    title: "Страницы",
    items: [
      { label: "Главная", href: "/pages/home", soon: true },
      { label: "Заболевание", href: "/pages/disease", soon: true },
      { label: "Все врачи", href: "/pages/doctors", soon: true },
      { label: "Врач", href: "/pages/doctor", soon: true },
      { label: "Цены", href: "/pages/prices", soon: true },
      { label: "Контакты", href: "/pages/contacts", soon: true },
    ],
  },
  {
    title: "Оффлайн элементы",
    items: [
      { label: "Форма сотрудников", href: "/offline/uniform" },
      { label: "Бейджи", href: "/offline/badges" },
      { label: "Навигация", href: "/offline/navigation" },
      { label: "Транспорт", href: "/offline/transport" },
      { label: "Печать", href: "/offline/print" },
    ],
  },
  {
    title: "Эксперименты",
    items: [
      { label: "Библиотека", href: "/experiments", soon: true },
    ],
  },
];

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside
      className="w-64 shrink-0 h-screen overflow-y-auto border-r flex flex-col"
      style={{
        background: "var(--bb-sidebar-bg)",
        borderColor: "var(--bb-sidebar-border)",
      }}
    >
      {/* Логотип брендбука */}
      <div
        className="px-5 py-4 border-b"
        style={{ borderColor: "var(--bb-sidebar-border)" }}
      >
        <p
          className="text-xs font-semibold uppercase tracking-widest mb-0.5"
          style={{ color: "var(--brand-053m)" }}
        >
          Брендбук
        </p>
        <p
          className="text-xs leading-tight"
          style={{ color: "var(--bb-sidebar-text-muted)" }}
        >
          Клиника ухо, горло, нос
          <br />
          им. проф. Е.Н.Оленевой
        </p>
      </div>

      {/* Навигация */}
      <nav className="flex-1 px-3 py-4 space-y-5">
        {NAV.map((section) => (
          <div key={section.title}>
            <p
              className="px-2 mb-1 text-[10px] font-semibold uppercase tracking-widest"
              style={{ color: "var(--bb-sidebar-section)" }}
            >
              {section.title}
            </p>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const isActive = pathname === item.href;
                return (
                  <li key={item.href}>
                    <Link
                      href={item.soon ? "#" : item.href}
                      className="flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors"
                      style={{
                        color: isActive
                          ? "var(--brand-073m)"
                          : item.soon
                          ? "var(--bb-sidebar-text-muted)"
                          : "var(--bb-sidebar-text)",
                        background: isActive
                          ? "var(--bb-sidebar-active-bg)"
                          : "transparent",
                        fontWeight: isActive ? 500 : 400,
                        cursor: item.soon ? "default" : "pointer",
                      }}
                    >
                      {item.label}
                      {item.soon && (
                        <span
                          className="text-[10px] px-1.5 py-0.5 rounded"
                          style={{
                            background: "#f3f4f6",
                            color: "var(--bb-sidebar-section)",
                          }}
                        >
                          скоро
                        </span>
                      )}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>

      {/* Версия */}
      <div
        className="px-5 py-3 border-t text-xs"
        style={{
          borderColor: "var(--bb-sidebar-border)",
          color: "var(--bb-sidebar-text-muted)",
        }}
      >
        Sprint 2 · v0.2.0
      </div>
    </aside>
  );
}