Skip to main content

rtk-sidebar

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

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

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

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

To see a mobile sidebar:

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

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

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

  rtk-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
RtkSidebarTab[]

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"