@php
    use Illuminate\Support\Facades\Route;
    $routeName = Route::currentRouteName();
    $sidebar = $dir == 'RTL' ? 'right' : 'left';
    $widgets = $dir == 'RTL' ? 'left' : 'right';
@endphp
<div class="flex justify-between items-center">
    <button type="button" id="SidebarButton" data-drawer-target="sidebar" data-drawer-toggle="sidebar"
            aria-controls="sidebar" data-drawer-placement="{{ $sidebar }}"
            class="inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
        <span class="sr-only">
            Open sidebar
        </span>
        <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg">
            <path clip-rule="evenodd" fill-rule="evenodd"
                  d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z">
            </path>
        </svg>
    </button>
    @if(isset($search) && $search)
        <div class="sm:hidden flex items-center mt-2 space-x-2">
            <input type="search" id="mobile-search" style="margin-left: 35px;"
                   class="block w-3/5 p-2.5 text-sm text-gray-900 border border-gray-300 rounded-full bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   placeholder="Search Registers" onkeyup="Search(this)" data-id="mobile-search" required/>
            <button type="submit"
                    class="flex items-center me-0.5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                    onclick="Search(this)" data-id="mobile-search">
                <i class="bi bi-search"></i>
            </button>
        </div>
    @endif
    @if(auth()->check())
        <button type="button" id="WidgetsButton" data-drawer-target="widgets" data-drawer-toggle="widgets"
                aria-controls="widgets" data-drawer-placement="{{ $widgets }}"
                class="inline-flex items-center p-2 mt-2 me-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-600">
            <span class="sr-only">
                Open widgets
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-person-circle w-6 h-6" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                <path fill-rule="evenodd"
                      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
            </svg>
        </button>
    @endif
