Navigationskomponente in der Seitenleiste
Eine einfache, reaktionsschnelle Seitenleistennavigation für Social-Media-Anwendungen, optimiert für den Dunkelmodus mit einem analogen Farbschema. Es enthält einen Profilbereich mit einem Avatar und einem Benutzernamen sowie Navigationslinks. Das Design verwendet Tailwind CSS für das Styling und die Reaktionsfähigkeit und bietet Unterstützung für den Dunkelmodus über das integrierte dark:-Präfix von Tailwind.
HTML-Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar for Social Media -->
<div class="flex flex-col w-64 bg-gray-800 dark:bg-gray-950 text-white shadow-lg">
<div class="flex items-center justify-center h-20 shadow-md">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
<span class="ml-2 text-lg font-semibold text-purple-300 dark:text-purple-500">SocialNet</span>
</div>
<nav class="flex-1 px-2 py-4 space-y-2">
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m7 0V3m0 8V3"></path></svg>
Home
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h11m-9.991-10H2a2 2 0 01-2-2V7H2a2 2 0 012-2h4a2 2 0 012 2v3a2 2 0 01-2 2-2 2 0 01-3 0zm4.5 0"></path></svg>
Profile
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Messages
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17c0 .538-.256.958-.553 1.196C14.152 18.068 13.57 18 13 18c-.482 0-.962-.06-1.428-.182a3 3 0 01-2.434-1.298M15 17a2 2 0 00-2-2H9.688m1.325.75c.983-.39 1.688-.718 1.688-1.554 0-.845-.582-1.39-1.5-1.39-.915 0-1.5.545-1.5 1.39 0 1.2.668 1.57 1.5 1.57M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Notifications
</a>
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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></svg>
Settings
</a>
</nav>
<div class="mt-auto px-4 py-4 border-t border-gray-700 dark:border-gray-800">
<a href="#" class="flex items-center px-4 py-2 text-gray-300 dark:text-gray-400 hover:bg-gray-700 dark:hover:bg-gray-800 rounded-lg group transition duration-200">
<svg class="h-5 w-5 mr-3 text-purple-400 dark:text-purple-600 group-hover:text-purple-300 dark:group-hover:text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
Logout
</a>
</div>
</div>
<!-- Main Content Area (Optional, for context) -->
<div class="flex-1 flex flex-col">
<header class="h-20 flex items-center px-6 shadow-md bg-white dark:bg-gray-800">
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard</h1>
</header>
<main class="flex-1 p-6 overflow-y-auto bg-gray-100 dark:bg-gray-900">
<div class="border-4 border-dashed border-gray-300 dark:border-gray-700 rounded-lg h-full p-4 text-gray-700 dark:text-gray-300 text-center flex items-center justify-center">
Main content goes here. This is a placeholder for your social media feed or other content.
</div>
</main>
</div>
</div>Verwandte Komponenten
Navigationskomponente in der Seitenleiste
Eine reaktionsschnelle Navigationskomponente in der Seitenleiste, die auf skeuomorphe Weise mit Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS gestaltet ist.
Navigationskomponente in der Seitenleiste
Eine auf Blogs zugeschnittene Navigationskomponente in der Seitenleiste, die mit 3D-Elementen und leuchtenden Farben gestaltet ist. Unterstützt den Dunkelmodus und ist reaktionsschnell mit einem einfachen Layout, das für den Konsum von Inhalten geeignet ist.
Verspielte pädagogische Navigation in der Seitenleiste
Eine komplexe, spielerische und reaktionsschnelle Navigationskomponente in der Seitenleiste für Bildungsplattformen mit Erdtönen, abgerundeten Elementen und Unterstützung für den Dunkelmodus. Enthält ein Benutzerprofil, eine Hauptnavigation, den Kursfortschritt und Quicklinks.