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

RetroSidebarНавигация

Отзывчивый, простой ретро/винтажный пастельный компонент навигации на боковой панели для бизнес/корпоративных веб-сайтов с поддержкой темного режима.

Предварительный просмотр

HTML-код

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

Связанные компоненты

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

Простая, отзывчивая навигация по боковой панели для приложений социальных сетей, оптимизированная для темного режима с аналогичной цветовой схемой. Он включает в себя раздел профиля с аватаром и именем пользователя, а также навигационные ссылки. Дизайн использует Tailwind CSS для стилизации и отзывчивости, включая поддержку темного режима через встроенный префикс Tailwind dark:.

Открытый