Skip to main content

DyteSidebar

A component which handles the sidebar and you can customize which sections you want, and which section you want as the default.

<Center>
  <DyteSidebar
    defaultSection="participants"
    meeting={meeting}
    style={{ height: '480px' }}
  />
</Center>

To see a mobile sidebar:

<div style={{ position: 'relative', height: '600px' }}>
  <DyteSidebar
    view="full-screen"
    defaultSection="participants"
    meeting={meeting}
    style={{ maxWidth: '360px', margin: 'auto' }}
  />
</div>

Props​

config

Config

Default
defaultConfig

defaultSection

Default section

Default
'chat'
Type
"chat" | "participants" | "plugins" | "polls"

enabledSections

Enabled sections in sidebar

Default
[]
Type
DyteSidebarTab[]

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()

view

View type

Default
'sidebar'
Type
"full-screen" | "sidebar"