Open and close the sidebar from anywhere
The SidebarLauncher
component allows you to replace that default button with a customizable one that you can choose to place anywhere in your application UI.
By itself, the Sidebar
component will add a floating launcher button, positioned fixed in the bottom-right corner of your app in the browser; clicking this launcher opens and closes the sidebar.
This component pairs well with:
If you use this component, remember to pass showLauncher={false}
to <Sidebar />
.
import { Sidebar, SidebarLauncher } from "@cord-sdk/react";
export const Example = () => (
<body>
<div id="header">
<SidebarLauncher label="Collaborate" inboxBadgeStyle="badge" />
</div>
<Sidebar showLauncher={false} />
</body>
);
Comment
.Comment icon
.badge_with_count
, badge
or
none
.badge_with_count
.false
.These can be used to customize the component. You can learn more about customization here.
--cord-sidebar-launcher-font-size:
var(--cord-font-size-body, 14px);
--cord-sidebar-launcher-line-height:
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-sidebar-launcher-letter-spacing:
normal;
--cord-sidebar-launcher-text-color:
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--hover:
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--active:
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-sidebar-launcher-text-color--disabled:
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-sidebar-launcher-background-color:
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-background-color--hover:
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-sidebar-launcher-background-color--active:
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-sidebar-launcher-background-color--disabled:
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-padding:
6px 8px;
--cord-sidebar-launcher-height:
var(--cord-button-height-auto, auto);
--cord-sidebar-launcher-gap:
var(--cord-space-3xs, 4px);
--cord-sidebar-launcher-border:
var(--cord-button-border-none, none);
--cord-sidebar-launcher-icon-size:
var(--cord-space-l, 20px);
--cord-sidebar-launcher-badge-background-color:
var(--cord-color-notification, #0079FF);
--cord-sidebar-launcher-badge-text-color:
var(--cord-color-base, #FFFFFF);