From 1ee16703f8219c6c594dad40bd04364516b5126d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Fri, 3 Jan 2025 00:05:09 +0300
Subject: [PATCH] Add menudoc

---
 src/views/uikit/menudoc.ts | 500 +++++++++++++++++++++++++++++++++++++
 1 file changed, 500 insertions(+)
 create mode 100644 src/views/uikit/menudoc.ts

diff --git a/src/views/uikit/menudoc.ts b/src/views/uikit/menudoc.ts
new file mode 100644
index 0000000..0a9ce60
--- /dev/null
+++ b/src/views/uikit/menudoc.ts
@@ -0,0 +1,500 @@
+import { Component } from '@angular/core';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { CommonModule } from '@angular/common';
+import { MenuModule } from 'primeng/menu';
+import { ButtonModule } from 'primeng/button';
+import { MegaMenuModule } from 'primeng/megamenu';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { TabsModule } from 'primeng/tabs';
+import { MenubarModule } from 'primeng/menubar';
+import { InputTextModule } from 'primeng/inputtext';
+
+
+@Component({
+    standalone:true,
+    imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule],
+    template: `<div class="grid p-fluid">
+        <div class="col-12">
+            <div class="card card-w-title">
+                <h5>MenuBar</h5>
+                <p-menubar [model]="nestedMenuItems">
+                    <ng-template #end>
+                    <span class="p-input-icon-right">
+                        <input type="text" pInputText placeholder="Search">
+                        <i class="pi pi-search"></i>
+                    </span>
+                    </ng-template>
+                </p-menubar>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card card-w-title">
+                <h5>Breadcrumb</h5>
+                <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
+            </div>
+        </div>
+
+
+        <div class="col-12 md:col-4">
+            <div class="card card-w-title">
+                <h5>TieredMenu</h5>
+                <p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-4">
+            <div class="card card-w-title">
+                <h5>Plain Menu</h5>
+                <p-menu [model]="menuItems"></p-menu>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-4">
+
+            <div class="card card-w-title">
+                <h5>Overlay Menu</h5>
+
+                <p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
+                <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
+            </div>
+
+            <div class="card card-w-title" #anchor>
+                <h5>ContextMenu</h5>
+                Right click to display.
+                <p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card card-w-title">
+                <h5>MegaMenu - Horizontal</h5>
+                <p-megaMenu [model]="megaMenuItems"></p-megaMenu>
+
+                <h5>MegaMenu - Vertical</h5>
+                <p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card card-w-title">
+                <h5>PanelMenu</h5>
+                <p-panelMenu [model]="panelMenuItems"></p-panelMenu>
+            </div>
+        </div>
+    </div>
+    `,
+})
+export class MenuDoc {
+
+    nestedMenuItems = [
+        {
+            label: 'Customers',
+            icon: 'pi pi-fw pi-table',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus',
+                    items: [
+                        {
+                            label: 'Customer',
+                            icon: 'pi pi-fw pi-plus'
+                        },
+                        {
+                            label: 'Duplicate',
+                            icon: 'pi pi-fw pi-copy'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-user-edit'
+                }
+            ]
+        },
+        {
+            label: 'Orders',
+            icon: 'pi pi-fw pi-shopping-cart',
+            items: [
+                {
+                    label: 'View',
+                    icon: 'pi pi-fw pi-list'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Shipments',
+            icon: 'pi pi-fw pi-envelope',
+            items: [
+                {
+                    label: 'Tracker',
+                    icon: 'pi pi-fw pi-compass'
+                },
+                {
+                    label: 'Map',
+                    icon: 'pi pi-fw pi-map-marker'
+                },
+                {
+                    label: 'Manage',
+                    icon: 'pi pi-fw pi-pencil'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                },
+                {
+                    label: 'Billing',
+                    icon: 'pi pi-fw pi-file'
+                }
+            ]
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-sign-out'
+        }
+    ];
+    breadcrumbHome = { icon: 'pi pi-home', to: '/' };
+    breadcrumbItems = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
+    tieredMenuItems = [
+        {
+            label: 'Customers',
+            icon: 'pi pi-fw pi-table',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus',
+                    items: [
+                        {
+                            label: 'Customer',
+                            icon: 'pi pi-fw pi-plus'
+                        },
+                        {
+                            label: 'Duplicate',
+                            icon: 'pi pi-fw pi-copy'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-user-edit'
+                }
+            ]
+        },
+        {
+            label: 'Orders',
+            icon: 'pi pi-fw pi-shopping-cart',
+            items: [
+                {
+                    label: 'View',
+                    icon: 'pi pi-fw pi-list'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Shipments',
+            icon: 'pi pi-fw pi-envelope',
+            items: [
+                {
+                    label: 'Tracker',
+                    icon: 'pi pi-fw pi-compass'
+                },
+                {
+                    label: 'Map',
+                    icon: 'pi pi-fw pi-map-marker'
+                },
+                {
+                    label: 'Manage',
+                    icon: 'pi pi-fw pi-pencil'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                },
+                {
+                    label: 'Billing',
+                    icon: 'pi pi-fw pi-file'
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-sign-out'
+        }
+    ];
+    overlayMenuItems = [
+        {
+            label: 'Save',
+            icon: 'pi pi-save'
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        }
+    ];
+    menuItems = [
+        {
+            label: 'Customers',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus'
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-user-edit'
+                }
+            ]
+        },
+        {
+            label: 'Orders',
+            items: [
+                {
+                    label: 'View',
+                    icon: 'pi pi-fw pi-list'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-search'
+                }
+            ]
+        }
+    ];
+    contextMenuItems = [
+        {
+            label: 'Save',
+            icon: 'pi pi-save'
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Options',
+            icon: 'pi pi-cog'
+        }
+    ];
+    megaMenuItems = [
+        {
+            label: 'Fashion',
+            icon: 'pi pi-fw pi-tag',
+            items: [
+                [
+                    {
+                        label: 'Woman',
+                        items: [{ label: 'Woman Item' }, { label: 'Woman Item' }, { label: 'Woman Item' }]
+                    },
+                    {
+                        label: 'Men',
+                        items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kids',
+                        items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
+                    },
+                    {
+                        label: 'Luggage',
+                        items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-fw pi-desktop',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
+                    },
+                    {
+                        label: 'Camcorder',
+                        items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'TV',
+                        items: [{ label: 'TV Item' }, { label: 'TV Item' }]
+                    },
+                    {
+                        label: 'Audio',
+                        items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Sports.7',
+                        items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Furniture',
+            icon: 'pi pi-fw pi-image',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
+                    },
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
+                    },
+                    {
+                        label: 'Outdoor',
+                        items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-fw pi-star',
+            items: [
+                [
+                    {
+                        label: 'Basketball',
+                        items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
+                    },
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
+                    }
+                ]
+            ]
+        }
+    ];
+    panelMenuItems = [
+        {
+            label: 'Customers',
+            icon: 'pi pi-fw pi-table',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus',
+                    items: [
+                        {
+                            label: 'Customer',
+                            icon: 'pi pi-fw pi-plus'
+                        },
+                        {
+                            label: 'Duplicate',
+                            icon: 'pi pi-fw pi-copy'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-user-edit'
+                }
+            ]
+        },
+        {
+            label: 'Orders',
+            icon: 'pi pi-fw pi-shopping-cart',
+            items: [
+                {
+                    label: 'View',
+                    icon: 'pi pi-fw pi-list'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Shipments',
+            icon: 'pi pi-fw pi-envelope',
+            items: [
+                {
+                    label: 'Tracker',
+                    icon: 'pi pi-fw pi-compass'
+                },
+                {
+                    label: 'Map',
+                    icon: 'pi pi-fw pi-map-marker'
+                },
+                {
+                    label: 'Manage',
+                    icon: 'pi pi-fw pi-pencil'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog'
+                },
+                {
+                    label: 'Billing',
+                    icon: 'pi pi-fw pi-file'
+                }
+            ]
+        }
+    ];
+
+}