Add custom sidebar

Source Code: https://github.com/dyte-io/react-samples/tree/main/samples/create-your-own-ui

To create a sidebar of your own, you need 2 things.

1. A custom sidebar UI
2. An action button to trigger the UI

const tabs = [
  { id: 'chat', name: 'chat' },
  { id: 'polls', name: 'polls' },
  { id: 'participants', name: 'participants' },
  { id: 'plugins', name: 'plugins' },
  { id: 'warnings', name: 'warnings' },
];

function SidebarWithCustomUI() {
  const states = useStatesStore((s) => s.states);

  if (!states.activeSidebar || !states.sidebar) {
    return null;
  }

  const currentTab = states.sidebar;

  return (
    <DyteSidebarUi
      tabs={tabs}
      currentTab={currentTab}
      view="sidebar"
      className="w-96 max-w-full rounded-xl"
    >
      {currentTab === 'chat' && <DyteChat slot="chat" />}
      {currentTab === 'polls' && <DytePolls slot="polls" />}
      {currentTab === 'participants' && (
        <DyteParticipants slot="participants" />
      )}
      {currentTab === 'plugins' && <DytePlugins slot="plugins" />}
      {currentTab === 'warnings' && (
        <div slot="warnings" className="flex justify-center items-center">
          <div>Do not cheat in the exam</div>
        </div>
      )}
    </DyteSidebarUi>
  );
}