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

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container">
    <Title>Drawer</Title>

    A Drawer is a UI component that provides a sliding panel interface commonly used for navigation or presenting
    additional content without taking up significant screen space.

    <Subtitle>Usage</Subtitle>

    - Navigation: Drawers are commonly used for housing navigation menus or sidebar menus. They can be toggled open
    and closed to provide easy access to navigation links.
    - Additional content: This component can also be used to display additional content or options that are not always visible on the screen.
    This allows to access exatra functionality without cluttering the main interface.

    <Subtitle>👍 When to use</Subtitle>

    Utilize the Drawer component for various scenarios such as sidebar navigation, user preferences display, and mobile menu implementation,
    offering compact access to application sections, settings, and navigation options.

    - Limited screen space: When screen real estate is limited, such as on mobile devices or smaller viewports, drawers can provide a compact way to present additional content.
    - Contextual information: Use drawers to display contextual information or actions related to the current screen or user interaction. 
    - Multi-level Navigation: Drawers are suitable for multi-level navigation structures, where sub-menus or nested content can be displayed hierarchically.

    <Title>Properties</Title>

    <ArgTypes of="bq-drawer" />
  </div>
</div>
