简单生动的博客侧边栏
一个用于博客内容的简单响应式侧边栏组件，使用 Tailwind CSS 设计有鲜艳的色彩和类似 Material 的感觉。包括导航链接和用户配置文件部分。支持使用 Tailwind 的 dark： 前缀的深色模式。固定在较大的屏幕上，隐藏在较小的屏幕上。
HTML 代码
<!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
<!-- Sidebar Header -->
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
<span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
</div>
<!-- Navigation -->
<nav class="space-y-2">
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Home
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Categories
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
Popular
</a>
<a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
About
</a>
</nav>
<!-- User Profile (Optional) - Position at bottom -->
<div class="absolute bottom-5 left-5 right-5">
<div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
<span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
</div>
</div>
</div>
</div>