Sidebar

The easiest way to add collaboration in your website. This component renders the Cord sidebar, positioned fixed on the right side of your website. You can customize its width, and you can use the open and close events to adjust your website’s CSS so the sidebar doesn’t overlap with your content.

Usage

• React
• JavaScript

• import { Sidebar } from "@cord-sdk/react";
  
  export const Example = () => (
    <Sidebar
      showPresence={true}
      onOpen={() => {
        console.log("sidebar is open");
      }}
    />
  );
  

• <cord-sidebar show-presence="true" id="sidebar" />
  
  <script>
    document
      .getElementById("sidebar")
      .addEventListener("cord-sidebar:open", () => {
        console.log("sidebar is open");
      });
  </script>
  

Properties

Name	Default	Description
context	current URL	The context for the sidebar.
open	true	Whether the sidebar should be open or closed.
show-close-button	true	Whether to show the close button in the top navigation bar.
show-presence	true	Whether to show the presence facepile for the context in the top navigation bar.
exclude-viewer-from-presence	false	Whether to exclude the current user from the presence facepile in the top navigation bar.
show-launcher	true	Whether to show the floating launcher button in the bottom-right corner of the page. Set this to false if you use the <cord-sidebar-launcher> component.

Events

Name	Description
cord-sidebar:open	The sidebar is now open.
cord-sidebar:close	The sidebar is now closed.

CSS Custom Properties

Name	Default	Description
--cord-sidebar-width	312px	Width of the sidebar. Cannot be wider than 500px or narrower than 312px.

In this section