Sidebar

Complete collaboration in one place

The Sidebar 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.js
• 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
location	current URL	The location 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 location in the top navigation bar.
show-inbox	true	Whether to show the inbox button 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
--cord-launcher-background-color	--cord-color-launcher
--cord-launcher-background-color--hover	--cord-launcher-background-color
--cord-launcher-background-color--active	--cord-launcher-background-color
--cord-launcher-content-color	--cord-color-content-emphasis
--cord-launcher-content-color--hover	--cord-launcher-content-color
--cord-launcher-content-color--active	--cord-launcher-content-color
--cord-composer-height-max	40vh
--cord-composer-height-min	40px
--cord-sidebar-background-color	--cord-color-base
--cord-sidebar-header-background-color	--cord-color-base
--cord-sidebar-width	312px
--cord-sidebar-z-index	2147483641
--cord-avatar-border-radius	4px
--cord-avatar-text-color	--cord-color-base
--cord-avatar-background-color	--cord-color-brand-primary
--cord-facepile-background-color	--cord-color-base
--cord-facepile-avatar-border-width	2px
--cord-facepile-avatar-overlap	4px
--cord-tooltip-background-color	--cord-color-brand-primary
--cord-tooltip-content-color	--cord-color-base
--cord-annotation-pin-color	--cord-color-brand-primary
--cord-annotation-pin-outline-color	--cord-color-base
--cord-annotation-pin-z-index	2147483643
--cord-annotation-pin-rotate	0deg
--cord-annotation-arrow-color	--cord-color-brand-primary
--cord-annotation-arrow-outline-color	--cord-color-base
--cord-thread-background-color	--cord-color-base
--cord-thread-border	1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius	--cord-border-radius-medium
--cord-thread-send-button-font-size	14px
--cord-thread-send-button-text-color	--cord-primary-button-content-color
--cord-thread-send-button-text-color--hover	--cord-primary-button-content-color--hover
--cord-thread-send-button-text-color--active	--cord-primary-button-content-color--active
--cord-thread-send-button-text-color--disabled	--cord-primary-button-content-color--disabled
--cord-thread-send-button-background-color	--cord-primary-button-background-color
--cord-thread-send-button-background-color--hover	--cord-primary-button-background-color--hover
--cord-thread-send-button-background-color--active	--cord-primary-button-background-color--active
--cord-thread-send-button-background-color--disabled	--cord-primary-button-background-color--disabled
--cord-thread-send-button-padding	8px

In this section