SidebarLayout

You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful

The styling process is described on the page Theme

Layout

The component must be used as a layout.

{
  "wait": "Loading client-side content..."
}

On mobile devices the sidebar is hidden and accessible via slideover

Inner

If the component needs to be placed inside the content, then the props isInner must be set.

You can control the content area scrollbar using the props offContentScrollbar.

{
  "wait": "Loading client-side content..."
}

Slideover

It should be understood that the Slideover component displays data using the SidebarLayout component.

{
  "wait": "Loading client-side content..."
}

Many examples can be found on the playground and also seen in the demo version.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`useLightContent`	`true`	`boolean` The content is placed on a light background.
`isInner`	`false`	`boolean` Set inner mode. Use in slider, modal and etc
`offContentScrollbar`	`false`	`boolean` Off scrollbar control of the content area in inner mode.
`id`	`useId()`	`string` The id of the SidebarLayout.
`b24ui`		{ root?: ClassNameValue; sidebar?: ClassNameValue; sidebarSlideoverContainer?: ClassNameValue; sidebarSlideover?: ClassNameValue; sidebarSlideoverBtnClose?: ClassNameValue; contentWrapper?: ClassNameValue; header?: ClassNameValue; headerMenuIcon?: ClassNameValue; headerWrapper?: ClassNameValue; pageWrapper?: ClassNameValue; container?: ClassNameValue; containerWrapper?: ClassNameValue; pageTopWrapper?: ClassNameValue; pageActionsWrapper?: ClassNameValue; containerWrapperInner?: ClassNameValue; pageRightWrapper?: ClassNameValue; pageBottomWrapper?: ClassNameValue; loadingWrapper?: ClassNameValue; loadingIcon?: ClassNameValue; }

Slots

