---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import DropdownMenu from '@components/demo/DropdownMenu.astro'
import DropdownMenuAll from '@components/demo/DropdownMenuAll.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Dropdowns" pageMenu="base.dropdowns" description="Dropdown menus for actions, filters, and selections, always shown open here for reference.">
  <DocsLink slot="page-header-actions" path="/ui/components/dropdown" />

  <div class="row">
    <div class="col-sm-6 col-lg-3">
      <DropdownMenuAll show />
    </div>
    <div class="col-sm-6 col-lg-3">
      <DropdownMenu show />
      <DropdownMenu show separated />
      <DropdownMenu show active />
      <DropdownMenu show disabled />
      <DropdownMenu show header />
      <DropdownMenu show icons header />
      <DropdownMenu show arrow />
    </div>
    <div class="col-sm-6 col-lg-3">
      <DropdownMenu show />
      <DropdownMenu show separated />
      <DropdownMenu show active />
      <DropdownMenu show disabled />
      <DropdownMenu show header />
      <DropdownMenu show icons />
      <DropdownMenu show badge />
    </div>
    <div class="col-sm-6 col-lg-3">
      <DropdownMenu show dark />
      <DropdownMenu show dark separated />
      <DropdownMenu show arrow right dark />
      <DropdownMenu show arrow right dark icons />
      <DropdownMenu show check />
      <DropdownMenu show radio />
      <DropdownMenu show people />
      <DropdownMenu show flag />
    </div>
  </div>
</DefaultLayout>