<!-- Start: Layout - Sidebar -->

<!-- <input type="checkbox" id="layout-sidebar-toggle-trigger" class="hidden" aria-label="Toggle layout sidebar" />
<input type="checkbox" id="layout-sidebar-hover-trigger" class="hidden" aria-label="Dense layout sidebar" />
<div id="layout-sidebar-hover" class="bg-base-300 h-screen w-1"></div>

<div id="layout-sidebar" class="sidebar-menu sidebar-menu-activation">
    <div class="flex min-h-16 items-center justify-between gap-3 ps-5 pe-4">
        <a href="./dashboards-ecommerce.html">
            <img src="{{ 'logo_hura8.png' | asset_url }}" class="h-5.5" />
        </a>
        <label for="layout-sidebar-hover-trigger" title="Toggle sidebar hover"
            class="btn btn-circle btn-ghost btn-sm text-base-content/50 relative max-lg:hidden">
            <span
                class="iconify lucide--panel-left-close absolute size-4.5 opacity-100 transition-all duration-300 group-has-[[id=layout-sidebar-hover-trigger]:checked]/html:opacity-0"></span>
            <span
                class="iconify lucide--panel-left-dashed absolute size-4.5 opacity-0 transition-all duration-300 group-has-[[id=layout-sidebar-hover-trigger]:checked]/html:opacity-100"></span>
        </label>
    </div>
    <div class="relative min-h-0 grow">
        <div data-simplebar class="size-full">
            <div class="mb-3 space-y-0.5 px-2.5">

                <div class="collapse">
                    <div class="collapse-title px-2.5 py-1.5">
                        <span class="iconify lucide--home tw-tsa"></span>
                        <a href="/" class="grow {% if global.url == '/' %}active{% endif %}">Trang
                            chủ</a>
                    </div>
                </div>


                {% for _category in global.main_menu %}
                {% assign _type = _category[0] %}
                {% assign _menuArray = _category[1].menu %}
                {% if _category[1].enable == 1 %}
                <div class="group collapse">
                    <input aria-label="Sidemenu item trigger" type="checkbox" class="peer"
                        name="sidebar-menu-parent-item" />
                    <div class="collapse-title px-2.5 py-1.5">
                        {% if _type == 'order' %}
                        <span class="iconify lucide--store tw-tsa"></span>
                        {% elsif _type == 'product' %}
                        <span class="iconify lucide--package tw-tsa"></span>
                        {% elsif _type == 'customer' %}
                        <span class="iconify lucide--users tw-tsa"></span>
                        {% elsif _type == 'article' %}
                        <span class="iconify lucide--newspaper tw-tsa"></span>
                        {% elsif _type == 'marketing' %}
                        <span class="iconify lucide--megaphone tw-tsa"></span>
                        {% elsif _type == 'job' %}
                        <span class="iconify lucide--briefcase tw-tsa"></span>
                        {% elsif _type == 'pcbuilder' %}
                        <span class="iconify lucide--monitor-smartphone tw-tsa"></span>
                        {% elsif _type == 'payinstall' %}
                        <span class="iconify lucide--handshake tw-tsa"></span>
                        {% elsif _type == 'distributor' %}
                        <span class="iconify lucide--store tw-tsa"></span>
                        {% elsif _type == 'report' %}
                        <span class="iconify lucide--pie-chart tw-tsa"></span>
                        {% elsif _type == 'system' %}
                        <span class="iconify hugeicons--settings-04 tw-tsa"></span>
                        {% endif %}
                        <span class="grow">{{ _category[1].name }}</span>
                        <span class="iconify lucide--chevron-right arrow-icon size-3.5"></span>
                    </div>
                    <div class="collapse-content ms-6.5 !p-0">
                        <div class="mt-0.5 space-y-0.5">
                            {% for _item in _menuArray %}
                            <a class="menu-item false  {% if _item.url == global.url %} active  {% endif %}"
                                href="{{ _item.url }}">
                                <span class="grow">{{ _item.name }}</span>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}



            </div>
        </div>
        <div
            class="from-base-100/60 pointer-events-none absolute start-0 end-0 bottom-0 h-7 bg-linear-to-t to-transparent">
        </div>
    </div>
    <div class="mb-2">
        <hr class="border-base-300 my-2 border-dashed" />
        <div class="dropdown dropdown-top dropdown-end w-full">
            <div tabindex="0" role="button"
                class="bg-base-200 hover:bg-base-300 rounded-box mx-2 mt-0 flex cursor-pointer items-center gap-2.5 px-3 py-2 transition-all">
                <div class="avatar">
                    <div class="bg-base-200 mask mask-squircle w-8">
                        <img src="./../../assets/images/avatars/1.png" alt="Avatar" />
                    </div>
                </div>
                <div class="grow -space-y-0.5">
                    <p class="text-sm font-medium">Denish N</p>
                    <p class="text-base-content/60 text-xs">@withden</p>
                </div>
                <span class="iconify lucide--chevrons-up-down text-base-content/60 size-4"></span>
            </div>
            <ul role="menu" tabindex="0"
                class="dropdown-content menu bg-base-100 rounded-box shadow-base-content/4 mb-1 w-48 p-1 shadow-[0px_-10px_40px_0px]">
                <li>
                    <a href="./pages/settings.html">
                        <span class="iconify lucide--user size-4"></span>
                        <span>My Profile</span>
                    </a>
                </li>
                <li>
                    <a href="./pages/settings.html">
                        <span class="iconify lucide--settings size-4"></span>
                        <span>Settings</span>
                    </a>
                </li>
                <li>
                    <a href="./pages/get-help.html">
                        <span class="iconify lucide--help-circle size-4"></span>
                        <span>Help</span>
                    </a>
                </li>
                <li>
                    <div>
                        <span class="iconify lucide--bell size-4"></span>
                        <span>Notification</span>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="iconify lucide--arrow-left-right size-4"></span>
                        <span>Switch Account</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<label for="layout-sidebar-toggle-trigger" id="layout-sidebar-backdrop"></label> -->

