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.
import{Sidebar}from"@cord-sdk/react";exportconstExample=()=>(<SidebarshowPresence={true}onOpen={()=>{console.log("sidebar is open");}}/>);
<cord-sidebarshow-presence="true"id="sidebar"></cord-sidebar><script>document.getElementById("sidebar").addEventListener("cord-sidebar:open",()=>{console.log("sidebar is open");});</script>
Whether to show the close button in the top navigation bar.
showPresence
optionaldefault: true
Whether to show the presence facepile for the location in the top navigation bar.
showInbox
optionaldefault: true
Whether to show the inbox button in the top navigation bar.
excludeViewerFromPresence
optionaldefault: false
Whether to exclude the current user from the presence facepile in the top navigation bar.
showLauncher
optionaldefault: 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.
showAllActivity
optionaldefault: true
Whether to show the “All Activity” button in the top navigation bar.
showPinsOnPage
optionaldefault: true
Whether to show the annotation pins on the page.
threadName
optionaldefault: current page's title
Sets the name of any threads created by this sidebar. The thread name is used in a small number of places where a short name or header is useful to distinguish the thread; the default value is nearly always fine. A newly-created thread will have its title set to this value, and an existing thread will have its title updated to this value.
onOpen
optional
Callback invoked when sidebar is opened. Is passed a single argument, an object with the following properties:
Property
Description
width
The width of the sidebar which just opened
onClose
optional
Callback invoked when sidebar is closed.
onThreadOpen
optional
Callback invoked when one of the threads in the sidebar is opened. Is passed a single argument, the ID of the opened thread.
onThreadClose
optional
Callback invoked when one of the threads in the sidebar is closed. Is passed a single argument, the ID of the closed thread.
Whether to show the close button in the top navigation bar.
show-presence
optionaldefault: true
Whether to show the presence facepile for the location in the top navigation bar.
show-inbox
optionaldefault: true
Whether to show the inbox button in the top navigation bar.
exclude-viewer-from-presence
optionaldefault: false
Whether to exclude the current user from the presence facepile in the top navigation bar.
show-launcher
optionaldefault: 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.
show-all-activity
optionaldefault: true
Whether to show the “All Activity” button in the top navigation bar.
show-pins-on-page
optionaldefault: true
Whether to show the annotation pins on the page.
thread-name
optionaldefault: current page's title
Sets the name of any threads created by this sidebar. The thread name is used in a small number of places where a short name or header is useful to distinguish the thread; the default value is nearly always fine. A newly-created thread will have its title set to this value, and an existing thread will have its title updated to this value.
cord-sidebar:open
This event is fired when sidebar is opened.
cord-sidebar:close
This event is fired when sidebar is closed.
cord-sidebar:threadopen
This event is fired when one of the threads in the sidebar is opened. The event.detail[0] is the thread-id of the opened thread.
cord-sidebar:threadclose
This event is fired when one of the threads in the sidebar is closed. The event.detail[0] is the thread-id of the closed thread.
CSS Variables
These can be used to customize the component. You can learn more about customization here.
