Sidebar (Deprecated)

Self-contained collaboration mini-application


Cord Sidebar has been deprecated and is no longer being actively developed.

To display a series of comments or threaded conversations on your page, we strongly recommend using Cord Threaded Comments, combined with Cord Notification List for better customizability and a more native feel.

Live Demo

When to use #

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 #

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

export const Example = () => (
  <Sidebar
    groupID="my-group"
    showPresence={true}
    onOpen={() => {
      console.log("sidebar is open");
    }}
  />
);
Vanilla JavaScript:
<cord-sidebar group-id="my-group" show-presence="true" id="sidebar"></cord-sidebar>

<script>
  document
    .getElementById("sidebar")
    .addEventListener("cord-sidebar:open", () => {
      console.log("sidebar is open");
    });
</script>
import { Sidebar } from "@cord-sdk/react";

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

Properties #


location #

optional
string
The location for the sidebar.

groupId #

required
string
The group whose threads the component should load, and in which new threads should be written. Note that the Inbox in the Sidebar still loads threads from all groups the user is in.

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} />
    </>
  );
}

Ask Cordy