Side Nav Menu Section Label

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsSideNavMenuGroup } from '@ods/components/react.side-nav-menu-group';
import { OdsSideNavMenuGroupItem } from '@ods/components/react.side-nav-menu-group-item';
import { OdsSideNavMenuSectionLabel } from '@ods/components/react.side-nav-menu-section-label';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">

          <OdsSideNavMenuSectionLabel>Settings</OdsSideNavMenuSectionLabel>

          <OdsSideNavMenuItem value="applications-ettings">
            <OdsIcon slot="prefix" name="settings"></OdsIcon>
            Application Settings
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="structured-terminology">
            <OdsIcon slot="prefix" name="report"></OdsIcon>
            Structured Terminology
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem>
            <OdsIcon slot="prefix" name="cart-tower"></OdsIcon>
            Facility Settings
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="service"></OdsIcon>
            User Permissions
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuGroupItem value="groups">Groups</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="roles">Roles</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="permissions">Permissions</OdsSideNavMenuGroupItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>

          <OdsSideNavMenuSectionLabel>Logs</OdsSideNavMenuSectionLabel>

          <OdsSideNavMenuItem value="activity-logs">
            <OdsIcon slot="prefix" name="history"></OdsIcon>
            Activity Logs
            </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

      <style>{css}</style>
    </>

  )
}

export default Example;