Компонент навигации на боковой панели

<div class="flex h-screen bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <!-- Sidebar -->
  <div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-xl transform transition-transform duration-300 md:relative md:translate-x-0 overflow-y-auto z-40"
       x-data="{ open: false }"
       @keydown.escape.window="open = false"
       :class="{'translate-x-0 ease-out': open, '-translate-x-full ease-in': !open}">

    <!-- Sidebar Header -->
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
      <a href="#" class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-yellow-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-2xl font-bold tracking-wider">Dashboard</span>
      </a>
      <button class="md:hidden focus:outline-none" @click="open = false">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Sidebar Navigation Links -->
    <nav class="mt-6">
      <ul>
        <li class="relative px-6 py-3">
          <span class="absolute inset-y-0 left-0 w-1 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-tr-lg rounded-br-lg" aria-hidden="true"></span>
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out text-blue-600 dark:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6-4h4" />
            </svg>
            <span>Overview</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            <span>Analytics</span>
          </a>
        </li>

        <li class="relative px-6 py-3" x-data="{ open: false }">
          <button @click="open = !open" class="inline-flex items-center justify-between w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
            <span class="inline-flex items-center">
              <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1.414M14 9l2 2m0 0l2-2m-2-2v4m-6 3H6m6 0h.01M6 15h2m-2 2h2m0 0h.01M10 20v-6a2 2 0 012-2h.01M12 9l2-2m0 0l2 2m-2-2v4m-3 10V6a2 2 0 012-2h2a2 2 0 012 2v14M8 5a2 2 0 012-2h2a2 2 0 012 2v14" />
              </svg>
              <span>Reports</span>
            </span>
            <svg class="h-4 w-4 transform transition-transform duration-200" :class="{'rotate-90': open}" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <ul x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="p-2 mt-2 space-y-2 overflow-hidden text-sm font-medium text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner">
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Daily Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Weekly Reports</a>
            </li>
            <li class="px-2 py-1 transition-colors duration-150 hover:text-blue-600 dark:hover:text-blue-300">
              <a class="w-full" href="#">Monthly Reports</a>
            </li>
          </ul>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354l.707-.707A4 4 0 0117 4.5v16.146a.5.5 0 01-.854.354L12 18.5l-4.146 2.5A.5.5 0 017 20.646V4.5a4 4 0 013.293-3.854L12 4.354z" />
            </svg>
            <span>Projects</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2V7a4 4 0 00-4-4H7a4 4 0 00-4 4v10a2 2 0 002 2h4m3 0l-3 3v-3m0 0h8m-10 6L9 14l5-5 5 5" />
            </svg>
            <span>Tasks</span>
          </a>
        </li>

        <li class="relative px-6 py-3">
          <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-200 ease-in-out hover:text-blue-600 dark:hover:text-blue-400" href="#">
            <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <span>Users</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Sidebar Footer (User Info) -->
    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full object-cover ring-2 ring-blue-500 dark:ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
          </div>
        </div>
        <button class="p-2 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md transition-colors duration-200 hover:text-red-600 dark:hover:text-red-400">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
          </svg>
        </button>
      </div>
    </div>

  </div>

  <!-- Overlay for mobile when sidebar is open -->
  <div class="fixed inset-0 bg-black opacity-50 z-30 md:hidden" x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-50" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-50" x-transition:leave-end="opacity-0" @click="open = false"></div>

  <!-- Main Content Area -->
  <div class="flex-1 flex flex-col overflow-hidden">

    <!-- Top Bar / Navbar -->
    <header class="flex justify-between items-center px-6 py-4 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-20">
      <div class="flex items-center">
        <button class="md:hidden text-gray-500 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100 dark:text-gray-400" @click="open = true">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <h1 class="ml-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">Overview</h1>
      </div>

      <div class="flex items-center space-x-4">
        <!-- Search Bar -->
        <div class="relative hidden md:block">
          <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
              <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
          <input class="block w-full rounded-md border-gray-300 pl-10 pr-4 py-2 text-gray-900 placeholder-gray-500 ring-1 ring-gray-300 dark:ring-gray-600 focus:border-blue-500 focus:ring-blue-500 sm:text-sm bg-gray-100 dark:bg-gray-700 dark:text-gray-100" placeholder="Search..." type="search">
        </div>

        <!-- Settings Dropdown -->
        <div class="relative" x-data="{ open: false }">
          <button @click="open = !open" class="flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:text-gray-900 transition-colors duration-200">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </button>
          <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md shadow-lg py-1 z-50">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Logout</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.288a1 1 0 00.757 1.637l.95-.316A1 1 0 0018 15v-1a1 1 0 00-.757-.966l-.95-.316a1 1 0 00-.671 1.344zM16 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zm-4.288 4.459a1 1 0 00-1.637.757l-.316.95A1 1 0 0010 18h1a1 1 0 00.966-.757l.316-.95a1 1 0 00-1.344-.671zM10.5 16a.5.5 0 01-.5.5v1a.5.5 0 011 0v-1a.5.5 0 01-.5-.5zM5.712 14.459a1 1 0 00-.757-1.637l-.95.316A1 1 0 002 15v1a1 1 0 00.757.966l.95.316a1 1 0 00.671-1.344zM4 10.5a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM5.712 5.541a1 1 0 00.757-1.637l.95.316A1 1 0 008 3V2a1 1 0 00-.757-.966l-.95-.316A1 1 0 005.712 5.541zM10.5 4a.5.5 0 01-.5.5v1a.5.5 0 011 0V4a.5.5 0 01-.5-.5zm4.288 5.541a1 1 0 00-1.637-.757l-.316-.95A1 1 0 0010 2h-1a1 1 0 00-.966.757l-.316.95a1 1 0 001.344.671z"></path></svg>
        </button>

      </div>
    </header>

    <!-- Main Content Body (Placeholder) -->
    <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-50 dark:bg-gray-900 p-6">
      <div class="container mx-auto">
        <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Welcome to your Dashboard!</h2>
        <p class="text-gray-700 dark:text-gray-300">This is a placeholder for your dashboard content. You can add charts, data tables, and other widgets here.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
          <!-- Card 1 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Total Sales</h3>
              <div class="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Monthly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,345</p>
            <p class="text-sm text-green-600 dark:text-green-400"><svg class="inline-block w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 5.2% since last month</p>
          </div>

          <!-- Card 2 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Users</h3>
              <div class="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Weekly</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">875</p>
            <p class="text-sm text-red-600 dark:text-red-400"><svg class="inline-block w-4 h-4 mr-1 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg> 1.8% since last week</p>
          </div>

          <!-- Card 3 -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Orders Pending</h3>
              <div class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2.5 py-0.5 rounded-full">Today</div>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">23</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Needs attention</p>
          </div>
        </div>

        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Recent Activity</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">Sarah G.</span> added a new project "Website Redesign".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">You</span> updated task "Fix Login Bug".</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
            </li>
            <li class="py-3 flex items-center justify-between">
              <p class="text-gray-800 dark:text-gray-200"><span class="font-medium">System</span> generated new sales report.</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 days ago</span>
            </li>
          </ul>
        </div>

      </div>
    </main>
  </div>
</div>

<!-- Alpine.js for dropdowns and sidebar toggle -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

<!-- Dark Mode Script -->
<script>
  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

  // Change the icons inside the button based on previous settings
  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
  } else {
    themeToggleDarkIcon.classList.remove('hidden');
  }

  const themeToggleBtn = document.getElementById('theme-toggle');

  themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
      if (localStorage.getItem('color-theme') === 'light') {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      } else {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      }

      // if NOT set via local storage previously
    } else {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('color-theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('color-theme', 'dark');
      }
    }
  });
</script>