Sidebar

The composable and reusable component. Since these components are very flexible, it's
recommended to build your own abstraction specific to your product on top of this.

> ℹ️ Note: The implementation of the breakpoints (when to hide) and animation is up to the consumer of this package as of now.

Installation

First, make sure you have been through the install steps steps required to add Flame in your application. Although it's not required to have Flame installed to use Logo, you will need to install its peer dependencies.

If using Yarn:

``sh
yarn add @lightspeed/cirrus-sidebar
`

Or using npm:

`sh
npm i -S @lightspeed/cirrus-sidebar
`

$3

Because the is completely unknown in what environment it's being rendered and at what breakpoints
the sidebar should hide, we open up a couple of animation styles for you to use.

These styles are exposed at @lightspeed/cirrus-sidebar/styles.
These constants are exposed at @lightspeed/cirrus-sidebar/styles/constants.

#### Example

`js
import styled from '@emotion/styled';
import { slideInDurationMs, slideInBezier } from '@lightspeed/cirrus-sidebar/styles';
import { PAGE_HEADER_HEIGHT, SIDEBAR_WIDTH } from '@lightspeed/cirrus-sidebar/styles/constants';
import { Sidebar } from '@lightspeed/cirrus-sidebar';

const SidebarWrapper = styled.div
position: absolute;
left: -${SIDEBAR_WIDTH}px;
top: 0;
bottom: 0;
transition: left ${slideInDurationMs} ${slideInBezier};

${props => props.active && 'left: 0;'}
@media (min-device-width: 480px) {
left: 0;
}
;

const App = () => (

Sidebar content here

);

export default App;
`

$3

#### Example

`js
import React from 'react';
import { Text } from '@lightspeed/cirrus-text';
import Icon from '@lightspeed/cirrus-icon';
import {
Sidebar,
SidebarHeader,
SidebarAppSwitcher,
SidebarShopButton,
SidebarDropdownButton,
SidebarAccountDropdown,
SidebarMenu,
SidebarMenuItem,
SidebarItem,
SidebarNotificationBadge,
SidebarNav,
SidebarFooter,
SidebarFooterItem,
} from '@lightspeed/cirrus-sidebar';

const items = [
{ icon: , children: 'Home', href: '/', active: true },
{ icon: , children: 'Statistics', href: 'statistics' },
{
icon: ,
children: 'Orders',
href: 'orders',
hasSublevel: true,
notifications: 2,
},
{ icon: , children: 'Products', href: 'products', hasSublevel: true },
{ icon: , children: 'Customers', href: 'customers', hasSublevel: true },
{ icon: , children: 'Design', href: 'themes', hasSublevel: true },
{ icon: , children: 'Content', href: 'pages', hasSublevel: true },
{
icon: ,
children: 'Marketing',
href: 'discount_codes',
hasSublevel: true,
},
{
icon: ,
children: 'Blogs',
href: 'blogs',
onClick: e => {
e.preventDefault();
console.log('You can also just hook into the item through onClick!');
},
hasSublevel: true,
},
{
icon: ,
children: 'Apps',
href: 'store/apps/dashboard',
disabled: true,
hasSublevel: true,
},
{ icon: , children: 'Tools', href: 'imports', hasSublevel: true },
{ icon: , children: 'Settings', href: 'settings', disabled: true },
];