</div>
<aside id="sidebar"
       class="fixed max-sm:hidden top-0 start-0 z-50 sm:z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0"
       aria-label="Sidebar">
    <div
        class="h-full px-3 py-4 overflow-y-auto bg-gray-200 dark:bg-gray-800 sm:ms-2 sm:mt-2 sm:rounded">
        <p class="flex items-center justify-center px-2" dir="ltr">
            <style>
                .logo-icon {
                    width: 50px;  /* اندازه واقعی المنت */
                    height: 50px;
                    background-image: url("https://s8.uupload.ir/files/metariom_k1n.png");
                    background-size: 60%;  /* اندازه تصویر درون المنت */
                    background-repeat: no-repeat;
                    background-position: center;
                }
            </style>
        <span class="logo-icon"></span>
        {{--            <img src="{{ config('logos_and_icons.logo_icon') }}" alt="MMCP" class="w-16">--}}
        <span id="brand" class="brand-gradient self-center text-4xl font-semibold whitespace-nowrap">
                {{ config('logos_and_icons.name_min') }}
            </span>
        </p>
        <p class="mt-2 text-sm text-center text-gray-700 dark:text-gray-300">
            {{ __('sidebar.version') }}
            <b>{{ config('logos_and_icons.version', '1.0.0') }}</b> {{ __('sidebar.' . env('STATUS')) }}
        </p>

        <hr class="my-3 border-gray-300 dark:border-gray-700">

        <ul class="space-y-2 font-medium">
            @guest
                <li>
                    <a href="{{ route('login') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'login', $routeName) }} group">
                        <svg
                            class="flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'login', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            Login
                        </span>
                    </a>
                </li>
            @endguest
            @if(auth()->check())
                <li>
                    <a href="{{ route('home.dashboard') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'home.dashboard', $routeName) }} group">
                        <svg
                            class="flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'home.dashboard', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                            viewBox="0 0 22 21">
                            <path
                                d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
                            <path
                                d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
                        </svg>
                        <span class="ms-3">
                            {{ __('sidebar.dashboard') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('projects.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'projects.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-briefcase-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'projects.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5"/>
                            <path
                                d="M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.projects') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('AR.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'AR.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-badge-ar-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'AR.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="m6.031 8.574-.734-2.426h-.052L4.51 8.574h1.52zm3.642-2.641v1.938h1.033c.66 0 1.068-.316 1.068-.95 0-.64-.422-.988-1.05-.988z"/>
                            <path
                                d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm4.265 5.458h2.004L6.739 11H8L5.996 5.001H4.607L2.595 11h1.2zM8.5 5v6h1.173V8.763h1.064L11.787 11h1.327L11.91 8.583C12.455 8.373 13 7.779 13 6.9c0-1.147-.773-1.9-2.105-1.9z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.ar') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('NeuralNetworks.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'NeuralNetworks.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-server flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'NeuralNetworks.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4z"/>
                            <path
                                d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.5 6.5 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8s-3.809-.317-5.208-.876a6.5 6.5 0 0 1-1.458-.79z"/>
                            <path
                                d="M14.667 11.668a6.5 6.5 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.5 6.5 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.NeuralNetwork') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('brokers.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'brokers.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-router-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'brokers.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707"/>
                            <path
                                d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z"/>
                            <path
                                d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86zM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0"/>
                            <path d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.brokers') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('connections.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'connections.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-plugin flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'connections.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                  d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.connections') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('devices.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'devices.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-cpu-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'devices.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
                            <path
                                d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.devices') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('templates.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'templates.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-grid-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'templates.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.templates') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('ensembles.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'ensembles.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-collection-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'ensembles.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3m2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.ensembles') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('forms.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'forms.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-file-earmark-code-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'forms.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.646 7.646a.5.5 0 1 1 .708.708L5.707 10l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 10 8.646 8.354a.5.5 0 1 1 .708-.708"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.forms') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('cities.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'cities.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-map-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'cities.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                  d="M16 .5a.5.5 0 0 0-.598-.49L10.5.99 5.598.01a.5.5 0 0 0-.196 0l-5 1A.5.5 0 0 0 0 1.5v14a.5.5 0 0 0 .598.49l4.902-.98 4.902.98a.5.5 0 0 0 .196 0l5-1A.5.5 0 0 0 16 14.5zM5 14.09V1.11l.5-.1.5.1v12.98l-.402-.08a.5.5 0 0 0-.196 0zm5 .8V1.91l.402.08a.5.5 0 0 0 .196 0L11 1.91v12.98l-.5.1z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.cities') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('notifications.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'notifications.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-bell-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'notifications.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.notifications') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('tasks.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'tasks.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-calendar-day-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'tasks.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16zm-4.785-6.145a.428.428 0 1 0 0-.855.426.426 0 0 0-.43.43c0 .238.192.425.43.425m.336.563h-.672v4.105h.672zm-6.867 4.105v-2.3h2.261v-.61H4.684V7.801h2.464v-.61H4v5.332zm3.296 0h.676V9.98c0-.554.227-1.007.953-1.007.125 0 .258.004.329.015v-.613a2 2 0 0 0-.254-.02c-.582 0-.891.32-1.012.567h-.02v-.504H7.98z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.tasks') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('categories.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'categories.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-folder-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'categories.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3m-8.322.12q.322-.119.684-.12h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.categories') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('translations.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'translations.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-translate flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'translations.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
                            <path
                                d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.translations') }}
                        </span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('topics.index') }}"
                       class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'topics.index', $routeName) }} group">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-chat-square-text-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'topics.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path
                                d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.5a1 1 0 0 0-.8.4l-1.9 2.533a1 1 0 0 1-1.6 0L5.3 12.4a1 1 0 0 0-.8-.4H2a2 2 0 0 1-2-2zm3.5 1a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 2.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.topics') }}
                        </span>
                    </a>
                </li>
                <li class="rounded-lg">
                    <p class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 group hover:bg-gray-300 dark:hover:bg-gray-700 hover:cursor-pointer"
                       onclick="ShowHide(this)" data-collapsed="true">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             class="bi bi-person-circle flex-shrink-0 w-5 h-5 text-gray-500 dark:text-gray-400 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                             viewBox="0 0 16 16">
                            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                            <path fill-rule="evenodd"
                                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
                        </svg>
                        <span class="flex-1 ms-3 whitespace-nowrap">
                            {{ __('sidebar.UserManagement') }}
                        </span>
                        <i class="bi bi-chevron-down"></i>
                    </p>
                    <ul class="px-5 py-2 space-y-2 hidden">
                        <li>
                            <a href="{{ route('users.index') }}"
                               class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'users.index', $routeName) }} group">
                                <svg
                                    class="flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'users.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                    viewBox="0 0 20 18">
                                    <path
                                        d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
                                </svg>
                                <span class="flex-1 ms-3 whitespace-nowrap">
                                    {{ __('sidebar.users') }}
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('roles.index') }}"
                               class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ CheckClass('link', 'roles.index', $routeName) }} group">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-person-lines-fill flex-shrink-0 w-5 h-5 {{ CheckClass('svg', 'roles.index', $routeName) }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                                     viewBox="0 0 16 16">
                                    <path
                                        d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/>
                                </svg>
                                <span class="flex-1 ms-3 whitespace-nowrap">
                                    {{ __('sidebar.roles') }}
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('permissions.index') }}"
                               class="flex items-center p-2 text-gray-900 rounded-lg dark:text-gray-100 {{ $routeName == 'permissions.index' ? 'bg-blue-500 hover:bg-blue-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700' }} group">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-shield-lock-fill flex-shrink-0 w-5 h-5 {{ $routeName == 'permissions.index' ? 'text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400' }} transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
                                     viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                          d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5"/>
                                </svg>
                                <span class="flex-1 ms-3 whitespace-nowrap">
                                    {{ __('sidebar.permissions') }}
                                </span>
                            </a>
                        </li>
                    </ul>
                </li>
                <hr class="hidden sm:block my-5 border-gray-300 dark:border-gray-700">
                <li class="hidden sm:block">
                    <form action="{{ route('logout') }}" method="post">
                        @csrf
                        <a class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-red-100 dark:hover:bg-red-700 group">
                            <button type="submit" class="w-full flex items-center">
                                <svg
                                    class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 18 16">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
                                </svg>
                                <span class="ms-3 whitespace-nowrap">
                                    {{ __('sidebar.logout') }}
                                </span>
                            </button>
                        </a>
                    </form>
                </li>
            @endif
        </ul>
    </div>
</aside>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        setTimeout(function () {
            $('#SidebarButton').click().click();
            $('#WidgetsButton').click().click();
            $('#sidebar').removeClass('max-sm:hidden');
            $('#widgets').removeClass('-translate-x-0').removeClass('hidden').addClass('fixed sm:hidden');
        }, 1000);
    });

    function ShowHide(btn) {
        const container = $(btn).parent().find('ul');
        const collapsed = $(btn).data('collapsed');
        const parent = $(btn).parent();
        const icon = parent.find('i');
        if (collapsed) {
            container.removeClass('hidden');
            parent.addClass('bg-gray-300 dark:bg-gray-700');
            icon.removeClass('bi-chevron-down').addClass('bi-chevron-up');
        } else {
            container.addClass('hidden');
            parent.removeClass('bg-gray-300 dark:bg-gray-700');
            icon.removeClass('bi-chevron-up').addClass('bi-chevron-down');
        }
        $(btn).data('collapsed', !collapsed);
    }
</script>