import { r as registerInstance, h, F as Fragment } from './index-D0dWnGvB.js';

const SidePanelRoutes = [
    {
        name: 'Link',
        path: '/',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Link',
                path: '1',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 39,
            },
            {
                name: 'Link',
                path: '2',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 21,
            },
            {
                name: 'Link',
                path: '3',
                // icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
                // badge: 2,
            },
            // {
            //   name: "Home 4",
            //   path: "4",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 20,
            // },
            // {
            //   name: "Home 5",
            //   path: "5",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 150,
            //   children: [
            //     {
            //       name: "Home 1",
            //       path: "1",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 39,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 4",
            //       path: "4",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 20,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 5",
            //       path: "5",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 150,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 6",
            //       path: "6",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 200,
            //       level: 2,
            //     },
            //     {
            //       name: "Home 7",
            //       path: "7",
            //       icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //       badge: 24,
            //       level: 2,
            //     },
            //   ],
            // },
            // {
            //   name: "Home 6",
            //   path: "6",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 200,
            // },
            // {
            //   name: "Home 7",
            //   path: "7",
            //   icon: <i class='hgi-stroke hgi-arrow-down-01' style={{fontSize:"16px"}} />,
            //   badge: 24,
            // },
        ],
    },
    {
        name: 'Components',
        path: '/components',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Buttons',
                path: '/buttons',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Badges',
                path: '/badges',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Paths',
                path: '/Paths',
                children: [
                    {
                        name: 'Buttons',
                        path: '/buttons',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                    {
                        name: 'Badges',
                        path: '/badges',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                    {
                        name: 'Paths',
                        path: '/Paths',
                        icon: {
                            name: 'home-01',
                            variant: 'stroke',
                            size: 16,
                        },
                        badge: 100,
                    },
                ],
            },
            {
                name: 'Inputs',
                path: '/inputs',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Accordions',
                path: '/accordions',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Tabs',
                path: '/tabs',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
        ],
    },
    {
        name: 'Components 2',
        path: '/components',
        icon: {
            name: 'home-01',
            variant: 'stroke',
            size: 16,
        },
        disabled: false,
        children: [
            {
                name: 'Buttons',
                path: '/buttons',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Badges',
                path: '/badges',
                icon: {
                    name: 'home-01',
                    variant: 'stroke',
                    size: 16,
                },
                badge: 100,
            },
            {
                name: 'Paths',
                path: '/Paths',
                children: [
                    {
                        name: 'Buttons',
                        path: '/buttons',
                        badge: 100,
                    },
                    {
                        name: 'Badges',
                        path: '/badges',
                        badge: 100,
                    },
                    {
                        name: 'Paths',
                        path: '/Paths',
                        badge: 100,
                    },
                ],
            },
            {
                name: 'Inputs',
                path: '/inputs',
                badge: 100,
            },
            {
                name: 'Accordions',
                path: '/accordions',
                badge: 100,
            },
            {
                name: 'Tabs',
                path: '/tabs',
                badge: 100,
            },
        ],
    },
];
const DgaHeaderMenuItemUsage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.isMenuOpen = false;
        this.collapsed = false;
        // private buttonRef: HTMLElement | null = null;
        this.anchorEl = null;
        // private buttonRef: HTMLElement | null = null; // Reference to the button
        this.toggleMenu = () => {
            this.isMenuOpen = !this.isMenuOpen;
        };
        this.closeMenu = () => {
            this.isMenuOpen = false;
        };
    }
    get open() {
        return Boolean(this.anchorEl);
    }
    handleClick(event) {
        this.anchorEl = event.currentTarget;
    }
    handleClose() {
        this.anchorEl = null;
    }
    render() {
        return (h(Fragment, { key: 'd6c7a6627c780f016d449c2323924ef5b92ca820' }, h("dga-header-vv2", { key: 'dd5cc89e369d386d42e06019fd89448e8163235f' }, h("dga-flex", { key: '8c0a8d0eef816d46ecfacb3587fd8bd99f52b9ab', spacing: 16, direction: "row", align: "center", justify: "between" }, h("dga-button", { key: '7ce5cdebeb2a40e6e6d1049450bbeccb6f67058f', iconOnly: true, leadIcon: true, leadIconType: this.collapsed ? 'cancel01' : 'menu01', leadIconProps: {
                name: this.collapsed ? 'menu01' : 'cancel01',
                size: 24,
                variant: 'stroke',
                type: 'rounded',
            }, variant: "transparent", onClick: () => (this.collapsed = !this.collapsed), class: "header-menu__btn", sx: {
                display: { xs: 'block', md: 'none' },
            } }), h("dga-logo-placeholder", { key: '559500611bc5a28608113d6d75eb8454c0e81376', size: "md" }), h("dga-flex", { key: '2c6335f73d6730f7c700abedf5dd24ae256ef259', direction: "row", align: "center", justify: "start", sx: {
                display: { xs: 'none', md: 'block' },
            } }, h("dga-header-menu-item", { key: 'f64b5487022d3f9fada72c6ab116ef0ee9d9d345', label: "Home" }), h("dga-header-menu-item", { key: '7ad2847f668215870e271d44d45d20028f6cc8f0', label: "About" }), h("dga-header-menu-item", { key: '697b4a921c5c13a7afc6d4d1aa65c437e3154332', label: "Contact", active: true }, h("dga-header-sub-menu", { key: '3420bac5e06749fd9c3e9e61fdb2941a07423c52', subMenuFullWidth: true }, h("dga-header-sub-menu-column", { key: '925a4796fcb7ecf4d0593a7b3b9eb879aa81442a', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'e5cb593d19dbe443c4f938affbb91e4077517708', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '525d50f9d012708d720e1f58e4971b9001654018', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '25ec0bc4343bc6fc6317cc1f28fbeb6fdd844ecf', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '4c26c9c5f66b809839c550bab0c40aa443263b4f', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'd7bd108f664356295d1a506ca8fb21f4197e8d28', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '661b823f642a9936a0d95b12dc61643494a7e767', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: 'af690f1a1143394487a2193bd3a3cc058c0cc6e0', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '394388761d3f8d5cee86a475a128c09fff6ee6a0', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '25d2397a025d65620ba271e87e028f9f71ef2144', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'ef74e53fb7c43d45791e438fbd2197359e0c6537', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'b891c246e2a5dc282806e74815d007f824121340', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '3b1f3f3859a29cc58337ec0465978a37fcd8ec13', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '344a816cb926fd1daa92fb367c1b5333ba4c1487', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '0df584c0cef7c2a3e26a1118faf0fc8e86c51f40', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'e838c588de27f8640b4493fecb6cd5939bd81335', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '15e9c7be559a23e9dd51587f793c606c07f0c4ce', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '873dd0b962b176ccbb3deaa20013349d42dd5caa', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'c7037a2f2de536ca28b307fa900823d3d30079da', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '2d8c7f1ffd2ba8883556b1acd2f8a02c7954ee23', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'd546c2762f955641eb02626b3186662753f33693', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '95b75bea2a9740bc8ccd65e5b1375e8000d62ad1', label: "Column Label" }, h("dga-header-sub-menu-item", { key: 'cbad23c8d5f3866acf2196052cf8d196cda69578', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '1ca3e4eae6fb023559d021558226228773b2cbb9', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'f03ad0da3ea28069e1c119850a30815530c8b168', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '518d1e9097ee4335d6f14d9d21eef5ee115bf33c', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '731f4334f30a2f7c1721f7d4f27d011251566135', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: 'd93310f4f20ed568f07006228af016689b668ad5', label: "Tag", color: "blue", slot: "tag", rounded: true }))), h("dga-header-sub-menu-column", { key: '9762515c4a9c15a6935980fe87691c398c7f452f', label: "Column Label" }, h("dga-header-sub-menu-item", { key: '75f83a6249db901fe17803f7c415d985ec4a9bc8', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '53fc42a43a4a1ee5bb97f0f350175d2506b4f704', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: 'cce3fb99fb9cc17c7d463dec37649bf5d85134a6', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '0c483a6371508d4fded84c684e10062efde07714', label: "Tag", color: "blue", slot: "tag", rounded: true })), h("dga-header-sub-menu-item", { key: '5bcc05c1357854a6c7b9c83341b4618eada38f92', label: "Menu Item Label", icon: "checkmark-square-02", helperText: "Menu item helper text" }, h("dga-tag", { key: '30cb979007b67ae07791a2408d6f2c7aa98eb048', label: "Tag", color: "blue", slot: "tag", rounded: true }))))))), h("dga-flex", { key: '52199f34716a02619e81dea3a06f25a8e7bdaed7', direction: "row", align: "center", justify: "end" }, h("dga-header-action", { key: '9b3042f24ef0c2ed922277bc4b25fa213c6f8329', label: "Action", icon: "login-square-01" }), h("dga-header-action", { key: '987ca8bdbd0adc25bc7085d80bc0ded369c29556', icon: "login-square-01", iconPosition: "top" }, h("dga-header-sub-menu", { key: '5870bd7692893e6d77b49223e042125b2836af84', subMenuFullWidth: true }, h("dga-search-box", { key: '7c5589a3f880dd123f2084fe71aabd74d2e73586' }))), h("dga-action-menu", { key: 'd9892b8962dffda321999d220a06cd8a2556b834', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: 'd1aeeb43f59e065b7d7a555d3d5294d574b52c9e', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'more-horizontal-circle-01',
                size: 24,
                variant: 'solid',
                type: 'rounded',
            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: 'a32996059f93b9a33634c17860db7d54c770fa87' }, h("dga-menu-item", { key: 'ff14606511f70d4d47aa536e9a4dd8cd361ffa9b', label: "Item Label" }), h("dga-menu-item", { key: '34da29575a7600e8b47c3340e38095821598d94a', label: "Item Label" }), h("dga-menu-item", { key: 'c016c9ab6d8da53695ba7db1cd0c2a317a71f330', label: "Item Label" }))))), h("dga-drawer", { key: '53ed91622f0f81b991cf36c5af6f9b9857f37ca4', routes: SidePanelRoutes, open: this.collapsed, background: 'gray', headerLogo: "https://casamedia.com/wp-content/uploads/2023/04/adidas-1024x683.png", sx: {
                '& > .sidepanel': {
                    top: '72px',
                },
            }, overlay: true }, "efddsfdsfsdfdsfdsf dfdsfdsfdsfdsfdsfdf", h("a", { key: '692ae95d2124e64799662a6cdd5087c8e1756e1c' }, "fdgdfgfdg"), h("div", { key: '91dc4afccd2e5cdd496172cff2a1c99aa286c9d1' }, "gfdgfdgfd")), h("dga-logo-placeholder", { key: '9097337a7ef9737d3e17b8cd1060076f1c939c20', text: "Platform Logo", size: "md" }), h("dga-logo-placeholder", { key: 'bbc5315b6a6bb61b41ef5f70a6e97852c8d3835c', text: "Platform Logo", size: "sm" }), h("dga-action-menu", { key: '5f2c63d9a5fd597ec495c345f622e9995d86a096', open: this.isMenuOpen, onClose: () => (this.isMenuOpen = false), placement: 'bottom-end' }, h("dga-button-v2", { key: '62c1d3bbd210781b61747af82097e94bbeb01e61', slot: "trigger", iconOnly: true, leadIcon: true, leadIconProps: {
                name: 'more-horizontal-circle-01',
                size: 24,
                variant: 'solid',
                type: 'rounded',
            }, variant: "transparent", onClick: () => (this.isMenuOpen = true), class: "header-menu__btn" }), h("dga-menu-list", { key: '24604eadb00bd7c32313d28a1e4d5e3af1aa3266' }, h("dga-menu-item", { key: 'd1250a526e649db3204d82eec6b8a82dd946979c', label: "Item Label" }), h("dga-menu-item", { key: '1e4854b179e9379e59cd954155f9aec4cb5405e1', label: "Item Label" }), h("dga-menu-item", { key: '22541618a33e33b075a985f4d022e914b974eb1a', label: "Item Label" })))));
    }
};

export { DgaHeaderMenuItemUsage as dga_header_menu_item_usage };