class MyComponent extends React.Component {
constructor(props) {
super(props);

this.state = {
isUserMenuOpen: false,
};

this.openUserMenu = this.openUserMenu.bind(this);
this.closeUserMenu = this.closeUserMenu.bind(this);
}

openUserMenu() {
this.setState(() => ({
isUserMenuOpen: true,
}));
}

closeUserMenu() {
this.setState(() => ({
isUserMenuOpen: true,
}));
}

render() {
const { isUserMenuOpen } = this.state;

return (


export default MyComponent;
`

$3

The wrapper of the sidebar (controls the width and color).

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ---------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| ...rest | Any | Any prop you want to add to this element |

#### Example

`js
import React from 'react';
import { Sidebar } from '@lightspeed/cirrus-sidebar';

const App = () => My content here;

export default App;
`

$3

The top part of the sidebar (contains the appswitcher, shopbutton and account menu).
This element divides the top part of the sidebar from the main navigation and the footer.

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ----------------------------------------- |
| children | React.ReactNode | The content to display inside the sidebar |
| ...rest | Any | Any prop you want to add to this element |

#### Example

`js
import React from 'react';
import { Sidebar, SidebarHeader } from '@lightspeed/cirrus-sidebar';

const App = () => (

Your header stuff here

export default App;
`

$3

This component is responsible for showing the correct current app and what apps
the user can switch to.

#### Props

| Prop | Type | Required? | Description |
| ---------------- | ----------------- | --------- | ---------------------------------------------------------------------------- |
| currentProduct | ecom|retail | Yes | The current product is that the user is on |
| canSwitchTo | Array | No | The list of products that the user can switch to |
| logoProps | Object | No | The props you want to pass to the logo (such as href, onClick, etc.) |
| triggerProps | Object | No | The props you want to pass to the "switch products" button |
| appsConfig | AppsConfig | No | An object that allows you to add new apps to switch to (see info down below) |

#### AppsConfig

The apps config is an object with the key being the app identifier and the value being the app logo.
This allows you to then use these as the currentProduct and within the switchable apps array.

Note: This does not override existing apps (e.g. retail and ecom will still remain available)

##### Example

`js
const appsConfig = {
customApp: ,
anotherApp: ,
};

appsConfig={appsConfig}
currentProduct="customApp"
canSwitchTo={[{ name: 'retail', href: '/retail' }, { name: 'anotherApp', href: '/another-app' }]}
/>;
`

#### Example

##### User is not able to switch between products

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (





);

export default App;
`

##### User can switch to retail

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (


currentProduct="ecom"
canSwitchTo={[{ name: 'retail', href: '/retail' }]}
/>


);

export default App;
`

##### User can switch to retail through onClick

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (


currentProduct="ecom"
canSwitchTo={[
{
name: 'retail',
onClick: e => {
e.preventDefault();
router.goTo('/retail');
},
},
]}
/>


);

export default App;
`

##### With custom config

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (


appsConfig={{ customProduct: '🔥' }}
currentProduct="ecom"
canSwitchTo={[
{ name: 'retail', href: '/retail' },
{ name: 'customProduct', href: '/custom-product' },
]}
/>


);

export default App;
`

##### Add link to logo

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (





);

export default App;
`

##### Add data attribute to trigger button

`js
import React from 'react';
import { Sidebar, SidebarHeader, SidebarAppSwitcher } from '@lightspeed/cirrus-sidebar';

const App = () => (


triggerProps={{ 'data-test': 'sidebar-product-trigger' }}
currentProduct="ecom"
/>


);

export default App;
`

$3

The button that is all around the current shop and register.

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ------------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| active | boolean | Whether the shop button is currently active |
| ...rest | Any | Any prop you want to add to this element |

#### Example

`js
import React from 'react';
import { Text } from '@lightspeed/cirrus-text';
import { SidebarShopButton } from '@lightspeed/cirrus-sidebar';

const App = () => (


router.goTo('/switch')}>
SEOshop
http://shop1.webshopapp.dev/



);

export default App;
`

$3

The dropdown button that is used for opening menus (contains an icon that indicates that a menu will open).
See for an example.

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ---------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| ...rest | Any | Any prop you want to add to this element |

$3

See for an example.

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ---------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| ...rest | Any | Any prop you want to add to this element |

$3

The menu item for the .
See for an example.

#### Props

| Prop | Type | Description |
| ---------- | --------------- | ---------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| danger | boolean | Whether the item is danger styled |
| ...rest | Any | Any prop you want to add to this element |

#### Example

`js
`

$3

The Sidebar popover menu. Renders a cirrus-popover with some customized positional styles.

#### Props

| Prop | Type | Description |
| ----------------------- | --------------- | ------------------------------------------- |
| children | React.ReactNode | The content to display inside the button |
| ...cirrusPopoverProps | Object | Any props defined within the cirrus-popover |

#### Example

`js
import React from 'react';
import { Text } from '@lightspeed/cirrus-text';
import {
Sidebar,
SidebarHeader,
SidebarAccountDropdown,
SidebarDropdownButton,
SidebarMenu,
SidebarMenuItem,
} from '@lightspeed/cirrus-sidebar';

class MyComponent extends React.Component {
constructor(props) {
super(props);

this.state = {
isUserMenuOpen: false,
};

this.openUserMenu = this.openUserMenu.bind(this);
this.closeUserMenu = this.closeUserMenu.bind(this);
}

openUserMenu() {
this.setState(() => ({
isUserMenuOpen: true,
}));
}

closeUserMenu() {
this.setState(() => ({
isUserMenuOpen: true,
}));
}

render() {
const { isUserMenuOpen } = this.state;

return (


isOpen={isUserMenuOpen}
onOpen={this.openUserMenu}
onClose={this.closeUserMenu}
target={({ targetProps, targetEvents }) => (

Awesome Merchant

)}
>

Tasks
My Account

Logout





);
}
}

export default MyComponent;
`

$3

The