@eisgs/topline v1.2.2

Виджет Topline (ЕСМ)

Единое сервисное меню

import { BrowserRouter } from 'react-router-dom';
import { DateRangeFilledIcon } from '@eisgs/icon';

const navConfig = [
  {
    id: 1,
    title: 'Ссылка первого уровня',
    linkProps: {
      to: '/customRoute-1',
    },
  },
  {
    id: 2,
    title: 'Элемент навигации с вложенными ссылками',
    children: [
      {
        id: 3,
        title: 'Внутренняя ссылка',
        linkProps: {
          to: '/customRoute-2',
        },
      },
      {
        id: 4,
        title: 'Внешняя ссылка',
        linkProps: {
          to: { pathname: 'https://ya.ru' },
          target: '_blank',
        },
      },
    ],
  },
];

const profileConfig = {
  firstName: 'Василий',
  lastName: 'Кандинский',
  middleName: 'Васильевич',
  org: 'Москва',
  nav: [
    {
      id: 1,
      title: 'Профиль организации',
      link: 'https://xn--80az8a.xn--d1aqf.xn--p1ai/',
    },
    {
      id: 2,
      title: 'Выйти',
      Component: <div style={{ padding: '24px 24px 24px 32px' }}>Кастомный компонент</div>,
    },
    {
      id: 3,
      title: 'Выйти',
      onClick: () => {
        alert('Я вышел');
      },
    },
  ],
};

const hintNavConfig = [
  {
    id: 4,
    title: 'Кастомный заголовок',
    subtitle: 'Кастомное описание',
    link: 'https://ya.ru',
    target: '_blank',
  },
];

const customIconConfig = {
  Icon: DateRangeFilledIcon,
  linkProps: {
    to: '/#topline',
  },
};

<div style={{ height: '300px' }}>
  <BrowserRouter>
    <Topline
      containerWidth={1200}
      toplineStyles={{ position: 'relative' }}
      sidebarStyles={{ position: 'relative', top: 0, height: 'auto' }}
      navConfig={navConfig}
      profileConfig={profileConfig}
      hintNavConfig={hintNavConfig}
      customIconConfig={customIconConfig}
      logoName="Мое название личного кабинета"
      logoLinkProps={{
        to: 'customLogoRoute',
      }}
      token="my awesome token"
    />
  </BrowserRouter>
</div>;