'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dialog, DialogBackdrop, DialogPanel, Menu, MenuButton, MenuItem, MenuItems, TransitionChild } from '@headlessui/react';
import { cn } from '@nlabs/utils';
import { Menu as Bars3, Bell, Calendar, ChevronDown, Files, Folder, Home, PieChart, Search, Users, X } from 'lucide-react';
import { useState } from 'react';
import { Outlet } from 'react-router';
import { Config } from '../../config/appConfig.js';
const sideMenuItems = [
    {
        current: true,
        href: '#',
        icon: Home,
        name: 'Dashboard'
    },
    {
        current: false,
        href: '#',
        icon: Users,
        name: 'Team'
    },
    {
        current: false,
        href: '#',
        icon: Folder,
        name: 'Projects'
    },
    {
        current: false,
        href: '#',
        icon: Calendar,
        name: 'Calendar'
    },
    {
        current: false,
        href: '#',
        icon: Files,
        name: 'Documents'
    },
    {
        current: false,
        href: '#',
        icon: PieChart,
        name: 'Reports'
    }
];
const userMenuItems = [
    {
        href: '#',
        name: 'Profile'
    },
    {
        href: '#',
        name: 'Sign out'
    }
];
export const MenuView = ()=>{
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const app = Config.get('app');
    return /*#__PURE__*/ _jsxs("div", {
        children: [
            /*#__PURE__*/ _jsxs(Dialog, {
                open: sidebarOpen,
                onClose: setSidebarOpen,
                className: "relative z-50 lg:hidden",
                children: [
                    /*#__PURE__*/ _jsx(DialogBackdrop, {
                        transition: true,
                        className: "fixed inset-0 bg-gray-900/80 transition-opacity duration-300 ease-linear data-closed:opacity-0"
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "fixed inset-0 flex",
                        children: /*#__PURE__*/ _jsxs(DialogPanel, {
                            transition: true,
                            className: "relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full",
                            children: [
                                /*#__PURE__*/ _jsx(TransitionChild, {
                                    children: /*#__PURE__*/ _jsx("div", {
                                        className: "absolute top-0 left-full flex w-16 justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0",
                                        children: /*#__PURE__*/ _jsxs("button", {
                                            type: "button",
                                            onClick: ()=>setSidebarOpen(false),
                                            className: "-m-2.5 p-2.5",
                                            children: [
                                                /*#__PURE__*/ _jsx("span", {
                                                    className: "sr-only",
                                                    children: "Close sidebar"
                                                }),
                                                /*#__PURE__*/ _jsx(X, {
                                                    "aria-hidden": "true",
                                                    className: "size-6 text-white"
                                                })
                                            ]
                                        })
                                    })
                                }),
                                /*#__PURE__*/ _jsxs("div", {
                                    className: "flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10",
                                    children: [
                                        /*#__PURE__*/ _jsx("div", {
                                            className: "flex h-16 shrink-0 items-center",
                                            children: /*#__PURE__*/ _jsx("img", {
                                                alt: app?.title,
                                                src: app?.logo,
                                                className: "h-8 w-auto"
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx("nav", {
                                            className: "flex flex-1 flex-col",
                                            children: /*#__PURE__*/ _jsx("ul", {
                                                role: "list",
                                                className: "-mx-2 flex-1 space-y-1",
                                                children: sideMenuItems?.map((item)=>/*#__PURE__*/ _jsx("li", {
                                                        children: /*#__PURE__*/ _jsxs("a", {
                                                            href: item.href,
                                                            className: cn(item.current ? 'bg-gray-800 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white', 'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold'),
                                                            children: [
                                                                item.icon && /*#__PURE__*/ _jsx(item.icon, {
                                                                    "aria-hidden": "true",
                                                                    className: "size-6 shrink-0"
                                                                }),
                                                                item.name
                                                            ]
                                                        })
                                                    }, item.name))
                                            })
                                        })
                                    ]
                                })
                            ]
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-gray-900 lg:pb-4",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "flex h-16 shrink-0 items-center justify-center",
                        children: /*#__PURE__*/ _jsx("img", {
                            alt: "Your Company",
                            src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500",
                            className: "h-8 w-auto"
                        })
                    }),
                    /*#__PURE__*/ _jsx("nav", {
                        className: "mt-8",
                        children: /*#__PURE__*/ _jsx("ul", {
                            role: "list",
                            className: "flex flex-col items-center space-y-1",
                            children: sideMenuItems?.map((item)=>/*#__PURE__*/ _jsx("li", {
                                    children: /*#__PURE__*/ _jsxs("a", {
                                        href: item.href,
                                        className: cn(item.current ? 'bg-gray-800 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white', 'group flex gap-x-3 rounded-md p-3 text-sm/6 font-semibold'),
                                        children: [
                                            item.icon && /*#__PURE__*/ _jsx(item.icon, {
                                                "aria-hidden": "true",
                                                className: "size-6 shrink-0"
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "sr-only",
                                                children: item.name
                                            })
                                        ]
                                    })
                                }, item.name))
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "lg:pl-20",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-xs sm:gap-x-6 sm:px-6 lg:px-8",
                        children: [
                            /*#__PURE__*/ _jsxs("button", {
                                type: "button",
                                onClick: ()=>setSidebarOpen(true),
                                className: "-m-2.5 p-2.5 text-gray-700 lg:hidden",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "sr-only",
                                        children: "Open sidebar"
                                    }),
                                    /*#__PURE__*/ _jsx(Bars3, {
                                        "aria-hidden": "true",
                                        className: "size-6"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                "aria-hidden": "true",
                                className: "h-6 w-px bg-gray-900/10 lg:hidden"
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex flex-1 gap-x-4 self-stretch lg:gap-x-6",
                                children: [
                                    /*#__PURE__*/ _jsxs("form", {
                                        action: "#",
                                        method: "GET",
                                        className: "grid flex-1 grid-cols-1",
                                        children: [
                                            /*#__PURE__*/ _jsx("input", {
                                                name: "search",
                                                type: "search",
                                                placeholder: "Search",
                                                "aria-label": "Search",
                                                className: "col-start-1 row-start-1 block size-full bg-white pl-8 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm/6"
                                            }),
                                            /*#__PURE__*/ _jsx(Search, {
                                                "aria-hidden": "true",
                                                className: "pointer-events-none col-start-1 row-start-1 size-5 self-center text-gray-400"
                                            })
                                        ]
                                    }),
                                    /*#__PURE__*/ _jsxs("div", {
                                        className: "flex items-center gap-x-4 lg:gap-x-6",
                                        children: [
                                            /*#__PURE__*/ _jsxs("button", {
                                                type: "button",
                                                className: "-m-2.5 p-2.5 text-gray-400 hover:text-gray-500",
                                                children: [
                                                    /*#__PURE__*/ _jsx("span", {
                                                        className: "sr-only",
                                                        children: "View notifications"
                                                    }),
                                                    /*#__PURE__*/ _jsx(Bell, {
                                                        "aria-hidden": "true",
                                                        className: "size-6"
                                                    })
                                                ]
                                            }),
                                            /*#__PURE__*/ _jsx("div", {
                                                "aria-hidden": "true",
                                                className: "hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
                                            }),
                                            /*#__PURE__*/ _jsxs(Menu, {
                                                as: "div",
                                                className: "relative",
                                                children: [
                                                    /*#__PURE__*/ _jsxs(MenuButton, {
                                                        className: "-m-1.5 flex items-center p-1.5",
                                                        children: [
                                                            /*#__PURE__*/ _jsx("span", {
                                                                className: "sr-only",
                                                                children: "Open user menu"
                                                            }),
                                                            /*#__PURE__*/ _jsx("img", {
                                                                alt: "",
                                                                src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
                                                                className: "size-8 rounded-full bg-gray-50"
                                                            }),
                                                            /*#__PURE__*/ _jsxs("span", {
                                                                className: "hidden lg:flex lg:items-center",
                                                                children: [
                                                                    /*#__PURE__*/ _jsx("span", {
                                                                        "aria-hidden": "true",
                                                                        className: "ml-4 text-sm/6 font-semibold text-gray-900",
                                                                        children: "Tom Cook"
                                                                    }),
                                                                    /*#__PURE__*/ _jsx(ChevronDown, {
                                                                        "aria-hidden": "true",
                                                                        className: "ml-2 size-5 text-gray-400"
                                                                    })
                                                                ]
                                                            })
                                                        ]
                                                    }),
                                                    /*#__PURE__*/ _jsx(MenuItems, {
                                                        transition: true,
                                                        className: "absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 ring-1 shadow-lg ring-gray-900/5 transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in",
                                                        children: userMenuItems?.map((item)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                                children: /*#__PURE__*/ _jsx("a", {
                                                                    href: item.href,
                                                                    className: "block px-3 py-1 text-sm/6 text-gray-900 data-focus:bg-gray-50 data-focus:outline-hidden",
                                                                    children: item.name
                                                                })
                                                            }, item.name))
                                                    })
                                                ]
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx("main", {
                        className: "xl:pl-96",
                        children: /*#__PURE__*/ _jsx("div", {
                            className: "px-4 py-10 sm:px-6 lg:px-8 lg:py-6",
                            children: /*#__PURE__*/ _jsx(Outlet, {})
                        })
                    })
                ]
            })
        ]
    });
};
export default MenuView;

//# sourceMappingURL=data:application/json;base64, 