Sidebar

Self-contained collaboration mini-application


Live Demo

When to use

We strongly recommend against using Sidebar for new Cord integrations.

Cord's SDK exists to give your users an amazing collaboration experience within your application. We also want to give you, the developer, the flexibility and control to seamlessly integrate Cord into your application and create the best experience possible. WhileSidebar is the simplest integration from a developer standpoint, we strongly encourage our customers to use our smaller components instead. Components like Thread can be customized in order to provide a seamless experience, making collaboration feel like a native feature of your application. In our experience, it is nearly impossible to use Sidebar in a way that does not feel like a bolted-on afterthought. It may take a little more time to integrate, but a seamless, native experience will be much more valuable to you and your users than one using justSidebar.


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 onOpen and onClose callbacks to adjust your website's CSS so the sidebar doesn't overlap with your content.

Sidebar remains primarily as backwards-compatibility for existing applications. It can also rarely be useful as an instant proof-of-concept before committing to a deeper integration.

This component pairs well with:


How to use

import { Sidebar } from "@cord-sdk/react";

export const Example = () => (
  <Sidebar
    showPresence={true}
    onOpen={() => {
      console.log("sidebar is open");
    }}
  />
);
Copy

Properties


location

optional
string
The location for the sidebar.

open

optional
boolean
If set to true, the sidebar will be open visible. If set to false, the sidebar will be hidden. This value defaults to true.

showCloseButton

optional
boolean
If set to true, the sidebar will display close button in its top left corner. If set to false, no close button will be shown. The onClose callback will be triggered when this close button is clicked (see below). You would set this to false if you wanted your application to have full control over whether the sidebar is open or closed, and not the user, for example. You would also set this to false if you wanted the sidebar to be permanently open. This value defaults to true.

showPresence

optional
boolean
If set to true, the sidebar will display a presence facepile in its top navigation. This facepile will display durable presence for the current location. If set to false, the sidebar will not display a facepile. This value defaults to true.

showInbox

optional
boolean
If set to true, sidebar will include an inbox launcher button in its top navigation. If set to false, no inbox launcher button will be shown. This value defaults to true.

excludeViewerFromPresence

optional
boolean
If set to true, the users viewing the sidebar will not see themselves in the presence facepile. They will still be marked as present. If set to false, users viewing the sidebar will be shown in the presence facepile. This value defaults to true.

showLauncher

optional
boolean
If set to true, when the sidebar is closed, a floating action button will be displayed in the bottom right corner of the screen enabling the viewing user to open the sidebar. If set to false, no floating action button will be shown. If you're setting this value to false, you must ensure users have the ability to open and close the sidebar from within your application. Set this value to false if you use your own sidebar launcher or if you use Cord's sidebar launcher component. This value defaults to true.

showAllActivity

optional
boolean
If set to true, the sidebar will display an "All Activity" button in the top navigation bar. If set to false, this button will be hidden. This value defaults to true.

showPinsOnPage

optional
boolean
If true, any annotation pins matching the Sidebar's location will be rendered. If the sidebar is displaying annotation pins for the current location, but you don't want those pins to appear, setting this value to false will prevent the sidebar from rendering them. (This does not prevent other components from rendering their own annotation pins, such as the floating threads component.) For any location where there are no annotations, this property has no effect. This value defaults to true.

threadName

optional
string
Sets the name of any threads created from the 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, but the title of any existing threads will not be changed. This value defaults to the current page title (document.title).

onOpen

optional
function
Callback invoked when sidebar is opened. The function will be called passed a single argument, an object with the following properties:
{
  width: <number of pixels the sidebar will occupy>
}
An example of how to use this callback:
  <Sidebar
    onOpen={({ width }) => {
      document.body.style.paddingRight = width + 'px';
    }}
  />

onClose

optional
function
Callback invoked when sidebar is closed

onThreadOpen

optional
function
Callback invoked when one of the threads in the sidebar is opened. The callback is passed a single argument, the ID of the opened thread.
import { useCallback } from 'react';
import { Sidebar } from '@cord-sdk/react';

const MyPage = () => {

  const onThreadOpen = useCallback((threadID) => {
    if (threadID.startsWith('cord:')) {
      // Cord-created thread IDs all begin with this prefix
      return;
    }

    // This code assumes that you've used threadIDs that match
    // key elements in your page, which have `id` attributes
    // of the same value. That way, when the thread is opened
    // in the Cord sidebar, you can scroll your page to the
    // corresponding element.
    window.location.hash = threadID;
  }, []);

  return (
    <>
      <div>My app's page contents</div>
      <Sidebar onThreadOpen={onThreadOpen} />
    </>
  );
}

onThreadClose

optional
function
Callback invoked when one of the threads in the sidebar is closed. The callback is passed a single argument, the ID of the opened thread.
import { useCallback } from 'react';
import { Sidebar } from '@cord-sdk/react';

const MyPage = () => {

  // See the codeblock above for more context.
  const onThreadClose = useCallback((threadID) => {
    if (threadID.startsWith('cord:')) {
      // Cord-created thread IDs all begin with this prefix
      return;
    }

    if (window.location.hash === threadID) {
      window.location.hash = threadID;
    }
  }, []);

  return (
    <>
      <div>My app's page contents</div>
      <Sidebar onThreadClose={onThreadClose} />
    </>
  );
}

CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name Default Value
--cord-sidebar-background-color
var(--cord-color-base, #FFFFFF);
--cord-sidebar-header-background-color
var(--cord-color-base, #FFFFFF);
--cord-sidebar-width
312px;
--cord-sidebar-z-index
2147483641;
--cord-sidebar-top
0px;
--cord-sidebar-border-left
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-sidebar-border-top
none;
--cord-sidebar-border-right
none;
--cord-sidebar-border-bottom
none;
--cord-color-launcher
#F4FFA0;
--cord-launcher-background-color
var(--cord-color-launcher, #F4FFA0);
--cord-launcher-background-color--hover
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-background-color--active
var(--cord-launcher-background-color, var(--cord-color-launcher, #F4FFA0));
--cord-launcher-content-color
var(--cord-color-content-emphasis, #121314);
--cord-launcher-content-color--hover
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));
--cord-launcher-content-color--active
var(--cord-launcher-content-color, var(--cord-color-content-emphasis, #121314));