Side Nav Menu

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 { 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">
          <OdsSideNavMenuItem value="dashboard">
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="procedures">
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="findings">
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

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

export default Example;