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