@php
    $sidebarLogo = \App\Http\Helpers\SettingHelper::get('sidebar_logo', 'dynaweb4/img/logo.png');
    $sidebarLogoUrl = str_starts_with($sidebarLogo, 'dynaweb4/') ? asset($sidebarLogo) : Storage::url($sidebarLogo);
    $sidebarBgColor = \App\Http\Helpers\SettingHelper::get('sidebar_bg_color', '#ffffff');
    $sidebarBgColorDark = \App\Http\Helpers\SettingHelper::get('sidebar_bg_color_dark', '#111827');
    $sidebarTextColor = \App\Http\Helpers\SettingHelper::get('sidebar_text_color', '#374151');
    $sidebarTextColorDark = \App\Http\Helpers\SettingHelper::get('sidebar_text_color_dark', '#d1d5db');
    $sidebarActiveBgColor = \App\Http\Helpers\SettingHelper::get('sidebar_active_bg_color', '#eff6ff');
    $sidebarActiveBgColorDark = \App\Http\Helpers\SettingHelper::get('sidebar_active_bg_color_dark', '#1f2937');
    $sidebarActiveTextColor = \App\Http\Helpers\SettingHelper::get('sidebar_active_text_color', '#0ea5e9');
    $sidebarActiveTextColorDark = \App\Http\Helpers\SettingHelper::get('sidebar_active_text_color_dark', '#38bdf8');
@endphp

<style>
    :root {
        --sidebar-bg-light: {{ $sidebarBgColor }};
        --sidebar-bg-dark: {{ $sidebarBgColorDark }};
    }
    .sidebar-dynamic-bg {
        background-color: {{ $sidebarBgColor }} !important;
    }
    .dark .sidebar-dynamic-bg {
        background-color: {{ $sidebarBgColorDark }} !important;
    }
    .sidebar-dynamic-bg .menu-item-inactive,
    .sidebar-dynamic-bg .menu-dropdown-item-inactive {
        color: {{ $sidebarTextColor }};
    }
    .sidebar-dynamic-bg .menu-item-icon-inactive {
        fill: {{ $sidebarTextColor }};
    }
    .sidebar-dynamic-bg .menu-item-arrow-inactive {
        stroke: {{ $sidebarTextColor }};
    }
    .dark .sidebar-dynamic-bg .menu-item-inactive,
    .dark .sidebar-dynamic-bg .menu-dropdown-item-inactive {
        color: {{ $sidebarTextColorDark }};
    }
    .dark .sidebar-dynamic-bg .menu-item-icon-inactive {
        fill: {{ $sidebarTextColorDark }};
    }
    .dark .sidebar-dynamic-bg .menu-item-arrow-inactive {
        stroke: {{ $sidebarTextColorDark }};
    }
    .sidebar-dynamic-bg .menu-item-active,
    .sidebar-dynamic-bg .menu-dropdown-item-active {
        background-color: {{ $sidebarActiveBgColor }};
        color: {{ $sidebarActiveTextColor }};
    }
    .sidebar-dynamic-bg .menu-item-icon-active {
        fill: {{ $sidebarActiveTextColor }};
    }
    .sidebar-dynamic-bg .menu-item-arrow-active {
        stroke: {{ $sidebarActiveTextColor }};
    }
    .dark .sidebar-dynamic-bg .menu-item-active,
    .dark .sidebar-dynamic-bg .menu-dropdown-item-active {
        background-color: {{ $sidebarActiveBgColorDark }};
        color: {{ $sidebarActiveTextColorDark }};
    }
    .dark .sidebar-dynamic-bg .menu-item-icon-active {
        fill: {{ $sidebarActiveTextColorDark }};
    }
    .dark .sidebar-dynamic-bg .menu-item-arrow-active {
        stroke: {{ $sidebarActiveTextColorDark }};
    }
</style>

