Usage
The PageAside component is a sticky <aside> element that is only displayed starting from the lg breakpoint.
The PageAside component uses the
--b24ui-header-height CSS variable to position itself correctly below the Header.Use it inside the left or right slot of the Page component:
<template>
<B24Page>
<template #left>
<B24PageAside />
</template>
</B24Page>
</template>
Examples
Within a layout
Use the PageAside component in a layout to display the navigation:
layouts/docs.vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@bitrix24/b24ui-nuxt'
const navigation = inject<Ref<NavigationMenuItem[]>>('navigation')
</script>
<template>
<B24Page>
<template #left>
<B24PageAside>
<B24NavigationMenu
:key="navigationKey"
:items="navigation"
orientation="vertical"
/>
</B24PageAside>
</template>
<slot />
</B24Page>
</template>
In this example, we use the
NavigationMenu component to display the navigation injected in app.vue.API
Props
Slots
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/page-aside.ts
export default {
slots: {
root: 'hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--b24ui-header-height))] lg:sticky lg:top-(--b24ui-header-height)',
container: 'relative',
top: 'sticky -top-8 -mt-8 pointer-events-none z-[1]',
topHeader: 'h-8 bg-(--ui-color-bg-content-primary) -mx-4 px-4',
topBody: 'bg-(--ui-color-bg-content-primary) relative pointer-events-auto flex flex-col -mx-4 px-4',
topFooter: 'h-8 bg-gradient-to-b from-(--ui-color-bg-content-primary) -mx-4 px-4'
}
}