侧边栏导航组件
一个响应式侧边栏导航组件，采用粗犷主义风格，完美适用于电子商务应用。它具有鲜艳的颜色，高对比度和多个互动元素，包括到不同购物类别的链接、用户账户选项，以及一个鲜艳的购物车访问按钮。该设计同样适应深色模式。
HTML 代码
<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
<h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
<ul class="mt-6 space-y-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Products</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Categories</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Deals</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Account</span>
</a>
</li>
</ul>
<div class="mt-6">
<a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
<span>View Cart</span>
</a>
</div>
<div class="mt-auto">
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
<span>Profile</span>
</a>
</div>
</div>