<!--  End: Layout - Sidebar -->





<div role="navigation" aria-label="Navbar" class="" id="layout-topbar">
    <div class="flex items-center justify-between px-6 py-3 bg-menu">
        <div class="inline-flex items-center gap-5">
            <a href="/">
                <img src="{{ 'logo_new.png' | asset_url }}" class="h-5.5" />
            </a>
            <button
                class="btn btn-outline btn-sm btn-ghost border-base-300 text-base-content/70 hidden h-9 w-100 justify-start gap-2 !text-sm md:flex bg-white"
                onclick="document.getElementById('topbar-search-modal')?.showModal()">
                <span class="iconify lucide--search size-4"></span>
                <span>Tìm Kiếm</span>
            </button>
            <button
                class="btn btn-outline btn-sm btn-square btn-ghost border-base-300 text-base-content/70 flex size-9 md:hidden"
                aria-label="Search" onclick="document.getElementById('topbar-search-modal')?.showModal()">
                <span class="iconify lucide--search size-4"></span>
            </button>
            <dialog id="topbar-search-modal" class="modal p-0">
                <div class="modal-box bg-transparent p-0 shadow-none">
                    <div class="bg-base-100 rounded-box">
                        <div class="input w-full border-0 !outline-none">
                            <span class="iconify lucide--search text-base-content/60 size-4.5"></span>
                            <input type="search" class="grow" placeholder="Tìm kiếm" aria-label="Search" />
                            <form method="dialog">
                                <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close">
                                    <span class="iconify lucide--x text-base-content/80 size-4"></span>
                                </button>
                            </form>
                        </div>
                        <div class="border-base-300 flex items-center gap-3 border-t px-2 py-2">
                            <div class="flex items-center gap-0.5">
                                <div
                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                    <span class="iconify lucide--arrow-up size-3.5"></span>
                                </div>
                                <div
                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                    <span class="iconify lucide--arrow-down size-3.5"></span>
                                </div>
                                <p class="text-base-content/80 ms-1 text-sm">Điều hướng</p>
                            </div>
                            <div class="flex items-center gap-0.5 max-sm:hidden">
                                <div
                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                    <span class="iconify lucide--undo-2 size-3.5"></span>
                                </div>
                                <p class="text-base-content/80 ms-1 text-sm">Quay lại</p>
                            </div>
                            <div class="flex items-center gap-0.5">
                                <div
                                    class="border-base-300 bg-base-200 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                    <span class="iconify lucide--corner-down-left size-3.5"></span>
                                </div>
                                <p class="text-base-content/80 ms-1 text-sm">Mở</p>
                            </div>
                            <div class="ms-auto flex items-center gap-0.5">
                                <div
                                    class="border-base-300 bg-base-200 flex h-5 items-center justify-center rounded-sm border px-1 text-sm/none shadow-xs">
                                    esc
                                </div>
                                <p class="text-base-content/80 ms-1 text-sm">Đóng</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-base-100 rounded-box mt-4">
                        <div class="px-5 py-3">
                            <p class="text-base-content/80 text-sm font-medium">I'm looking for...</p>
                            <div class="mt-2 flex flex-wrap gap-1.5">
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Writer
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Editor
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box cursor-pointer border px-2.5 py-1 text-sm/none">
                                    Explainer
                                </div>
                                <div
                                    class="border-base-300 hover:bg-base-200 rounded-box flex cursor-pointer items-center gap-1 border border-dashed px-2.5 py-1 text-sm/none">
                                    <span class="iconify lucide--plus size-3.5"></span>
                                    Action
                                </div>
                            </div>
                        </div>
                        <hr class="border-base-300 h-px border-dashed" />

                        <ul class="menu w-full pt-1">
                            <li class="menu-title">Talk to assistant</li>
                            <li>
                                <div class="group">
                                    <div
                                        class="from-primary to-primary/80 mask mask-squircle text-primary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
                                        R
                                    </div>
                                    <p class="grow text-sm">Research Buddy</p>
                                    <div
                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
                                        <span class="iconify lucide--star text-orange-500"></span>
                                        <div class="flex items-center gap-0.5">
                                            <div
                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
                                            </div>
                                            <p class="ms-1 text-sm opacity-80">Select</p>
                                        </div>
                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
                                    </div>
                                </div>
                            </li>

                            <li>
                                <div class="group">
                                    <div
                                        class="from-secondary to-secondary/80 mask mask-squircle text-secondary-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
                                        T
                                    </div>
                                    <p class="grow text-sm">Task Planner</p>
                                    <div
                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
                                        <span class="iconify lucide--star text-orange-500"></span>
                                        <div class="flex items-center gap-0.5">
                                            <div
                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
                                            </div>
                                            <p class="ms-1 text-sm opacity-80">Select</p>
                                        </div>
                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="group">
                                    <div
                                        class="from-success to-success/80 mask mask-squircle text-success-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
                                        S
                                    </div>
                                    <p class="grow text-sm">Sparking Ideas</p>
                                    <div
                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
                                        <span class="iconify lucide--star text-orange-500"></span>
                                        <div class="flex items-center gap-0.5">
                                            <div
                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
                                            </div>
                                            <p class="ms-1 text-sm opacity-80">Select</p>
                                        </div>
                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="group">
                                    <div
                                        class="from-warning to-warning/80 mask mask-squircle text-warning-content flex size-5 items-center justify-center bg-linear-to-b leading-none font-medium">
                                        D
                                    </div>
                                    <p class="grow text-sm">Docs Assistant</p>
                                    <div
                                        class="flex translate-x-2 items-center gap-2.5 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100">
                                        <span class="iconify lucide--star text-orange-500"></span>
                                        <div class="flex items-center gap-0.5">
                                            <div
                                                class="border-base-300 flex size-5 items-center justify-center rounded-sm border shadow-xs">
                                                <span class="iconify lucide--corner-down-left size-3.5"></span>
                                            </div>
                                            <p class="ms-1 text-sm opacity-80">Select</p>
                                        </div>
                                        <span class="iconify lucide--ellipsis-vertical opacity-80"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <hr class="border-base-300 h-px border-dashed" />

                        <ul class="menu w-full pt-1">
                            <li class="menu-title flex flex-row items-center justify-between gap-2">
                                <span>Tasks Manager</span>
                                <span>Progress</span>
                            </li>
                            <li>
                                <div>
                                    <span class="iconify lucide--notebook size-4"></span>
                                    <p class="grow text-sm">Creating an essay</p>
                                    <progress class="progress progress-primary h-1 w-30" value="60"
                                        max="100"></progress>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="iconify lucide--message-circle size-4"></span>
                                    <p class="grow text-sm">Summarizing chat</p>
                                    <progress class="progress progress-secondary h-1 w-30" value="80"
                                        max="100"></progress>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="iconify lucide--code size-4"></span>
                                    <p class="grow text-sm">Fixing syntax</p>
                                    <progress class="progress progress-accent h-1 w-30" value="35" max="100"></progress>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="iconify lucide--book-open size-4"></span>
                                    <p class="grow text-sm">Reading docs</p>
                                    <progress class="progress progress-info h-1 w-30" value="90" max="100"></progress>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span class="iconify lucide--lightbulb size-4"></span>
                                    <p class="grow text-sm">Generating ideas</p>
                                    <progress class="progress progress-warning h-1 w-30" value="50"
                                        max="100"></progress>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <form method="dialog" class="modal-backdrop">
                    <button>close</button>
                </form>
            </dialog>
        </div>
        <div class="inline-flex items-center gap-0.5">

            <div class="dropdown dropdown-bottom sm:dropdown-end dropdown-center">
                <div tabindex="0" role="button" class="btn btn-circle btn-sm relative" aria-label="Notifications">
                    <span class="iconify lucide--bell motion-preset-seesaw size-4.5"></span>
                    <div class="status status-error status-sm absolute end-1 top-1"></div>
                </div>
                <div tabindex="0"
                    class="dropdown-content bg-base-100 rounded-box mt-1 w-84 shadow-md duration-1000 hover:shadow-lg">
                    <div class="bg-base-200/30 rounded-t-box border-base-200 border-b ps-4 pe-2 pt-3">
                        <div class="flex items-center justify-between">
                            <p class="font-medium">Notification</p>
                            <button class="btn btn-xs btn-circle btn-ghost" aria-label="Close"
                                onclick="document.activeElement.blur()">
                                <span class="iconify lucide--x size-4"></span>
                            </button>
                        </div>
                        <div class="-ms-2 mt-2 -mb-px flex items-center justify-between">
                            <div role="tablist" class="tabs tabs-sm tabs-border">
                                <div role="tab" class="tab tab-active gap-2 px-3 font-medium">
                                    <span>All</span>
                                    <div class="badge badge-sm">4</div>
                                </div>
                                <div role="tab" class="tab gap-2 px-3"><span>Team</span></div>
                                <div role="tab" class="tab gap-2 px-3"><span>AI</span></div>
                                <div role="tab" class="tab gap-2 px-3"><span>@mention</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="hover:bg-base-200/20 relative flex items-start gap-3 p-4 transition-all">
                        <div class="avatar avatar-online size-12">
                            <img src="../../assets/images//avatars/2.png"
                                class="from-primary/80 to-primary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Lena submitted a draft for review.</p>
                            <p class="text-base-content/60 text-xs">15 min ago</p>
                            <div class="mt-2 flex items-center gap-2">
                                <button class="btn btn-sm btn-primary">Approve</button>
                                <button class="btn btn-sm btn-outline border-base-300">Decline</button>
                            </div>
                        </div>
                        <div class="status status-primary absolute end-4 top-4 size-1.5"></div>
                    </div>
                    <hr class="border-base-300 border-dashed" />
                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                        <div class="avatar avatar-offline size-12">
                            <img src="/images/avatars/4.png"
                                class="from-secondary/80 to-secondary/60 mask mask-squircle bg-linear-to-b px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Kai mentioned you in a project.</p>
                            <p class="text-base-content/60 text-xs">22 min ago</p>
                            <div
                                class="from-base-200 via-base-200/80 rounded-box mt-2 flex items-center justify-between gap-2 bg-linear-to-r to-transparent py-1 ps-2.5">
                                <p class="text-sm">Check model inputs?</p>
                                <button class="btn btn-xs btn-ghost text-xs">
                                    <span class="iconify lucide--reply size-3.5"></span>
                                    Reply
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="border-base-300 border-dashed" />
                    <div class="hover:bg-base-200/20 flex items-start gap-3 p-4 transition-all">
                        <div class="avatar size-12">
                            <img src="/images/avatars/5.png"
                                class="mask mask-squircle bg-linear-to-b from-orange-500/80 to-orange-500/60 px-1 pt-1"
                                alt="" />
                        </div>
                        <div class="grow">
                            <p class="text-sm leading-tight">Your latest results are ready</p>
                            <div
                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                <p class="text-sm">
                                    Forecast Report
                                    <span class="text-base-content/60 text-xs">(12 MB)</span>
                                </p>
                                <button class="btn btn-xs btn-square btn-ghost text-xs">
                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                </button>
                            </div>
                            <div
                                class="border-base-200 rounded-box mt-2 flex items-center justify-between gap-2 border px-2.5 py-1.5">
                                <p class="text-sm">
                                    Generated Summary
                                    <span class="text-base-content/60 text-xs">(354 KB)</span>
                                </p>
                                <button class="btn btn-xs btn-square btn-ghost text-xs">
                                    <span class="iconify lucide--arrow-down-to-line size-4"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr class="border-base-200" />
                    <div class="flex items-center justify-between px-2 py-2">
                        <button class="btn btn-sm btn-soft btn-primary">View All</button>
                        <div class="flex items-center gap-1">
                            <button class="btn btn-sm btn-square btn-ghost">
                                <span class="iconify lucide--check-check size-4"></span>
                            </button>
                            <button class="btn btn-sm btn-square btn-ghost">
                                <span class="iconify lucide--bell-ring size-4"></span>
                            </button>
                            <button class="btn btn-sm btn-square btn-ghost">
                                <span class="iconify lucide--settings size-4"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="drawer drawer-end">
                <input id="topbar-profile-drawer" type="checkbox" class="drawer-toggle" />
                <div class="drawer-content">
                    <label for="topbar-profile-drawer" class="btn btn-ghost flex items-center gap-2 px-1.5">
                        <div class="avatar">
                            <div class="bg-base-200 mask mask-squircle w-8">
                                <img src="../../assets/images/avatars/1.png" alt="Avatar" />
                            </div>
                        </div>
                        <div class="text-start">
                            <p class="text-sm/none text-white">Denish</p>
                            <p class="text-base-content/50 mt-0.5 text-xs/none text-white">Team</p>
                        </div>
                    </label>
                </div>
                <div class="drawer-side">
                    <label for="topbar-profile-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
                    <div class="h-full w-72 p-2 sm:w-84">
                        <div class="bg-base-100 rounded-box relative flex h-full flex-col pt-4 sm:pt-8">
                            <label for="topbar-profile-drawer"
                                class="btn btn-xs btn-circle btn-ghost absolute start-2 top-2" aria-label="Close">
                                <span class="iconify lucide--x size-4"></span>
                            </label>
                            <div class="flex flex-col items-center">
                                <div class="relative">
                                    <div
                                        class="avatar bg-base-200 isolate size-20 cursor-pointer overflow-hidden rounded-full px-1 pt-1 md:size-24">
                                        <img src="/images/avatars/1.png" alt="User Avatar" />
                                    </div>
                                    <div
                                        class="bg-base-100 absolute end-0 bottom-0 flex items-center justify-center rounded-full p-1.5 shadow-sm">
                                        <span class="iconify lucide--pencil size-4"></span>
                                    </div>
                                </div>
                                <p class="mt-4 text-lg/none font-medium sm:mt-8">John Doe</p>
                                <p class="text-base-content/60 mt-1 text-sm">john@company.com</p>
                                <div class="mt-4 flex items-center gap-2 *:cursor-pointer sm:mt-6">
                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
                                        <img src="/images/avatars/2.png" alt="Team member" />
                                    </div>
                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
                                        <img src="/images/avatars/3.png" alt="Team member" />
                                    </div>
                                    <div class="avatar bg-base-200 size-10 overflow-hidden rounded-full px-1 pt-1">
                                        <img src="/images/avatars/4.png" alt="Team member" />
                                    </div>
                                    <div
                                        class="bg-base-200 border-base-300 flex size-10 items-center justify-center rounded-full border border-dashed">
                                        <span class="iconify lucide--plus size-4.5"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="border-base-300 mt-4 grow overflow-auto border-t border-dashed px-2 sm:mt-6">
                                <ul class="menu w-full p-2">
                                    <li class="menu-title">Account</li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--user size-4.5"></span>
                                            <span>View Profile</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--users size-4.5"></span>
                                            <span>Team</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--mail-plus size-4.5"></span>
                                            <span>Invites</span>
                                            <div class="badge badge-sm">4</div>
                                        </a>
                                    </li>
                                    <li class="menu-title">Platform</li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--settings size-4.5"></span>
                                            <span>Settings</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--credit-card size-4.5"></span>
                                            <span>Billing</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="iconify lucide--help-circle size-4.5"></span>
                                            <span>Support</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="text-error hover:bg-error/10" href="#">
                                            <span class="iconify lucide--log-out size-4.5"></span>
                                            <span>Sign Out</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div
                                class="rounded-box from-primary to-secondary text-primary-content m-4 mt-auto flex cursor-pointer flex-col items-center justify-center bg-linear-to-br p-4 text-center transition-all hover:opacity-95 sm:p-6">
                                <div
                                    class="bg-primary-content/10 border-primary-content/10 flex items-center justify-center rounded-full border p-1.5 sm:p-2.5">
                                    <span class="iconify lucide--zap size-5 sm:size-6"></span>
                                </div>
                                <p
                                    class="mt-2 font-mono text-[11px] font-medium tracking-wider uppercase opacity-70 sm:mt-4">
                                    Upgrade your plan
                                </p>
                                <p class="mt-1 leading-none font-medium sm:text-lg">
                                    Save
                                    <span class="font-semibold underline">30%</span>
                                    today
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex items-center justify-between px-3 gap-3 relative">
        <ul class="menu menu-horizontal">
            <li>
                <div class="flex items-center gap-3">
                    <span class=""></span>
                    <span class="grow">Home</span>
                </div>
            </li>
            {% for _menu_item in global.main_menu %}
            {% assign _menu_children = _menu_item.menu %}
            <li
                class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active  {%- endif -%} {%- endfor -%}">
                <div class="flex items-center gap-3">
                    {% if _menu_item.icon_class != '' %}
                    <span class="{{_menu_item.icon_class}}"></span>
                    {% endif %}
                    <span class="grow">{{ _menu_item.name }}</span>
                </div>
                <ul class="p-2 submenu">
                    {% for _item in _menu_children %}
                    <li class="{% if _item.url == global.url %} active  {% endif %}"><a href="{{ _item.url }}"
                            style="white-space: nowrap">{{ _item.name }}</a></li>
                    {% endfor %}
                </ul>
            </li>
            {% endfor %}
        </ul>


    </div>
</div>
