Link copied to clipboard!

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.

component-sidebar-label.png

Usage

  • 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