# DropdownMenu

A customizable overlay that displays a list of choices or actions when triggered.

### **Import**
```tsx
import { DropdownMenu } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { DropdownMenu } from '../DropdownMenu';
import { Text, Vertical } from 'app-studio';
import {
  Button,
  CopyIcon,
  EditIcon,
  DeleteIcon,
  DownloadIcon,
  ShareIcon,
} from 'src/components';

export const DefaultDropdownMenu = () => {
  const handleCopy = () => alert('Copy clicked');
  const handleEdit = () => alert('Edit clicked');
  const handleDelete = () => alert('Delete clicked');
  const handleDownload = () => alert('Download clicked');
  const handleShare = () => alert('Share clicked');

  const items: any[] = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: handleCopy,
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: handleEdit,
    },
    {
      id: 'divider-1',
      divider: true,
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: handleDelete,
    },
    {
      id: 'more',
      label: 'More Options',
      items: [
        {
          id: 'download',
          label: 'Download',
          icon: <DownloadIcon widthHeight={16} />,
          onClick: handleDownload,
        },
        {
          id: 'share',
          label: 'Share',
          icon: <ShareIcon widthHeight={16} />,
          onClick: handleShare,
        },
      ],
    },
    {
      id: 'disabled',
      label: 'Disabled Option',
      disabled: true,
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>Default Dropdown Menu</Text>
      <DropdownMenu trigger={<Button>Open Menu</Button>} items={items} />
    </Vertical>
  );
};
```

### **Custom**

```tsx
import React from 'react';
import { DropdownMenu } from '../DropdownMenu';
import { Text, Vertical } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon } from 'src/components';

export const CustomDropdownMenu = () => {
  const items: any[] = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: () => alert('Copy clicked'),
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: () => alert('Edit clicked'),
    },
    {
      id: 'divider-1',
      divider: true,
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: () => alert('Delete clicked'),
    },
  ];

  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>Custom Styled Dropdown Menu</Text>
      <DropdownMenu
        trigger={<Button variant="outline">Custom Menu</Button>}
        items={items}
        views={{
          menu: {
            backgroundColor: 'color-blue',
            color: 'color-white',
            borderRadius: '8px',
          },
          item: {
            _hover: {
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
            },
          },
          divider: {
            backgroundColor: 'rgba(255, 255, 255, 0.3)',
          },
        }}
      />
    </Vertical>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './positions';
export * from './variants';
export * from './sizes';
export * from './custom';
```

### **Positions**

```tsx
import React from 'react';
import { DropdownMenu } from '../DropdownMenu';
import { Text, Vertical, Horizontal } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon } from 'src/components';

export const DropdownMenuPositions = () => {
  const items = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: () => alert('Copy clicked'),
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: () => alert('Edit clicked'),
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: () => alert('Delete clicked'),
    },
  ];

  return (
    <Vertical gap={30} width="100%" maxWidth={600}>
      <Text fontWeight="bold" marginBottom={10}>
        Different Positions
      </Text>

      <Horizontal gap={20} flexWrap="wrap">
        <Vertical gap={10} alignItems="center">
          <Text>Bottom (Default)</Text>
          <DropdownMenu
            trigger={<Button>Bottom</Button>}
            items={items}
            side="bottom"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Top</Text>
          <DropdownMenu
            trigger={<Button>Top</Button>}
            items={items}
            side="top"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Left</Text>
          <DropdownMenu
            trigger={<Button>Left</Button>}
            items={items}
            side="left"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Right</Text>
          <DropdownMenu
            trigger={<Button>Right</Button>}
            items={items}
            side="right"
          />
        </Vertical>
      </Horizontal>

      <Text fontWeight="bold" marginBottom={10}>
        Different Alignments
      </Text>

      <Horizontal gap={20} flexWrap="wrap">
        <Vertical gap={10} alignItems="center">
          <Text>Start (Default)</Text>
          <DropdownMenu
            trigger={<Button>Start</Button>}
            items={items}
            align="start"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Center</Text>
          <DropdownMenu
            trigger={<Button>Center</Button>}
            items={items}
            align="center"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>End</Text>
          <DropdownMenu
            trigger={<Button>End</Button>}
            items={items}
            align="end"
          />
        </Vertical>
      </Horizontal>
    </Vertical>
  );
};
```

### **Sizes**

```tsx
import React from 'react';
import { DropdownMenu } from '../DropdownMenu';
import { Text, Vertical, Horizontal } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon } from 'src/components';

export const DropdownMenuSizes = () => {
  const items = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: () => alert('Copy clicked'),
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: () => alert('Edit clicked'),
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: () => alert('Delete clicked'),
    },
  ];

  return (
    <Vertical gap={30} width="100%" maxWidth={600}>
      <Horizontal gap={20}>
        <Vertical gap={10} alignItems="center">
          <Text>Small Size</Text>
          <DropdownMenu
            trigger={<Button>Small</Button>}
            items={items}
            size="sm"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Medium Size (Default)</Text>
          <DropdownMenu
            trigger={<Button>Medium</Button>}
            items={items}
            size="md"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Large Size</Text>
          <DropdownMenu
            trigger={<Button>Large</Button>}
            items={items}
            size="lg"
          />
        </Vertical>
      </Horizontal>
    </Vertical>
  );
};
```

### **Variants**

```tsx
import React from 'react';
import { DropdownMenu } from '../DropdownMenu';
import { Text, Vertical, Horizontal } from 'app-studio';
import { Button, CopyIcon, EditIcon, DeleteIcon } from 'src/components';

export const DropdownMenuVariants = () => {
  const items: any[] = [
    {
      id: 'copy',
      label: 'Copy',
      icon: <CopyIcon widthHeight={16} />,
      onClick: () => alert('Copy clicked'),
    },
    {
      id: 'edit',
      label: 'Edit',
      icon: <EditIcon widthHeight={16} />,
      onClick: () => alert('Edit clicked'),
    },
    {
      id: 'divider-1',
      divider: true,
    },
    {
      id: 'delete',
      label: 'Delete',
      icon: <DeleteIcon widthHeight={16} />,
      onClick: () => alert('Delete clicked'),
    },
  ];

  return (
    <Vertical gap={30} width="100%" maxWidth={600}>
      <Horizontal gap={20}>
        <Vertical gap={10} alignItems="center">
          <Text>Default Variant</Text>
          <DropdownMenu
            trigger={<Button>Default</Button>}
            items={items}
            variant="default"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Filled Variant</Text>
          <DropdownMenu
            trigger={<Button>Filled</Button>}
            items={items}
            variant="filled"
          />
        </Vertical>

        <Vertical gap={10} alignItems="center">
          <Text>Outline Variant</Text>
          <DropdownMenu
            trigger={<Button>Outline</Button>}
            items={items}
            variant="outline"
          />
        </Vertical>
      </Horizontal>
    </Vertical>
  );
};
```