Side Menu

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            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>
                                                                </>
                                                            );
                                                        };
                                                        
                                                            

API

SideMenu

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

SideMenuTopCard

Use this component to define the top card

Name

Description

Type

Default

children?

Defines the content

ReactNode

undefined

SideMenuBottomCard

Use this component to define the bottom card

Name

Description

Type

Default

children?

Defines the content

ReactNode

undefined

SideMenuList

Use this component to define the main content

Name

Description

Type

Default

children?

Defines the content

ReactNode

undefined

MenuList

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

MenuCard

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