Self-contained collaboration mini-application
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:
import { Sidebar } from "@cord-sdk/react";
export const Example = () => (
<Sidebar
showPresence={true}
onOpen={() => {
console.log("sidebar is open");
}}
/>
);
true
.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
.location
. If set to false, the sidebar
will not display a facepile.
This value defaults to true
.true
.true
.false
if you use your own sidebar launcher
or if you use Cord's sidebar launcher component.
This value defaults to true
.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
.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
.{
width: <number of pixels the sidebar will occupy>
}
<Sidebar
onOpen={({ width }) => {
document.body.style.paddingRight = width + 'px';
}}
/>
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} />
</>
);
}
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} />
</>
);
}
These can be used to customize the component. You can learn more about customization here.
--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));