React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
import { SideMenu, MenuList, MenuCard, Button } from '@optimus-web/core';
const SideMenuComponent = () => {
const [collapsed, setCollapsed] = useState(false);
const [activeItem, setActiveItem] = useState<string | null>(null);
const [expandedItem, setExpandedItem] = useState<string | null>(null);
const { hasScrollBar, contentRef } = useScrollable();
return (
<>
<SideMenu {...args} collapsed={collapsed}>
<SideMenuTopCard>
<MenuCard
collapsed={collapsed}
title="The Emblem Portfolio"
avatar={{
src: 'https://picsum.photos/200',
title: 'The Emblem Portfolio',
alt: 'The Emblem Portfolio avatar',
}}
id="menuCardProperties"
expanded={expandedItem === 'menuCardProperties'}
onExpandableChange={setExpandedItem}
subtitle="Some cool subtitle"
>
<Stack vertical spacing="200">
<MenuList
label="Portfolios"
labelNumber={2}
activeItem={activeItem}
onItemClick={setActiveItem}
>
<MenuListItem
id="menuListItem-portfolios-0"
content="NCH Portfolio"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
<MenuListItem
id="menuListItem-portfolios-1"
content="The Emblem Portfolio"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
</MenuList>
<MenuList
label="Properties"
labelNumber={5}
activeItem={activeItem}
onItemClick={setActiveItem}
>
<MenuListItem
id="menuListItem-properties-0"
content="The Emblem Amsterdam"
subtitle="Amsterdam"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
<MenuListItem
id="menuListItem-properties-1"
content="The Emblem London"
subtitle="London"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
<MenuListItem
id="menuListItem-properties-2"
content="The Emblem New York"
subtitle="New York"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
<MenuListItem
id="menuListItem-properties-3"
content="The Emblem Prague"
subtitle="Prague"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
<MenuListItem
id="menuListItem-properties-4"
content="The Emblem Tokyo"
subtitle="Tokyo"
leftContent={{
component: 'avatar',
props: {
src: 'https://picsum.photos/200',
title: 'my avatar',
alt: 'my avatar alt text',
},
}}
/>
</MenuList>
</Stack>
</MenuCard>
</SideMenuTopCard>
<SideMenuList ref={contentRef} hasScrollBar={hasScrollBar} collapsed={collapsed}>
<Stack vertical spacing="200">
<MenuList
collapsed={collapsed}
label="Front Door"
labelNumber={2}
activeItem={activeItem}
onItemClick={setActiveItem}
expandedItem={expandedItem}
onExpandableChange={setExpandedItem}
>
<MenuListItem
id="menuListItem-operations"
content="Operations"
leftContent={{
component: 'icon',
props: { value: IconName.Operations },
}}
>
<NestedMenuList
activeItem={activeItem}
onItemClick={setActiveItem}
expanded={expandedItem === 'menuListItem-operations'}
collapsed={collapsed}
label="Front Door"
>
<MenuListItem id="menuListItem-operations-random-1" content="Some operation" />
<MenuListItem id="menuListItem-operations-random-2" content="Other thing" />
<MenuListItem id="menuListItem-operations-random-3" content="Other item" />
</NestedMenuList>
</MenuListItem>
<MenuListItem
id="menuListItem-profiles"
content="Profiles"
leftContent={{
component: 'icon',
props: { value: IconName.Profile },
}}
>
<NestedMenuList
activeItem={activeItem}
onItemClick={setActiveItem}
expanded={expandedItem === 'menuListItem-profiles'}
collapsed={collapsed}
label="Front Door"
>
<MenuListItem id="menuListItem-profiles-add-customer" content="Profiles" />
<MenuListItem
id="menuListItem-profiles-customer-stats"
content="Customer statistics"
/>
</NestedMenuList>
</MenuListItem>
</MenuList>
<MenuList
collapsed={collapsed}
label="Business"
activeItem={activeItem}
onItemClick={setActiveItem}
expandedItem={expandedItem}
onExpandableChange={setExpandedItem}
separator
>
<MenuListItem
id="menuListItem-reservations"
content="Reservations"
leftContent={{
component: 'icon',
props: { value: IconName.Reservations },
}}
>
<NestedMenuList
activeItem={activeItem}
onItemClick={setActiveItem}
expanded={expandedItem === 'menuListItem-reservations'}
collapsed={collapsed}
label="Business"
>
<MenuListItem
id="menuListItem-reservations-create"
content="Create reservation"
/>
<MenuListItem
id="menuListItem-reservations-timeline"
content="Timeline"
badgeContent="3"
/>
</NestedMenuList>
</MenuListItem>
<MenuListItem
id="menuListItem-business-analytics"
content="Analytics"
leftContent={{
component: 'icon',
props: { value: IconName.Analytics },
}}
>
<NestedMenuList
activeItem={activeItem}
onItemClick={setActiveItem}
expanded={expandedItem === 'menuListItem-business-analytics'}
collapsed={collapsed}
label="Analytics"
>
<MenuListItem id="menuListItem-business-analytics-1" content="Reporting" />
<MenuListItem
id="menuListItem-business-analytics-2"
content="Business Intelligence"
badgeContent="999"
/>
</NestedMenuList>
</MenuListItem>
<MenuListItem
id="menuListItem-tasks"
content="Tasks"
leftContent={{
component: 'icon',
props: { value: IconName.Tasks },
}}
/>
<MenuListItem
id="menuListItem-messages"
content="Messages"
leftContent={{
component: 'icon',
props: { value: IconName.Message },
}}
/>
</MenuList>
<MenuList
collapsed={collapsed}
activeItem={activeItem}
onItemClick={setActiveItem}
expandedItem={expandedItem}
onExpandableChange={setExpandedItem}
>
<MenuListItem id="menuListItem-marketplace" content="Marketplace" />
<MenuListItem id="menuListItem-mews-university" content="Mews University" />
<CustomLink collapsed />
</MenuList>
</Stack>
</SideMenuList>
<SideMenuBottomCard hasScrollBar={hasScrollBar}>
<MenuCard
collapsed={collapsed}
title="Anna Hughes"
subtitle="General Manager"
avatar={{
src: 'https://picsum.photos/200',
title: 'Anna Hughes',
alt: 'Anna Hughes avatar',
}}
id="profileCardProperties"
expanded={expandedItem === 'profileCardProperties'}
onExpandableChange={setExpandedItem}
>
<Stack vertical spacing="200">
<MenuList
label="Your settings"
activeItem={activeItem}
onItemClick={setActiveItem}
separator
>
<MenuListItem id="menuListItem-profile-0" content="Profile" />
<MenuListItem id="menuListItem-profile-1" content="Lock account" />
</MenuList>
<MenuList activeItem={activeItem} onItemClick={setActiveItem}>
<MenuListItem id="menuListItem-profile-2" content="Sign out" />
</MenuList>
</Stack>
</MenuCard>
</SideMenuBottomCard>
</SideMenu>
<div
style={{
display: `flex`,
alignItems: `center`,
justifyContent: `center`,
flex: '1',
}}
>
<Button
onClick={() => {
setCollapsed(!collapsed);
if (!collapsed) {
setExpandedItem(null);
}
}}
icon={collapsed ? IconName.MenuArrowRight : IconName.MenuArrowLeft}
>
{collapsed ? 'Expand' : 'Collapse'}
</Button>
</div>
</>
);
};
Name |
Description |
Type |
Default |
---|---|---|---|
collapsed? |
Collapses the Side Menu, rendering just icons and a few UI elements |
boolean |
false |
children? |
Defines the content |
ReactNode |
undefined |
Use this component to define the top card
Name |
Description |
Type |
Default |
---|---|---|---|
children? |
Defines the content |
ReactNode |
undefined |
Use this component to define the bottom card
Name |
Description |
Type |
Default |
---|---|---|---|
children? |
Defines the content |
ReactNode |
undefined |
Use this component to define the main content
Name |
Description |
Type |
Default |
---|---|---|---|
children? |
Defines the content |
ReactNode |
undefined |
Name |
Description |
Type |
Default |
---|---|---|---|
children |
Defines the content |
ReactNode |
- |
expandedItem? |
ID of the expanded child inside the menu |
string |
undefined |
onExpandableChange? |
Callback fired when a child is expanded |
(id: string | null) => void |
undefined |
activeItem? |
ID of the selected/clicked element |
string |
undefined |
onItemClick? |
Callback fired when a child is clicked |
(id: string) => void |
undefined |
label? |
Defines the content of the label above the list |
ReactNode |
undefined |
labelNumber? |
Adds a count besides the label |
number |
undefined |
separator? |
Renders a Divider component at the bottom of the MenuList |
boolean |
false |
collapsed? |
Inherited from SideMenu, defines the UI of the menu |
boolean |
false |
size? |
Defines the size of the menu list items |
medium | large |
medium |
Name |
Description |
Type |
Default |
---|---|---|---|
title |
The title of the card |
ReactNode |
- |
collapsed? |
Renders the card in collapsed mode |
boolean |
false |
subtitle? |
Subtitle for the card, below the title |
ReactNode |
undefined |
avatar |
Avatar for the card |
AvatarProps |
- |
children |
The content of the card |
ReactNode |
- |
id |
Id for the card button, used also for expanding the content |
string |
- |
expanded? |
Toggle the menu card content visibility |
boolean |
false |
onExpandableChange? |
Callback fired when the card is expanded |
(id: string | null) => void |
undefined |