components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    width: 240px;
                    transition: transform 0.3s ease-in-out;
                }
                @media (max-width: 1023px) {
                    .sidebar {
                        transform: translateX(-100%);
                        position: fixed;
                        z-index: 40;
                        height: 100vh;
                        background: white;
                        top: 64px;
                        left: 0;
                    }
                    
                    .sidebar.open {
                        transform: translateX(0);
                        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
                    }
                }
.nav-item {
                    transition: all 0.2s ease;
                }
                
                .nav-item:hover {
                    background-color: #f3f4f6;
                }
                
                .nav-item.active {
                    background-color: #e5e7eb;
                }
            </style>
            <aside class="sidebar bg-white border-r border-gray-200 h-full fixed lg:static">
                <div class="p-4 space-y-6">
                    <div class="space-y-2">
                        <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Dashboard</h3>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md active">
                            <i data-feather="home" class="w-4 h-4 mr-3"></i>
                            Overview
                        </a>
                    </div>
                    
                    <div class="space-y-2">
                        <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Management</h3>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="truck" class="w-4 h-4 mr-3"></i>
                            Vehicles
                        </a>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="users" class="w-4 h-4 mr-3"></i>
                            Drivers
                        </a>
                        <a href="routes.html" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="map" class="w-4 h-4 mr-3"></i>
                            Routes
                        </a>
</div>
                    
                    <div class="space-y-2">
                        <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Monitoring</h3>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="map-pin" class="w-4 h-4 mr-3"></i>
                            Live Tracking
                        </a>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="clock" class="w-4 h-4 mr-3"></i>
                            Trip History
                        </a>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="alert-circle" class="w-4 h-4 mr-3"></i>
                            Alerts
                        </a>
                    </div>
                    
                    <div class="space-y-2">
                        <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">System</h3>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="settings" class="w-4 h-4 mr-3"></i>
                            Settings
                        </a>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="users" class="w-4 h-4 mr-3"></i>
                            Users
                        </a>
                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                            <i data-feather="file-text" class="w-4 h-4 mr-3"></i>
                            Reports
                        </a>
                    </div>
                </div>
            </aside>
        `;
    }
}
customElements.define('custom-sidebar', CustomSidebar);