React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
Unable to render Markdown block with url https://raw.githubusercontent.com/MewsSystems/mews-js/refs/heads/master/packages/ui/b2b/core/src/SideMenu/SideMenu.docs.md, might not be Markdown definition or is unreachable. If Markdown is private, please provide authentication token in the documentation settings first.
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>
</>
);
};