NODEDC_DESIGN_GUIDELINE/packages/ui-react/src/AdminNavigationPanel.tsx

import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "./cn.js";
import { SortableList } from "./DragDrop.js";
import { Icon } from "./Icon.js";

export interface AdminNavigationContext {
  id: string;
  label: string;
  description?: string;
  groupLabel?: string;
  icon?: ReactNode;
  active?: boolean;
  onSelect?: () => void;
  onToggle?: () => void;
}

export interface AdminNavigationItem {
  id: string;
  label: string;
  icon?: ReactNode;
  sortable?: boolean;
}

export interface AdminNavigationPanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
  eyebrow?: string;
  title: ReactNode;
  contexts?: AdminNavigationContext[];
  headerActions?: ReactNode;
  contextSlot?: ReactNode;
  items: AdminNavigationItem[];
  activeId?: string;
  footer?: ReactNode;
  closeLabel?: string;
  navigationLabel?: string;
  onClose: () => void;
  onItemChange: (id: string) => void;
  onItemsReorder?: (ids: string[]) => void;
}

export function AdminNavigationPanel({
  eyebrow = "NODE.DC",
  title,
  contexts = [],
  headerActions,
  contextSlot,
  items,
  activeId,
  footer,
  closeLabel = "Закрыть администрирование",
  navigationLabel = "Разделы администрирования",
  onClose,
  onItemChange,
  onItemsReorder,
  className,
  ...props
}: AdminNavigationPanelProps) {
  return (
    <aside className={cn("nodedc-admin-panel", className)} data-has-contexts={contexts.length > 0 || contextSlot ? "true" : undefined} {...props}>
      <header className="nodedc-admin-panel__head">
        <div>
          <p>{eyebrow}</p>
          <h2>{title}</h2>
        </div>
        <div className="nodedc-admin-panel__head-actions">
          {headerActions}
          <button type="button" className="nodedc-admin-panel__close" aria-label={closeLabel} onClick={onClose}>
            <Icon name="close" size={16} strokeWidth={1.6} />
          </button>
        </div>
      </header>

      {contextSlot ? <div className="nodedc-admin-panel__context-slot">{contextSlot}</div> : null}

      {contexts.length > 0 ? <div className="nodedc-admin-panel__contexts">
        {contexts.map((context) => (
          <div className="nodedc-admin-panel__context-group" key={context.id}>
            {context.groupLabel ? <span className="nodedc-admin-panel__group-label">{context.groupLabel}</span> : null}
            <div
              className={cn("nodedc-admin-context", context.onToggle && "nodedc-admin-context--split")}
              data-active={context.active ? "true" : undefined}
            >
              <button type="button" className="nodedc-admin-context__main" onClick={context.onSelect}>
                <span className="nodedc-admin-context__icon" aria-hidden="true">{context.icon}</span>
                <span className="nodedc-admin-context__body">
                  <strong>{context.label}</strong>
                  {context.description ? <small>{context.description}</small> : null}
                </span>
              </button>
              {context.onToggle ? (
                <button type="button" className="nodedc-admin-context__toggle" aria-label={`Выбрать: ${context.label}`} onClick={context.onToggle}>
                  <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
                </button>
              ) : null}
            </div>
          </div>
        ))}
      </div> : null}

      <nav className="nodedc-admin-panel__nav" aria-label={navigationLabel}>
        {items.filter((item) => !item.sortable).map((item) => (
          <button
            key={item.id}
            type="button"
            className="nodedc-admin-panel__nav-item"
            data-active={activeId === item.id ? "true" : undefined}
            onClick={() => onItemChange(item.id)}
          >
            <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">{item.icon}</span>
            <span>{item.label}</span>
          </button>
        ))}
        {items.some((item) => item.sortable) ? (
          <SortableList
            className="nodedc-admin-panel__sortable-nav"
            items={items.filter((item) => item.sortable)}
            getId={(item) => item.id}
            onReorder={(next) => onItemsReorder?.(next.map((item) => item.id))}
          >
            {(item, { handle }) => (
              <div className="nodedc-admin-panel__sortable-row">
                <button
                  type="button"
                  className="nodedc-admin-panel__nav-item"
                  data-active={activeId === item.id ? "true" : undefined}
                  onClick={() => onItemChange(item.id)}
                >
                  <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">{item.icon}</span>
                  <span>{item.label}</span>
                </button>
                {handle}
              </div>
            )}
          </SortableList>
        ) : null}
      </nav>

      {footer ? <footer className="nodedc-admin-panel__footer">{footer}</footer> : null}
    </aside>
  );
}