@admui/navigation v0.4.19

Элемент навигации без состояния

import { MemoryRouter } from 'react-router-dom'
import { PlainRouteItem, PlainItem } from '@admui/navigation'
import { ThemeProvider } from '@admui/theme'
import { Panel } from '@admui/panel'

;<ThemeProvider>
  <MemoryRouter>
    <div style={{ width: 64, height: 250 }}>
      <Panel attach='left'>
        <div style={{ height: 64, width: 64 }}>
          <PlainRouteItem to='/test'>
            A
          </PlainRouteItem>
        </div>
        <div style={{ height: 64, width: 64 }}>
          <PlainItem onClick={() => console.log('click')}>
            B
          </PlainItem>
        </div>
      </Panel>
    </div>
  </MemoryRouter>
</ThemeProvider>

Элемент навигации

import { MemoryRouter } from 'react-router-dom'
import { RouteItem, Item } from '@admui/navigation'
import { ThemeProvider } from '@admui/theme'
import { Panel } from '@admui/panel'

;<ThemeProvider>
  <MemoryRouter>
    <div style={{ width: 64, height: 250 }}>
      <Panel attach='left'>
        <div style={{ height: 64, width: 64 }}>
          <RouteItem to='/test'>
            A
          </RouteItem>
        </div>
        <div style={{ height: 64, width: 64 }}>
          <RouteItem to='/test2'>
            B
          </RouteItem>
        </div>
        <div style={{ height: 64, width: 64 }}>
          <Item onClick={() => console.log('click')}>
            C
          </Item>
        </div>
      </Panel>
    </div>
  </MemoryRouter>
</ThemeProvider>

Элемент навигации с меню

import { MemoryRouter } from 'react-router-dom'
import { ThemeProvider } from '@admui/theme'
import { MenuItem } from '@admui/navigation'
import { MenuIcon } from '@admui/icons'
import { Panel } from '@admui/panel'

;<ThemeProvider>
  <MemoryRouter>
    <div style={{ width: 64, height: 250 }}>
      <Panel attach='left'>
        <div style={{ height: 64, width: 64 }}>
          <MenuItem
            layer={
              <div style={{ width: 100, height: 100 }}>
                <Panel />
              </div>
            }
          >
            <MenuIcon width={24} height={24} />
          </MenuItem>
        </div>
      </Panel>
    </div>
  </MemoryRouter>
</ThemeProvider>

Ссылки навигации

import { MemoryRouter } from 'react-router-dom'
import { UserIcon, UsersIcon } from '@admui/icons'
import { ThemeProvider } from '@admui/theme'
import { Links } from '@admui/navigation'
import { Panel } from '@admui/panel'

const items = [{
  title: 'Управление пользователями',
  links: [{
    name: 'Пользователи',
    icon: UserIcon,
    to: '/users',
  }, {
    name: 'Группы пользователей',
    icon: UsersIcon,
    to: '/user-groups',
  }]
}]

;<ThemeProvider>
  <MemoryRouter>
    <div style={{ width: '100%', height: 250 }}>
      <Panel>
        <div style={{ padding: 24 }}>
          <Links
            items={items}
          />
        </div>
      </Panel>
    </div>
  </MemoryRouter>
</ThemeProvider>

История навигации

import { MemoryRouter, Link } from 'react-router-dom'
import { UserIcon, UsersIcon } from '@admui/icons'
import { ThemeProvider } from '@admui/theme'
import { History } from '@admui/navigation'
import { Panel } from '@admui/panel'

const items = [{
  name: 'Пользователи',
  icon: UserIcon,
  to: '/users',
}, {
  name: 'Группы пользователей',
  icon: UsersIcon,
  to: '/user-groups',
}]

;<ThemeProvider>
  <MemoryRouter>
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <div style={{ width: 64, height: 250 }}>
        <Panel attach='left'>
          <History items={items} />
        </Panel>
      </div>
      <div style={{ padding: 40 }}>
        <div>
          <Link to='/users'>
            Users
          </Link>
        </div>
        <div>
          <Link to='/user-groups'>
            User Groups
          </Link>
        </div>
      </div>
    </div>
  </MemoryRouter>
</ThemeProvider>