Skip to main content

dyte-sidebar

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

<dyte-sidebar default-section="participants" id="dyte-el"></dyte-sidebar>

<script>
const el = document.getElementById('dyte-el');
el.meeting = meeting;
</script>

<style>
dyte-sidebar {
height: 360px;
}
</style>

To see a mobile sidebar:

<div id="app">
<dyte-sidebar
view="full-screen"
default-section="participants"
id="dyte-el"
></dyte-sidebar>
</div>

<script>
const el = document.getElementById('dyte-el');
el.meeting = meeting;
</script>

<style>
#app {
position: relative;
height: 600px;
}

dyte-sidebar {
height: 360px;
max-width: 360px;
margin: auto;
}
</style>

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"