Vue PageAside Component

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

Prop	Default	Type
`as`	`'aside'`	`any` The element or component this component should render as.
`b24ui`		`{ root?: ClassNameValue; container?: ClassNameValue; top?: ClassNameValue; topHeader?: ClassNameValue; topBody?: ClassNameValue; topFooter?: ClassNameValue; }`

Slots

Slot	Type
`top`	`{}`
`default`	`{}`
`bottom`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    pageAside: {
      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'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        pageAside: {
          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'
          }
        }
      }
    })
  ]
})

Page

A page grid divided into three columns: left sidebar, main content area, and right sidebar.

PageBody

A container for the main content of the page.