<aside :class="sidebarToggle ? 'translate-x-0 lg:w-[90px]' : '-translate-x-full'"
    class="sidebar sidebar-dynamic-bg fixed left-0 top-0 z-9999 flex h-screen w-[290px] flex-col overflow-y-hidden border-r border-gray-200 px-5 dark:border-gray-800 lg:static lg:translate-x-0">
    <!-- SIDEBAR HEADER -->
    <div :class="sidebarToggle ? 'justify-center' : 'justify-between'"
        class="flex items-center gap-2 pt-8 sidebar-header pb-7">
        <a href="#">
            <span class="logo" :class="sidebarToggle ? 'hidden' : ''">
                <img class="dark:hidden" src="{{ $sidebarLogoUrl }}" alt="Logo" />
                <img class="hidden dark:block" src="{{ $sidebarLogoUrl }}" alt="Logo" />
            </span>
        </a>
    </div>
    <!-- SIDEBAR HEADER -->

    <div class="flex flex-col overflow-y-auto duration-300 ease-linear no-scrollbar">
        <!-- Sidebar Menu -->
        <nav x-data="{
                selected:
                    @js(
request()->routeIs('backend-user.*') || request()->routeIs('backend-menu.*') || request()->routeIs('activity-log.*') || request()->routeIs('ref.*') || request()->routeIs('roles.*') || request()->routeIs('permissions.*') || request()->routeIs('auto-permissions.*') || request()->routeIs('routes.*') || request()->routeIs('setting.*')
                        ? 'Backend'
                        : (request()->routeIs('frontend-user.*') || request()->routeIs('file-manager.*') || request()->routeIs('frontend-menu.*') || request()->routeIs('menu-category.*') || request()->routeIs('frontend-site.*')
                            ? 'Frontend'
                            : (request()->routeIs('content-application.*') || request()->routeIs('content-article.*') || request()->routeIs('content-download.*') || request()->routeIs('content-slider.*') || request()->routeIs('content-image.*') || request()->routeIs('content-video.*') || request()->routeIs('content-photo-gallery.*') || request()->routeIs('content-photo-list.*') || request()->routeIs('content-feedback.*')
                                ? 'Content'
                                : ''))
                    )
            }">

            <!-- Menu Group -->
            <div>

                @php($dynamicMenus = \App\Http\Helpers\MenuHelper::getMenu())

                <ul class="flex flex-col gap-4 mb-6">



                    @if (!empty($dynamicMenus))
                        @include('backend.layouts.partials.sidebar-dynamic-items', ['items' => $dynamicMenus, 'level' => 0])
                    @else

                    <!-- Menu Item Backend (Main) -->
                    @canany(['backend-user.view', 'backend-menu.view', 'activity-log.view', 'ref.view', 'role.view', 'permission.view', 'route.view'])
                                    <li>
                                        <a href="#" @click.prevent="selected = (selected === 'Backend' ? '' : 'Backend')" class="menu-item group
{{ request()->routeIs('backend-user.*') || request()->routeIs('backend-menu.*') || request()->routeIs('activity-log.*') || request()->routeIs('ref.*') || request()->routeIs('roles.*') || request()->routeIs('permissions.*') || request()->routeIs('auto-permissions.*') || request()->routeIs('routes.*') || request()->routeIs('setting.*')
                         ? 'menu-item-active'
                         : 'menu-item-inactive' }}">

                                            <!-- Book Stack Icon for Backend -->
                                             <svg class="{{ request()->routeIs('backend-user.*') || request()->routeIs('backend-menu.*') || request()->routeIs('activity-log.*') || request()->routeIs('ref.*') || request()->routeIs('roles.*') || request()->routeIs('permissions.*') || request()->routeIs('auto-permissions.*') || request()->routeIs('routes.*') || request()->routeIs('setting.*')
                         ? 'menu-item-icon-active'
                        : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM7 6C6.44772 6 6 6.44772 6 7V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V7C18 6.44772 17.5523 6 17 6H7ZM8 12V8H16V12H8ZM8 14H16V16H8V14Z"
                                                    fill="currentColor" />
                                            </svg>

                                            <span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
                                                Backend
                                            </span>

                                            <svg class="menu-item-arrow"
                                                :class="[
                                                                                                                                                                        (selected === 'Backend')
                                                                                                                                                                            ? 'menu-item-arrow-active'
                                                                                                                                                                            : 'menu-item-arrow-inactive',
                                                                                                                                                                        sidebarToggle ? 'lg:hidden' : ''
                                                                                                                                                                    ]"
                                                width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585" stroke="currentColor"
                                                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </a>

                                        <!-- Dropdown Menu Start -->
                                        <div class="overflow-hidden transform translate"
                                            :class="(selected === 'Backend') ? 'block' : 'hidden'">

                                            <ul :class="sidebarToggle ? 'lg:hidden' : 'flex'"
                                                class="flex flex-col gap-1 mt-2 menu-dropdown pl-9">

                                                <!-- Activity Log -->
                                                @can('activity-log.view')
                                                                        <li>
                                                                            <a href="{{ route('activity-log.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                                        {{ request()->routeIs('activity-log.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                Activity Log
                                                                            </a>
                                                                        </li>
                                                @endcan

