Customize Control Bar

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

Dyte's default header component DyteControlbar can be used as the following.

<DyteControlbar />

Following code shows you can customise the DyteControlbar as per your use case.

function ControlBarWithCustomUI() {
  const fullScreenTargetElement = document.querySelector(
    '#root',
  );

  const states = useStatesStore((s) => s.states);

  return (
    <div className="flex w-full py-2 px-3 text-white justify-between">
      <div
        id="controlbar-left"
        className="flex items-center overflow-visible justify-center"
      >
        <DyteFullscreenToggle targetElement={fullScreenTargetElement} />
        <DyteSettingsToggle />
        <DyteScreenShareToggle />
      </div>
      <div
        id="controlbar-center"
        className="flex items-center overflow-visible justify-center"
      >
        <DyteMicToggle />
        <DyteCameraToggle />
        <DyteStageToggle />
        <DyteLeaveButton />
        <DyteMoreToggle>
          <div slot="more-elements">
            <DytePipToggle variant="horizontal" />
            <DyteMuteAllButton variant="horizontal" />
            <DyteBreakoutRoomsToggle variant="horizontal" />
            <DyteRecordingToggle variant="horizontal" />
          </div>
        </DyteMoreToggle>
      </div>
      <div
        id="controlbar-right"
        className="flex items-center overflow-visible justify-center"
      >
        <DyteChatToggle />
        <DytePollsToggle />
        <DyteParticipantsToggle />
        <DytePluginsToggle />
        <DyteControlbarButton
          icon={defaultIconPack.add}
          label="Open Custom Sidebar"
          onClick={(e) => {
            // we are reusing the sidebar state to work with a custom sidebar item
            e.currentTarget.dispatchEvent(
              new CustomEvent('dyteStateUpdate', {
                detail: {
                  activeSidebar: !states.activeSidebar,
                  sidebar: 'warnings',
                },
                bubbles: true,
                composed: true,
              }),
            );
          }}
        />
      </div>
    </div>
  );
}