Slot	Type
`sidebar`	`{ handleClick: () => void; isLoading: boolean; b24ui: object; }` Left sidebar.
`navbar`	`{ handleClick: () => void; isLoading: boolean; b24ui: object; }` Top menu.
`content-top`	`{ isLoading: boolean; b24ui: object; }` Content above the page. Used for title, filter, etc.
`content-actions`	`{ isLoading: boolean; b24ui: object; }` Content above the page. Use for show actions.
`default`	`{ isLoading: boolean; b24ui: object; }` The page content.
`content-right`	`{ isLoading: boolean; b24ui: object; }` Right sidebar.
`content-bottom`	`{ isLoading: boolean; b24ui: object; }` Content below the page.
`loading`	`{ isLoading: boolean; b24ui: object; }` Loading state.

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    sidebarLayout: {
      slots: {
        root: 'sidebar-layout text-(--b24ui-typography-label-color) w-full flex',
        sidebar: 'air-sidebar before:absolute before:inset-0 before:z-[-1] before:bg-(--leftmenu-bg-expanded) w-[240px] pe-[3px] rtl:me-[14px] inset-y-0 left-0 max-lg:hidden',
        sidebarSlideoverContainer: 'w-full sm:max-w-80',
        sidebarSlideover: 'h-full overflow-hidden flex flex-col text-(--b24ui-typography-label-color) bg-(--ui-color-base-white-fixed) dark:bg-(--ui-color-bg-content-primary) edge-dark:bg-[#21334cf0] ring-1 ring-(--ui-color-divider-vibrant-less) shadow-xs rounded-none',
        sidebarSlideoverBtnClose: '-mb-3 px-4 pt-3',
        contentWrapper: 'flex-1 flex flex-col',
        header: 'air-header px-(--content-area-shift) min-h-(--topbar-height) flex items-center gap-x-1',
        headerMenuIcon: 'lg:hidden',
        headerWrapper: 'min-w-0 flex-1 h-full',
        pageWrapper: 'flex flex-col lg:grid lg:grid-cols-12 lg:gap-[22px]',
        container: 'lg:col-span-12 lg:min-w-0 flex-1 flex flex-col lg:gap-[22px]',
        containerWrapper: 'grow group/layout-content',
        pageTopWrapper: 'text-(--ui-color-base-1) flex items-center gap-[12px]',
        pageActionsWrapper: 'flex flex-col md:flex-row items-start md:items-center justify-start gap-[12px]',
        containerWrapperInner: 'size-full',
        pageRightWrapper: '',
        pageBottomWrapper: '',
        loadingWrapper: 'cursor-wait w-full h-dvh flex flex-row flex-nowrap items-center justify-center',
        loadingIcon: 'text-(--ui-color-design-plain-content-icon-secondary) size-[110px] animate-spin-slow'
      },
      variants: {
        inner: {
          true: {
            root: '--inner light relative isolate h-full overflow-hidden',
            sidebar: 'relative z-[0]',
            header: 'relative',
            container: 'mt-0',
            containerWrapper: '',
            pageBottomWrapper: 'flex-0'
          },
          false: {
            root: '--app max-lg:flex-col',
            sidebar: 'h-screen lg:sticky',
            header: 'relative',
            container: 'relative',
            containerWrapper: ''
          }
        },
        offContentScrollbar: {
          false: '',
          true: ''
        },
        useSidebar: {
          true: '',
          false: ''
        },
        useLightContent: {
          true: {
            containerWrapper: 'light text-(--ui-color-text-primary) bg-(--ui-color-bg-content-primary)',
            loadingIcon: 'edge-dark:text-(--ui-color-gray-70)'
          },
          false: {
            pageWrapper: 'px-(--content-area-shift)',
            container: ''
          }
        },
        loading: {
          true: ''
        },
        useNavbar: {
          true: '',
          false: ''
        },
        useRightBar: {
          true: {
            pageWrapper: '',
            container: 'lg:col-span-10',
            pageRightWrapper: 'lg:col-span-2 order-first lg:order-last'
          },
          false: {
            container: ''
          }
        }
      },
      compoundVariants: [
        {
          inner: true,
          useLightContent: true,
          class: {
            container: '',
            pageTopWrapper: 'px-0 lg:px-0',
            pageActionsWrapper: 'px-0 lg:px-0',
            containerWrapper: 'p-[20px] rounded-(--ui-border-radius-md)'
          }
        },
        {
          inner: false,
          useLightContent: true,
          class: {
            container: '',
            containerWrapper: 'p-6 lg:px-[22px] lg:py-[15px] lg:rounded-(--ui-border-radius-md)'
          }
        },
        {
          inner: true,
          offContentScrollbar: false,
          class: {}
        },
        {
          inner: true,
          useSidebar: [
            true,
            false
          ],
          class: {
            pageWrapper: 'pb-[20px] lg:pt-0 lg:px-[20px] lg:ps-[20px] lg:pe-[20px]'
          }
        },
        {
          inner: false,
          useSidebar: true,
          class: {
            header: 'ps-[calc(var(--content-area-shift)-10px)] pe-[calc(var(--content-area-shift))] lg:px-(--content-area-shift)',
            pageWrapper: 'lg:px-(--content-area-shift)',
            container: '',
            contentWrapper: ''
          }
        },
        {
          inner: false,
          useSidebar: false,
          class: {
            pageWrapper: 'px-(--content-area-shift)',
            container: '',
            contentWrapper: 'lg:pl-0'
          }
        },
        {
          inner: true,
          useNavbar: [
            true,
            false
          ],
          class: {
            container: 'h-full'
          }
        },
        {
          inner: false,
          useNavbar: true,
          class: {
            container: 'h-auto'
          }
        },
        {
          inner: false,
          useNavbar: false,
          class: {
            container: 'h-full'
          }
        }
      ],
      defaultVariants: {
        inner: false,
        noContentScrollbar: false,
        useLightContent: true
      }
    }
  }
})

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: {
        sidebarLayout: {
          slots: {
            root: 'sidebar-layout text-(--b24ui-typography-label-color) w-full flex',
            sidebar: 'air-sidebar before:absolute before:inset-0 before:z-[-1] before:bg-(--leftmenu-bg-expanded) w-[240px] pe-[3px] rtl:me-[14px] inset-y-0 left-0 max-lg:hidden',
            sidebarSlideoverContainer: 'w-full sm:max-w-80',
            sidebarSlideover: 'h-full overflow-hidden flex flex-col text-(--b24ui-typography-label-color) bg-(--ui-color-base-white-fixed) dark:bg-(--ui-color-bg-content-primary) edge-dark:bg-[#21334cf0] ring-1 ring-(--ui-color-divider-vibrant-less) shadow-xs rounded-none',
            sidebarSlideoverBtnClose: '-mb-3 px-4 pt-3',
            contentWrapper: 'flex-1 flex flex-col',
            header: 'air-header px-(--content-area-shift) min-h-(--topbar-height) flex items-center gap-x-1',
            headerMenuIcon: 'lg:hidden',
            headerWrapper: 'min-w-0 flex-1 h-full',
            pageWrapper: 'flex flex-col lg:grid lg:grid-cols-12 lg:gap-[22px]',
            container: 'lg:col-span-12 lg:min-w-0 flex-1 flex flex-col lg:gap-[22px]',
            containerWrapper: 'grow group/layout-content',
            pageTopWrapper: 'text-(--ui-color-base-1) flex items-center gap-[12px]',
            pageActionsWrapper: 'flex flex-col md:flex-row items-start md:items-center justify-start gap-[12px]',
            containerWrapperInner: 'size-full',
            pageRightWrapper: '',
            pageBottomWrapper: '',
            loadingWrapper: 'cursor-wait w-full h-dvh flex flex-row flex-nowrap items-center justify-center',
            loadingIcon: 'text-(--ui-color-design-plain-content-icon-secondary) size-[110px] animate-spin-slow'
          },
          variants: {
            inner: {
              true: {
                root: '--inner light relative isolate h-full overflow-hidden',
                sidebar: 'relative z-[0]',
                header: 'relative',
                container: 'mt-0',
                containerWrapper: '',
                pageBottomWrapper: 'flex-0'
              },
              false: {
                root: '--app max-lg:flex-col',
                sidebar: 'h-screen lg:sticky',
                header: 'relative',
                container: 'relative',
                containerWrapper: ''
              }
            },
            offContentScrollbar: {
              false: '',
              true: ''
            },
            useSidebar: {
              true: '',
              false: ''
            },
            useLightContent: {
              true: {
                containerWrapper: 'light text-(--ui-color-text-primary) bg-(--ui-color-bg-content-primary)',
                loadingIcon: 'edge-dark:text-(--ui-color-gray-70)'
              },
              false: {
                pageWrapper: 'px-(--content-area-shift)',
                container: ''
              }
            },
            loading: {
              true: ''
            },
            useNavbar: {
              true: '',
              false: ''
            },
            useRightBar: {
              true: {
                pageWrapper: '',
                container: 'lg:col-span-10',
                pageRightWrapper: 'lg:col-span-2 order-first lg:order-last'
              },
              false: {
                container: ''
              }
            }
          },
          compoundVariants: [
            {
              inner: true,
              useLightContent: true,
              class: {
                container: '',
                pageTopWrapper: 'px-0 lg:px-0',
                pageActionsWrapper: 'px-0 lg:px-0',
                containerWrapper: 'p-[20px] rounded-(--ui-border-radius-md)'
              }
            },
            {
              inner: false,
              useLightContent: true,
              class: {
                container: '',
                containerWrapper: 'p-6 lg:px-[22px] lg:py-[15px] lg:rounded-(--ui-border-radius-md)'
              }
            },
            {
              inner: true,
              offContentScrollbar: false,
              class: {}
            },
            {
              inner: true,
              useSidebar: [
                true,
                false
              ],
              class: {
                pageWrapper: 'pb-[20px] lg:pt-0 lg:px-[20px] lg:ps-[20px] lg:pe-[20px]'
              }
            },
            {
              inner: false,
              useSidebar: true,
              class: {
                header: 'ps-[calc(var(--content-area-shift)-10px)] pe-[calc(var(--content-area-shift))] lg:px-(--content-area-shift)',
                pageWrapper: 'lg:px-(--content-area-shift)',
                container: '',
                contentWrapper: ''
              }
            },
            {
              inner: false,
              useSidebar: false,
              class: {
                pageWrapper: 'px-(--content-area-shift)',
                container: '',
                contentWrapper: 'lg:pl-0'
              }
            },
            {
              inner: true,
              useNavbar: [
                true,
                false
              ],
              class: {
                container: 'h-full'
              }
            },
            {
              inner: false,
              useNavbar: true,
              class: {
                container: 'h-auto'
              }
            },
            {
              inner: false,
              useNavbar: false,
              class: {
                container: 'h-full'
              }
            }
          ],
          defaultVariants: {
            inner: false,
            noContentScrollbar: false,
            useLightContent: true
          }
        }
      }
    })
  ]
})

Error

A pre-built error component with NuxtError support.

Advice

A couple of lines of text and an avatar