{{-- Parameters (removed - using dynamic menu) --}}

                                                <!-- Roles & Permissions -->
                                                @canany(['role.view', 'permission.view'])
                                                                        <li class="relative" x-data="{ submenuOpen: false }">
                                                                            <a href="#" @click.prevent="submenuOpen = !submenuOpen" class="menu-dropdown-item group flex items-center justify-between w-full
                                                                                                                                                                                                                                                                                                                                                                         {{ request()->routeIs('roles.*') || request()->routeIs('permissions.*') || request()->routeIs('auto-permissions.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                <!-- <span>Roles & Permissions</span> -->
                                                                                <span>Roles & Permissions</span>
                                                                                <svg class="w-4 h-4 transition-transform"
                                                                                    :class="submenuOpen ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="none">
                                                                                    <path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.5"
                                                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                                                </svg>
                                                                            </a>

                                                                            <!-- Sub-submenu -->
                                                                            <div x-show="submenuOpen" x-collapse class="ml-4 mt-1 space-y-1 overflow-hidden">
                                                                                @can('role.view')
                                                                                                            <a href="{{ route('roles.index') }}" class="menu-dropdown-item block py-1.5 px-3 text-sm rounded-md
                                                                                                                                                                                                                                                                                                                                                                                                                                                            {{ request()->routeIs('roles.*')
                                                                                    ? 'menu-dropdown-item-active'
                                                                                    : 'menu-dropdown-item-inactive' }}">
                                                                                                                Roles
                                                                                                            </a>
                                                                                @endcan
                                                                                @can('permission.view')
                                                                                                            <a href="{{ route('permissions.index') }}" class="menu-dropdown-item block py-1.5 px-3 text-sm rounded-md
                                                                                                                                                                                                                                                                                                                                                                                                                                                             {{ request()->routeIs('permissions.*')
                                                                                    ? 'menu-dropdown-item-active'
                                                                                    : 'menu-dropdown-item-inactive' }}">
                                                                                                                Permissions
                                                                                                            </a>
                                                                                @endcan
                                                                                @can('permission.create')
                                                                                                            <a href="{{ route('auto-permissions.index') }}" class="menu-dropdown-item block py-1.5 px-3 text-sm rounded-md
                                                                                                                                                                                                                                                                                                                                                                                                                                                             {{ request()->routeIs('auto-permissions.*')
                                                                                    ? 'menu-dropdown-item-active'
                                                                                    : 'menu-dropdown-item-inactive' }}">
                                                                                                                Auto Permissions
                                                                                                            </a>
                                                                                @endcan
                                                                            </div>
                                                                        </li>
                                                @endcanany

                                                <!-- Backend Menu -->
                                                @can('backend-menu.view')
                                                                        <li>
                                                                            <a href="{{ route('backend-menu.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                                          {{ request()->routeIs('backend-menu.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                 Menu
                                                                             </a>
                                                                         </li>

                                                                         <li>
                                                                             <a href="{{ route('backend-menu.assign') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                                           {{ request()->routeIs('backend-menu.assign')
                                                     ? 'menu-dropdown-item-active'
                                                     : 'menu-dropdown-item-inactive' }}">

                                                                                 Assign Menu
                                                                            </a>
                                                                        </li>
                                                @endcan

                                                <!-- Backend User -->
                                @can('backend-user.view')
                                                                        <li>
                                                                             <a href="{{ route('backend-user.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                                         {{ request()->routeIs('backend-user.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                   User
                                                                              </a>
                                                                          </li>
                                                                          @endcan

                                                                          <!-- Settings -->
                                                                          @can('setting.view')
                                                                          <li>
                                                                              <a href="{{ route('setting.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                                         {{ request()->routeIs('setting.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">
                                                                                  Settings
                                                                              </a>
                                                                          </li>
                                                                          @endcan
                                                                              </ul>
                                        </div>
                                        <!-- Dropdown Menu End -->
                                    </li>
                    @endcanany
                    <!-- Menu Item Backend -->

                    <!-- Menu Item Frontend (Main) -->
                     @canany(['frontend-user.view', 'file.view', 'frontend-menu.view', 'menu-category.view', 'frontend-site.view'])
                                    <li>
                                        <a href="#" @click.prevent="selected = (selected === 'Frontend' ? '' : 'Frontend')" class="menu-item group
{{ request()->routeIs('frontend-user.*') || request()->routeIs('file-manager.*') || request()->routeIs('frontend-menu.*') || request()->routeIs('menu-category.*') || request()->routeIs('frontend-site.*')
                         ? 'menu-item-active'
                         : 'menu-item-inactive' }}">

                                            <!-- Globe Icon for Frontend -->
<svg class="{{ request()->routeIs('frontend-user.*') || request()->routeIs('file-manager.*') || request()->routeIs('frontend-menu.*') || request()->routeIs('menu-category.*') || request()->routeIs('frontend-site.*')
                         ? 'menu-item-icon-active'
                        : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                    d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 13.2 4.3 14.3 4.8 15.3C5.5 13.9 6.8 12.9 8.4 12.5C8.1 11.9 8 11.2 8 10.5C8 9.1 8.9 7.9 10.2 7.5C9.8 7 9.6 6.5 9.5 5.9C7.5 6.8 6 8.8 6 11C6 11.3 6 11.7 6.1 12C5.2 12.5 4.5 13.2 4 14.1C4 13.4 4 12.7 4 12ZM12 20C13.3 20 14.5 19.6 15.5 18.9C15.4 18.3 15 17.7 14.2 17.4C13.5 17.1 12.6 17 11.6 17.3C10.4 17.6 9.6 18.5 9.4 19.5C10.2 19.8 11.1 20 12 20ZM12 4C9.4 4 7.1 5.4 5.7 7.5C6.2 7.9 7 8.2 7.9 8C8.6 7.8 9.1 7.1 9.2 6.3C9.3 5.6 9 5 8.6 4.6C9.7 4.2 10.8 4 12 4ZM15.2 5.1C15.3 5.5 15.4 6 15.4 6.5C15.4 7.6 14.9 8.6 14 9.2C13.7 9.4 13.4 9.7 13.2 10.1C12.9 10.7 13 11.4 13.5 11.9C13.9 12.3 14.5 12.4 15.1 12.3C16.2 12.1 17.3 12.8 17.8 13.8C18.3 13 18.6 12.1 18.8 11.1C19 10.1 19 9 18.9 8C17.9 6.5 16.2 5.5 14.4 5.1C14.6 5.1 14.9 5.1 15.2 5.1ZM12 14C10.4 14 9.1 15.1 8.8 16.6C9 16.4 9.4 16.2 9.9 16.1C10.8 15.9 11.8 16 12.6 16.4C13.3 16.7 13.8 17.2 14 17.9C15.2 17 16 15.6 16 14C16 13.9 16 13.7 16 13.6C15.6 13.2 15 13 14.4 13.1C13.5 13.3 12.7 13.6 12 14Z"
                                                    fill="currentColor" />
                                            </svg>

                                            <span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
                                                Frontend
                                            </span>

                                            <svg class="menu-item-arrow"
                                                :class="[
                                                                                                                                                        (selected === 'Frontend')
                                                                                                                                                            ? 'menu-item-arrow-active'
                                                                                                                                                            : 'menu-item-arrow-inactive',
                                                                                                                                                        sidebarToggle ? 'lg:hidden' : ''
                                                                                                                                                    ]"
                                                width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585" stroke="currentColor"
                                                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </a>

                                        <!-- Dropdown Menu Start -->
                                        <div class="overflow-hidden transform translate"
                                            :class="(selected === 'Frontend') ? 'block' : 'hidden'">

                                            <ul :class="sidebarToggle ? 'lg:hidden' : 'flex'"
                                                class="flex flex-col gap-1 mt-2 menu-dropdown pl-9">

                                                <!-- Frontend User -->
                                                @can('frontend-user.view')
                                                                        <li>
                                                                             <a href="{{ route('frontend-user.index') }}" class="menu-dropdown-item group {{ request()->routeIs('frontend-user.*') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                                                  User
                                                                             </a>
                                                                         </li>
                                                @endcan

                                                <!-- Assets (File Manager) -->
                                                @can('file.view')
                                                                        <li>
                                                                             <a href="{{ route('file-manager.index') }}" class="menu-dropdown-item group {{ request()->routeIs('file-manager.*') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                                                 Assets
                                                                             </a>
                                                                         </li>
                                                @endcan

                                                <!-- Sites -->
                                                <li>
                                                    <a href="{{ route('frontend-site.sites.index') }}" class="menu-dropdown-item group {{ request()->routeIs('frontend-site.sites.*') || request()->routeIs('frontend-site.pages.*') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                        Sites
                                                    </a>
                                                </li>

                                                <!-- Components -->
                                                <li>
                                                    <a href="{{ route('frontend-site.components.index') }}" class="menu-dropdown-item group {{ request()->routeIs('frontend-site.components.*') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                        Components
                                                    </a>
                                                </li>

                                                <!-- Menu & Assign Menu -->
                                                @can('frontend-menu.view')
                                                                        <li>
                                                                             <a href="{{ route('frontend-menu.index') }}" class="menu-dropdown-item group {{ request()->routeIs('frontend-menu.index') || request()->routeIs('frontend-menu.create') || request()->routeIs('frontend-menu.edit') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                                                  Menu
                                                                             </a>
                                                                         </li>
                                                                         <li>
                                                                             <a href="{{ route('frontend-menu.assign') }}" class="menu-dropdown-item group {{ request()->routeIs('frontend-menu.assign') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                                                  Assign Menu
                                                                             </a>
                                                                         </li>
                                                @endcan

                                            </ul>
                                        </div>
                                        <!-- Dropdown Menu End -->
                                    </li>
                     @endcanany
                     <!-- Menu Item Frontend -->

                    <!-- Menu Item Content Management -->
                    @canany(['content-application.view', 'content-article.view', 'content-download.view', 'content-slider.view', 'content-image.view', 'content-video.view', 'content-photo-gallery.view', 'content-feedback.view'])
                                    <li>
                                        <a href="#" @click.prevent="selected = (selected === 'Content' ? '' : 'Content')" class="menu-item group
                   {{ request()->routeIs('content-application.*') || request()->routeIs('content-article.*') || request()->routeIs('content-download.*') || request()->routeIs('content-slider.*') || request()->routeIs('content-image.*') || request()->routeIs('content-video.*') || request()->routeIs('content-photo-gallery.*') || request()->routeIs('content-photo-list.*') || request()->routeIs('content-feedback.*')
                        ? 'menu-item-active'
                        : 'menu-item-inactive' }}">
 
                                             <svg class="{{ request()->routeIs('content-application.*') || request()->routeIs('content-article.*') || request()->routeIs('content-download.*') || request()->routeIs('content-slider.*') || request()->routeIs('content-image.*') || request()->routeIs('content-video.*') || request()->routeIs('content-photo-gallery.*') || request()->routeIs('content-photo-list.*') || request()->routeIs('content-feedback.*')
                        ? 'menu-item-icon-active'
                        : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M4 5C4 4.44772 4.44772 4 5 4H9.58579C9.851 4 10.1054 4.10536 10.2929 4.29289L12 6H19C19.5523 6 20 6.44772 20 7V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z"
                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                    stroke-linejoin="round" fill="none" />
                                                <path d="M4 10H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                            </svg>

                                            <span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
                                                Content
                                            </span>

                                            <svg class="menu-item-arrow"
                                                :class="[
                                                                                                                                                        (selected === 'Content')
                                                                                                                                                            ? 'menu-item-arrow-active'
                                                                                                                                                            : 'menu-item-arrow-inactive',
                                                                                                                                                        sidebarToggle ? 'lg:hidden' : ''
                                                                                                                                                    ]"
                                                width="20" height="20" viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">

                                                <path d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585" stroke="currentColor"
                                                    stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </a>

                                        <!-- Dropdown Menu Start -->
                                        <div class="overflow-hidden transform translate"
                                            :class="(selected === 'Content') ? 'block' : 'hidden'">

                                            <ul :class="sidebarToggle ? 'lg:hidden' : 'flex'"
                                                class="flex flex-col gap-1 mt-2 menu-dropdown pl-9">

                                                @can('content-article.view')
                                                                        <li>
                                                                            <a href="{{ route('content-article.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                          {{ request()->routeIs('content-article.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                Articles
                                                                            </a>
                                                                        </li>
                                                @endcan

                                                @can('content-application.view')
                                                                        <li>
                                                                            <a href="{{ route('content-application.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                         {{ request()->routeIs('content-application.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                Links
                                                                            </a>
                                                                        </li>
                                                @endcan

                                                @can('content-download.view')
                                                                        <li>
                                                                             <a href="{{ route('content-download.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                          {{ request()->routeIs('content-download.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                 Documents
                                                                             </a>
                                                                         </li>
                                                @endcan

                                                @can('content-photo-gallery.view')
                                                                        <li>
                                                                             <a href="{{ route('content-photo-gallery.index') }}" class="menu-dropdown-item group {{ request()->routeIs('content-photo-gallery.*') ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }}">
                                                                                  Photo Galleries
                                                                             </a>
                                                                         </li>
                                                @endcan

                                                @can('content-slider.view')
                                                                        <li>
                                                                            <a href="{{ route('content-slider.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                           {{ request()->routeIs('content-slider.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                Slider Images
                                                                            </a>
                                                                        </li>
                                                @endcan

                                                @can('content-image.view')
                                                                        <li>
                                                                            <a href="{{ route('content-image.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                           {{ request()->routeIs('content-image.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                Images
                                                                            </a>
                                                                        </li>
                                                @endcan

                                                @can('content-video.view')
                                                                        <li>
                                                                            <a href="{{ route('content-video.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                             {{ request()->routeIs('content-video.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                 Videos
                                                                             </a>
                                                                         </li>
                                                @endcan

                                                @can('content-feedback.view')
                                                                        <li>
                                                                             <a href="{{ route('content-feedback.index') }}" class="menu-dropdown-item group
                                                                                                                                                                                                                                                                                                                                            {{ request()->routeIs('content-feedback.*')
                                                    ? 'menu-dropdown-item-active'
                                                    : 'menu-dropdown-item-inactive' }}">

                                                                                 Feedback
                                                                             </a>
                                                                         </li>
                                                @endcan

                                            </ul>
                                        </div>
                                        <!-- Dropdown Menu End -->
                                    </li>
                    @endcanany
                    <!-- Menu Item Content Management -->
                    @endif
                     
                </ul>
            </div>
        </nav>
        <!-- Sidebar Menu -->
    </div>
</aside>