NavBar

import { NavBar } from '@megafon/ui-lk-vas';

Примеры и код

Свойства и методы

Базовое использование

<NavBar
      items={[
          { title: "Главная", iconSrc: sphere.src, href: "#", isActive: true },
          { title: "Управление кампаниям", iconSrc: router.src, href: "#" },
          { title: "Статистика", iconSrc: statistics.src, href: "#" },
          { title: "Параметры", iconSrc: folders.src, href: "#" },
          { title: "Доп.возможности", iconSrc: settings.src, href: "#" },
          { title: "Помощь", iconSrc: lens.src, href: "#" },
      ]}
      button={{ title: "Сервисы МегаФона", href: "#" }}
  />

Поведение при ограниченной высоте контейнера

<div style={{ height: '400px' }}>
      <NavBar
          items={[
              { title: "Главная", iconSrc: sphere.src, href: "#" },
              { title: "Управление кампаниям", iconSrc: router.src, href: "#" },
              { title: "Статистика", iconSrc: statistics.src, href: "#" },
              { title: "Параметры", iconSrc: folders.src, href: "#" },
              { title: "Доп.возможности", iconSrc: settings.src, href: "#" },
              { title: "Помощь", iconSrc: lens.src, href: "#" },
          ]}
          button={{ title: "Сервисы МегаФона", href: "#" }}
      />
  </div>

Элемент меню с компонентом-оберткой

<NavBar
      items={[
          { title: "Главная", iconSrc: sphere.src, href: "#", renderWrapper: item => <div className="router-link">{item}</div> },
          { title: "Помощь", iconSrc: lens.src, href: "#" },
      ]}
      button={{ title: "Сервисы МегаФона", href: "#" }}
  />

Prop name	Type	Description
className	string	Дополнительный класс корневого элемента
items*	INavBarItem[]	Элементы списка
button	ButtonType	Кнопка

interface INavBarItem {
    /** Заголовок */
    title: string;
    /** Ссылка на иконку в формате .png */
    iconSrc: string;
    /** Статус активности  */
    isActive?: boolean;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
    /** Функция рендера компонента-обертки */
    renderWrapper?: (item: React.ReactNode) => React.ReactNode;
}

type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
};