@app-studio/web 0.9.41 → 0.9.44

package/docs/components/Menubar.mdx

@@ -1,21 +1,22 @@
 # Menubar
 
-A flexible menubar component for creating application menus with dropdown submenus.
+A versatile component for structured navigation, displaying a list of interactive items and their sub-menus.
 
 ### **Import**
-  ```tsx
-  import { Menubar } from '@app-studio/web';
-  ```
+```tsx
+import { Menubar } from '@app-studio/web';
+```
 
 ### **Default**
 ```tsx
 import React from 'react';
-import { Menubar } from '../Menubar';
-import { View } from '@app-studio/web';
-import { Text } from '@app-studio/web';
+import { Menubar } from '@app-studio/web';
+import { View } from 'app-studio';
+import { Text } from 'app-studio';
+import { EditIcon } from '@app-studio/web';
 
 export const DefaultMenubar = () => {
-  const items = [
+  const items: any[] = [
     {
       id: 'file',
       label: 'File',
@@ -23,6 +24,7 @@ export const DefaultMenubar = () => {
         {
           id: 'new',
           label: 'New',
+          icon: <EditIcon size={16} />,
           onClick: () => console.log('New clicked'),
         },
         {
@@ -36,6 +38,11 @@ export const DefaultMenubar = () => {
           label: 'Save',
           onClick: () => console.log('Save clicked'),
         },
+        {
+          id: 'save-as',
+          label: 'Save As',
+          onClick: () => console.log('Save As clicked'),
+        },
       ],
     },
     {
@@ -52,73 +59,70 @@ export const DefaultMenubar = () => {
           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 (
-    <Menubar items={items} />
+    <View width="100%">
+      <Text marginBottom={10}>Default Menubar</Text>
+      <Menubar items={items} />
+    </View>
   );
 };
 ```
 
-### **Variants**
-The Menubar component supports different visual variants:
-
-```tsx
-<Menubar items={items} variant="default" />
-<Menubar items={items} variant="filled" />
-<Menubar items={items} variant="outline" />
-```
-
-### **Orientation**
-The Menubar can be displayed horizontally or vertically:
-
-```tsx
-<Menubar items={items} orientation="horizontal" />
-<Menubar items={items} orientation="vertical" />
-```
-
-### **Sizes**
-The Menubar supports different sizes:
-
-```tsx
-<Menubar items={items} size="sm" />
-<Menubar items={items} size="md" />
-<Menubar items={items} size="lg" />
-```
-
-### **Composite Pattern**
-You can also use the Menubar's subcomponents for more control:
-
-```tsx
-<Menubar.Root orientation="horizontal" variant="outline">
-  <Menubar.Menu id="file">
-    <Menubar.Trigger>File</Menubar.Trigger>
-    <Menubar.Content>
-      <Menubar.Item id="new" 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.Content>
-  </Menubar.Menu>
-  
-  <Menubar.Menu id="edit">
-    <Menubar.Trigger>Edit</Menubar.Trigger>
-    <Menubar.Content>
-      <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.Content>
-  </Menubar.Menu>
-</Menubar.Root>
-```