Sidebar Components
Beautiful sidebar components built with TailwindCSS. Perfect for navigation, filters, and content organization.
1. Navigation Sidebar
Responsive navigation sidebar with collapsible menu items and mobile support.
Navigation
Main Content
This is the main content area. The sidebar provides navigation to different sections.
<!-- Navigation Sidebar -->
<div class="flex">
<!-- Sidebar -->
<div class="w-64 bg-white border-r border-gray-200 h-96">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<h3 class="text-xl font-semibold mb-4">Main Content</h3>
<p class="text-gray-600">This is the main content area. The sidebar provides navigation to different sections.</p>
</div>
</div><template>
<!-- Navigation Sidebar -->
<div class="flex">
<!-- Sidebar -->
<div class="w-64 bg-white border-r border-gray-200 h-96">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<h3 class="text-xl font-semibold mb-4">Main Content</h3>
<p class="text-gray-600">This is the main content area. The sidebar provides navigation to different sections.</p>
</div>
</div>
</template>export default function NavigationSidebar() {
return (
<div className="flex">
<!-- Sidebar -->
<div className="w-64 bg-white border-r border-gray-200 h-96">
<div className="p-4">
<h2 className="text-lg font-semibold mb-4">Navigation</h2>
<nav className="space-y-2">
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div className="flex-1 p-6">
<h3 className="text-xl font-semibold mb-4">Main Content</h3>
<p className="text-gray-600">This is the main content area. The sidebar provides navigation to different sections.</p>
</div>
</div>
);
}2. Responsive Sidebar with Hamburger Menu
Responsive sidebar that opens/closes with a hamburger menu button, perfect for mobile navigation.
Navigation
Main Content
Click the hamburger menu on mobile to toggle the sidebar. On desktop, the sidebar is always visible.
<!-- Responsive Sidebar with Hamburger Menu -->
<div x-data="{ sidebarOpen: false }">
<!-- Hamburger Button -->
<button @click="sidebarOpen = !sidebarOpen" class="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
<svg x-show="!sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg x-show="sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Sidebar -->
<div class="absolute inset-y-0 left-0 z-40 w-64 bg-white border-r border-gray-200 transform -translate-x-full md:relative md:translate-x-0 md:block" :class="{ 'translate-x-0': sidebarOpen }" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 bg-purple-100 text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<h3 class="text-xl font-semibold mb-4">Main Content</h3>
<p class="text-gray-600">Click the hamburger menu on mobile to toggle the sidebar. On desktop, the sidebar is always visible.</p>
</div>
<!-- Overlay for mobile -->
<div x-show="sidebarOpen" @click="sidebarOpen = false" class="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>
</div><template>
<!-- Responsive Sidebar with Hamburger Menu -->
<div>
<!-- Hamburger Button -->
<button @click="sidebarOpen = !sidebarOpen" class="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
<svg v-if="!sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Sidebar -->
<div class="absolute inset-y-0 left-0 z-40 w-64 bg-white border-r border-gray-200 transform -translate-x-full md:relative md:translate-x-0 md:block" :class="{ 'translate-x-0': sidebarOpen }" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 bg-purple-100 text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" class="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6">
<h3 class="text-xl font-semibold mb-4">Main Content</h3>
<p class="text-gray-600">Click the hamburger menu on mobile to toggle the sidebar. On desktop, the sidebar is always visible.</p>
</div>
<!-- Overlay for mobile -->
<div v-if="sidebarOpen" @click="sidebarOpen = false" class="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const sidebarOpen = ref(false)
</script>import React, { useState } from 'react'
export default function ResponsiveSidebar() {
const [sidebarOpen, setSidebarOpen] = useState(false)
return (
<div>
<!-- Hamburger Button -->
<button onClick={() => setSidebarOpen(!sidebarOpen)} className="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
{!sidebarOpen ? (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
) : (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
)}
</button>
<!-- Sidebar -->
<div className={`absolute inset-y-0 left-0 z-40 w-64 bg-white border-r border-gray-200 transform -translate-x-full md:relative md:translate-x-0 md:block ${sidebarOpen ? 'translate-x-0' : ''}`} style= {{ transition: 'transform 0.3s ease' }}>
<div className="p-4">
<h2 className="text-lg font-semibold mb-4">Navigation</h2>
<nav className="space-y-2">
<a href="#" className="block px-3 py-2 bg-purple-100 text-purple-700 rounded-md transition-colors">Dashboard</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Products</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Orders</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Customers</a>
<a href="#" className="block px-3 py-2 text-gray-700 hover:bg-purple-100 hover:text-purple-700 rounded-md transition-colors">Settings</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div className="flex-1 p-6">
<h3 className="text-xl font-semibold mb-4">Main Content</h3>
<p className="text-gray-600">Click the hamburger menu on mobile to toggle the sidebar. On desktop, the sidebar is always visible.</p>
</div>
<!-- Overlay for mobile -->
{sidebarOpen && <div onClick={() => setSidebarOpen(false)} className="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>}
</div>
);
}3. Dark Sidebar with Heroicons
Modern dark-themed sidebar with Heroicons for navigation items, perfect for admin dashboards.
Navigation
Main Content
This is the main content area with a dark sidebar navigation.
<!-- Dark Sidebar with Heroicons -->
<div x-data="{ sidebarOpen: false }">
<!-- Hamburger Button -->
<button @click="sidebarOpen = !sidebarOpen" class="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
<svg x-show="!sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg x-show="sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Sidebar -->
<div class="absolute inset-y-0 left-0 z-40 w-64 bg-gray-800 text-white transform -translate-x-full md:relative md:translate-x-0 md:block" :class="{ 'translate-x-0': sidebarOpen }" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
</svg>
Products
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Orders
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
</svg>
Customers
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6 bg-white">
<h3 className="text-xl font-semibold mb-4">Main Content</h3>
<p className="text-gray-600">This is the main content area with a dark sidebar navigation.</p>
</div>
<!-- Overlay for mobile -->
<div x-show="sidebarOpen" @click="sidebarOpen = false" class="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>
</div><template>
<!-- Dark Sidebar with Heroicons -->
<div>
<!-- Hamburger Button -->
<button @click="sidebarOpen = !sidebarOpen" class="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
<svg v-if="!sidebarOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
<!-- Sidebar -->
<div class="absolute inset-y-0 left-0 z-40 w-64 bg-gray-800 text-white transform -translate-x-full md:relative md:translate-x-0 md:block" :class="{ 'translate-x-0': sidebarOpen }" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
<div class="p-4">
<h2 class="text-lg font-semibold mb-4">Navigation</h2>
<nav class="space-y-2">
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
</svg>
Products
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Orders
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
</svg>
Customers
</a>
<a href="#" class="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 p-6 bg-white">
<h3 class="text-xl font-semibold mb-4">Main Content</h3>
<p class="text-gray-600">This is the main content area with a dark sidebar navigation.</p>
</div>
<!-- Overlay for mobile -->
<div v-if="sidebarOpen" @click="sidebarOpen = false" class="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const sidebarOpen = ref(false)
</script>import React, { useState } from 'react'
export default function DarkSidebar() {
const [sidebarOpen, setSidebarOpen] = useState(false)
return (
<div>
<!-- Hamburger Button -->
<button onClick={() => setSidebarOpen(!sidebarOpen)} className="absolute top-4 left-4 z-50 bg-purple-600 text-white p-2 rounded-md md:hidden">
{!sidebarOpen ? (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
) : (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
)}
</button>
<!-- Sidebar -->
<div className={`absolute inset-y-0 left-0 z-40 w-64 bg-gray-800 text-white transform -translate-x-full md:relative md:translate-x-0 md:block ${sidebarOpen ? 'translate-x-0' : ''}`} style= {{ transition: 'transform 0.3s ease' }}>
<div className="p-4">
<h2 className="text-lg font-semibold mb-4">Navigation</h2>
<nav className="space-y-2">
<a href="#" className="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>
<a href="#" className="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
</svg>
Products
</a>
<a href="#" className="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Orders
</a>
<a href="#" className="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
</svg>
Customers
</a>
<a href="#" className="flex items-center px-3 py-2 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md transition-colors">
<svg className="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="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.37.996.608 2.296.07 2.572-1.065z"/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
Settings
</a>
</nav>
</div>
</div>
<!-- Main Content -->
<div className="flex-1 p-6 bg-white">
<h3 className="text-xl font-semibold mb-4">Main Content</h3>
<p className="text-gray-600">This is the main content area with a dark sidebar navigation.</p>
</div>
<!-- Overlay for mobile -->
{sidebarOpen && <div onClick={() => setSidebarOpen(false)} className="absolute inset-0 z-30 bg-black bg-opacity-50 md:hidden"></div>}
</div>
);
}