Боковая панель Glassmorphism с темным режимом
Отзывчивый компонент боковой панели с дизайном glassmorphism и поддержкой темного режима с использованием Tailwind CSS. Он включает в себя логотип, название сайта, навигационные ссылки и раздел профиля пользователя.
HTML-код
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Glassmorphism Sidebar -->
<div class="flex flex-col w-64 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg shadow-xl dark:shadow-2xl">
<div class="flex items-center justify-center h-16">
<!-- Logo and Site Name -->
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-white text-lg font-semibold">AppName</span>
</div>
<div class="flex flex-col flex-1 overflow-y-auto">
<nav class="flex-1 px-2 py-4">
<!-- Navigation Links -->
<a href="#" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" 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 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-7 7h7"></path>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.646A17.938 17.938 0 015 10H4c0 2.761 3.582 5 8 5s8-2.239 8-5h-1c-7.033 0-10.95.51-11.297 1.702l-.155.595A1.99 1.99 0 015 15l-.155.595A1.99 1.99 0 008 19.646z"></path>
</svg>
Users
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 7v-4"></path>
</svg>
Products
</a>
<a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.175-.956 3.402-.956C15.463 3.361 17.5 5.252 17.5 7.5c0 2.249-2.037 4.138-4.275 4.138C11.215 11.638 10 10.457 10 8.952c0-1.486 1.184-2.652 2.618-2.652a4.06 4.06 0 013.162 1.4zM2.875 18.25h-.32C1.918 18.25 2 18.11 2 17.75c0-1.376 2.13-2.875 4.95-2.875 1.678 0 3.074.406 3.99-.94.791-1.223 2.093-1.844 3.455-1.844A5.42 5.42 0 0120.5 15.25c0 2.892-4.243 5.25-9.25 5.25-3.095 0-5.732-.919-7.166-2.42l-.224-.224z"></path>
</svg>
Settings
</a>
</nav>
</div>
<!-- User Profile Section -->
<div class="flex items-center p-4 border-t border-gray-300 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 mr-3">
<div class="flex flex-col">
<span class="text-gray-800 dark:text-white text-sm font-semibold">John Doe</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</span>
</div>
</div>
</div>
<!-- Main Content (optional - for demonstration) -->
<div class="flex flex-col flex-1 p-4 overflow-y-auto">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
<p class="mt-4 text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is positioned to the left.</p>
</div>
</div>Связанные компоненты
Компонент боковой панели
Простой, отзывчивый компонент боковой панели с брутальным дизайном, монохромной цветовой схемой и поддержкой темного режима.
Компонент боковой панели
Адаптивный компонент боковой панели, разработанный с эффектом стекломорфизма и дополнительной цветовой схемой, подходит для блога или потребления контента.
Компонент боковой панели
Отзывчивый компонент боковой панели, разработанный в стиле Neumorphism с использованием Tailwind CSS. Он имеет мягкий пользовательский интерфейс с тонкими тенями, поддерживает темный режим и включает в себя замещающие изображения и аватар.