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"