function Sidebar(props) {
    const {
        ariaLabel,
        style,
        selectedItem,
        onSelect,
        className,
        children,
        id,
        hideSelectedItemIndicator,
    } = props;

    const context = {
        selectedItem,
        onSelect,
        hideSelectedItemIndicator,
    };

    return (
        <StyledNav id={id} className={className} style={style} aria-label={ariaLabel}>
            <Provider value={context}>
                <StyledUl>{children}</StyledUl>
            </Provider>
        </StyledNav>
    );
}
The Sidebar component is a vertical bar that holds a list of SidebarItems.
It helps users to jump from one site section to another without re-rendering the entire content on the page.
Note that you have to compose the Sidebar with the SidebarItem component.
@category Layout