Панель приложения

Панель приложения — это <header> со строкой внутри. Части разделены, чтобы вы могли их расставить: appBarNav() для ссылок, appBarSpacer(), чтобы отодвинуть всё следующее к дальнему краю, и appBarActions() для кнопок в конце.

Простая панель

sitelo

appBar({ brand: 'sitelo' },
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'soft' }, 'Войти'),
  ),
)

С навигацией

navLink() — стиль ссылки для панели; current помечает активную страницу не только цветом, но и aria-current.

sitelo

appBar({ brand: 'sitelo' },
  appBarNav(
    navLink({ href: '#docs', current: true }, 'Документация'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Примеры'),
  ),
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'GitHub'),
    button({ size: 'sm' }, 'Начать'),
  ),
)

Марка со знаком

Марка принимает любую разметку и ведёт на /, если href не говорит иначе.

Ssitelo

v2.6.3

appBar({
  href: '#home',
  brand: stack({ direction: 'row', gap: 'sm', inline: true, align: 'center' },
    avatar({ name: 'S', size: 'sm', square: true, color: 'primary' }),
    'sitelo',
  ),
},
  appBarSpacer(),
  appBarActions(chip({ size: 'sm', color: 'neutral' }, 'v2.6.3')),
)

Липкая и размытая

sticky прикрепляет панель к верху контейнера прокрутки; blur делает её полупрозрачной, чтобы содержимое проходило под ней. Здесь показано и то и другое внутри прокручиваемого блока, а не на самой странице.

sitelo

sticky

Прокрутите меня — абзац 1.

Прокрутите меня — абзац 2.

Прокрутите меня — абзац 3.

Прокрутите меня — абзац 4.

Прокрутите меня — абзац 5.

Прокрутите меня — абзац 6.

div({ style: 'height: 12rem; overflow: auto; border: 1px solid var(--su-border); border-radius: 0.6rem' },
  appBar({ brand: 'sitelo', sticky: true, blur: true },
    appBarSpacer(),
    appBarActions(chip({ size: 'sm', color: 'primary' }, 'sticky')),
  ),
  container({ size: 'sm', style: 'padding-block: 1rem' },
    stack({ gap: 'md' },
      ...Array.from({ length: 6 }, (unused, index) =>
        text({ variant: 'small', tone: 'muted' }, 'Прокрутите меня — абзац ' + (index + 1) + '.'),
      ),
    ),
  ),
)

С боковой панелью на узких экранах

Обычный приём: ссылки в панели на десктопе и кнопка, открывающая drawer() на телефоне. Боковая панель — это popover, так что кнопке скрипт не нужен.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Открыть навигацию',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Навигация' },
    navLink({ href: '#docs' }, 'Документация'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Примеры'),
  ),
)

Пропсы

appBar():

Проп	Тип	По умолчанию	Описание
`brand`	`Child`	—	Содержимое ссылки-марки в начале.
`href`	`string`	`'/'`	Куда ведёт марка.
`sticky`	`boolean`	`false`	Прикрепляет панель к верху при прокрутке.
`blur`	`boolean`	`false`	Полупрозрачный фон с размытием под ним.
`as`	`string`	`'header'`	Какой элемент рендерить.

Части:

Часть	Пропсы	По умолчанию	Описание
`appBarNav`		—	Элемент nav, в котором лежат ссылки.
`appBarSpacer`		—	Гибкий пробел; всё после него уходит к дальнему краю.
`appBarActions`		—	Группа кнопок в конце.
`navLink`	`href, current, color`	—	Ссылка в стиле панели; current помечает активную страницу.