# Menubar

A navigation component that displays a horizontal or vertical list of menus and their items.

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

### **Default**
```tsx
import React from 'react';
import { Menubar } from '../Menubar';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { EditIcon } from '../../Icon/Icon';

export const DefaultMenubar = () => {
  const items: any[] = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          icon: <EditIcon size={16} />,
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
        { separator: true },
        {
          id: 'save',
          label: 'Save',
          onClick: () => console.log('Save clicked'),
        },
        {
          id: 'save-as',
          label: 'Save As',
          onClick: () => console.log('Save As clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
        { separator: true },
        {
          id: 'cut',
          label: 'Cut',
          onClick: () => console.log('Cut clicked'),
        },
        {
          id: 'copy',
          label: 'Copy',
          onClick: () => console.log('Copy clicked'),
        },
        {
          id: 'paste',
          label: 'Paste',
          onClick: () => console.log('Paste clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
        { separator: true },
        {
          id: 'fullscreen',
          label: 'Fullscreen',
          onClick: () => console.log('Fullscreen clicked'),
        },
      ],
    },
    {
      id: 'help',
      label: 'Help',
      items: [
        {
          id: 'documentation',
          label: 'Documentation',
          onClick: () => console.log('Documentation clicked'),
        },
        {
          id: 'about',
          label: 'About',
          onClick: () => console.log('About clicked'),
        },
      ],
    },
  ];

  return (
    <View width="100%">
      <Text marginBottom={10}>Default Menubar</Text>
      <Menubar items={items} />
    </View>
  );
};
```

### **Composite**

```tsx
import React from 'react';
import { Menubar } from '../Menubar';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { EditIcon } from '../../Icon/Icon';

export const CompositeMenubar = () => {
  return (
    <View width="100%">
      <Text marginBottom={10}>Composite Menubar (Using Subcomponents)</Text>
      <Menubar.Root orientation="horizontal" variant="outline">
        <Menubar.Menu id="file">
          <Menubar.Trigger menuId="file">File</Menubar.Trigger>
          <Menubar.Content menuId="file">
            <Menubar.Item
              id="new"
              icon={<EditIcon size={16} />}
              onClick={() => console.log('New clicked')}
            >
              New
            </Menubar.Item>
            <Menubar.Item id="open" onClick={() => console.log('Open clicked')}>
              Open
            </Menubar.Item>
            <Menubar.Separator />
            <Menubar.Item id="save" onClick={() => console.log('Save clicked')}>
              Save
            </Menubar.Item>
            <Menubar.Item
              id="save-as"
              onClick={() => console.log('Save As clicked')}
            >
              Save As
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Menu>

        <Menubar.Menu id="edit">
          <Menubar.Trigger menuId="edit">Edit</Menubar.Trigger>
          <Menubar.Content menuId="edit">
            <Menubar.Item id="undo" onClick={() => console.log('Undo clicked')}>
              Undo
            </Menubar.Item>
            <Menubar.Item id="redo" onClick={() => console.log('Redo clicked')}>
              Redo
            </Menubar.Item>
            <Menubar.Separator />
            <Menubar.Item id="cut" onClick={() => console.log('Cut clicked')}>
              Cut
            </Menubar.Item>
            <Menubar.Item id="copy" onClick={() => console.log('Copy clicked')}>
              Copy
            </Menubar.Item>
            <Menubar.Item
              id="paste"
              onClick={() => console.log('Paste clicked')}
            >
              Paste
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Menu>

        <Menubar.Menu id="view">
          <Menubar.Trigger menuId="view">View</Menubar.Trigger>
          <Menubar.Content menuId="view">
            <Menubar.Item
              id="zoom-in"
              onClick={() => console.log('Zoom In clicked')}
            >
              Zoom In
            </Menubar.Item>
            <Menubar.Item
              id="zoom-out"
              onClick={() => console.log('Zoom Out clicked')}
            >
              Zoom Out
            </Menubar.Item>
            <Menubar.Separator />
            <Menubar.Item
              id="fullscreen"
              onClick={() => console.log('Fullscreen clicked')}
            >
              Fullscreen
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Menu>

        <Menubar.Menu id="help">
          <Menubar.Trigger menuId="help">Help</Menubar.Trigger>
          <Menubar.Content menuId="help">
            <Menubar.Item
              id="documentation"
              onClick={() => console.log('Documentation clicked')}
            >
              Documentation
            </Menubar.Item>
            <Menubar.Item
              id="about"
              onClick={() => console.log('About clicked')}
            >
              About
            </Menubar.Item>
          </Menubar.Content>
        </Menubar.Menu>
      </Menubar.Root>
    </View>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './variants';
export * from './vertical';
export * from './sizes';
export * from './composite';
```

### **Sizes**

```tsx
import React from 'react';
import { Menubar } from '../Menubar';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const MenubarSizes = () => {
  const items = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
      ],
    },
  ];

  return (
    <Vertical gap={20} width="100%">
      <View>
        <Text marginBottom={10}>Small Size</Text>
        <Menubar items={items} size="sm" variant="outline" />
      </View>

      <View>
        <Text marginBottom={10}>Medium Size (Default)</Text>
        <Menubar items={items} size="md" variant="outline" />
      </View>

      <View>
        <Text marginBottom={10}>Large Size</Text>
        <Menubar items={items} size="lg" variant="outline" />
      </View>
    </Vertical>
  );
};
```

### **Variants**

```tsx
import React from 'react';
import { Menubar } from '../Menubar';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const MenubarVariants = () => {
  const items: any[] = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
        { separator: true },
        {
          id: 'save',
          label: 'Save',
          onClick: () => console.log('Save clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
      ],
    },
  ];

  return (
    <Vertical gap={20} width="100%">
      <View>
        <Text marginBottom={10}>Default Variant</Text>
        <Menubar items={items} variant="default" />
      </View>

      <View>
        <Text marginBottom={10}>Filled Variant</Text>
        <Menubar items={items} variant="filled" />
      </View>

      <View>
        <Text marginBottom={10}>Outline Variant</Text>
        <Menubar items={items} variant="outline" />
      </View>
    </Vertical>
  );
};
```

### **Vertical**

```tsx
import React from 'react';
import { Menubar } from '../Menubar';
import { View } from 'app-studio';
import { Text } from 'app-studio';

export const VerticalMenubar = () => {
  const items: any[] = [
    {
      id: 'file',
      label: 'File',
      items: [
        {
          id: 'new',
          label: 'New',
          onClick: () => console.log('New clicked'),
        },
        {
          id: 'open',
          label: 'Open',
          onClick: () => console.log('Open clicked'),
        },
        { separator: true },
        {
          id: 'save',
          label: 'Save',
          onClick: () => console.log('Save clicked'),
        },
      ],
    },
    {
      id: 'edit',
      label: 'Edit',
      items: [
        {
          id: 'undo',
          label: 'Undo',
          onClick: () => console.log('Undo clicked'),
        },
        {
          id: 'redo',
          label: 'Redo',
          onClick: () => console.log('Redo clicked'),
        },
      ],
    },
    {
      id: 'view',
      label: 'View',
      items: [
        {
          id: 'zoom-in',
          label: 'Zoom In',
          onClick: () => console.log('Zoom In clicked'),
        },
        {
          id: 'zoom-out',
          label: 'Zoom Out',
          onClick: () => console.log('Zoom Out clicked'),
        },
      ],
    },
  ];

  return (
    <View width="200px">
      <Text marginBottom={10}>Vertical Menubar</Text>
      <Menubar items={items} orientation="vertical" variant="outline" />
    </View>
  );
};
```