import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Side menu item</Title>

    A side menu item is a navigation element typically placed on the side or left-hand side of a web page or application.
    It serves as a hierarchical or categorical navigation option, allowing users to access different sections or pages within the application.

    > The Side menu item component must be used inside the [Side menu component](?path=/docs/components-side-menu--overview) to function properly.

    <Subtitle>Usage</Subtitle>

    Use icons and labels: Users often rely on both visual cues and text labels to understand the purpose of each menu item. Use distinct icons or symbols to represent different sections or actions, and accompany them with clear text labels for better accessibility.

    <Subtitle>👍 When to use</Subtitle>

    Side menu items are commonly used in web and mobile applications that require a hierarchical or multi-level navigation structure. They are particularly useful when:

    - Navigating different sections: If your application has multiple sections or modules that need to be accessed frequently, a side menu item can provide quick and easy navigation between these sections.
    - Organizing content: Side menu items are beneficial when you have a large amount of content or options that need to be organized in a hierarchical manner. By displaying submenus or nested items, users can easily navigate through different levels of content.

    <Title>Properties</Title>

    <ArgTypes of="bq-side-menu-item" />
  </div>
</div>
