Spaces:
Running
Running
File size: 6,262 Bytes
67837cf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
width: 240px;
height: 100%;
transition: all 0.3s;
}
.nav-item.active {
background-color: #EFF6FF;
color: #1D4ED8;
border-left: 3px solid #1D4ED8;
}
.nav-item.active i {
color: #1D4ED8;
}
.nav-item:hover:not(.active) {
background-color: #F3F4F6;
}
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.submenu.open {
max-height: 500px;
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 40;
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
}
</style>
<aside class="sidebar bg-white border-r border-gray-200 overflow-y-auto">
<div class="px-4 py-6">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-800">Navigation</h2>
<button class="md:hidden text-gray-500">
<i data-feather="x"></i>
</button>
</div>
<nav class="mt-8">
<div class="space-y-1">
<a href="#" data-section="dashboard" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group active">
<i data-feather="home" class="text-gray-500 mr-3 flex-shrink-0"></i>
Dashboard
</a>
<a href="#" data-section="recordings" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
<i data-feather="mic" class="text-gray-500 mr-3 flex-shrink-0"></i>
Recordings
</a>
<a href="#" data-section="transcriptions" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
<i data-feather="file-text" class="text-gray-500 mr-3 flex-shrink-0"></i>
Transcriptions
</a>
<div class="relative">
<button class="nav-item flex items-center justify-between w-full px-3 py-2 text-sm font-medium rounded-md group">
<div class="flex items-center">
<i data-feather="users" class="text-gray-500 mr-3 flex-shrink-0"></i>
<span>User Management</span>
</div>
<i data-feather="chevron-down" class="text-gray-400 w-4 h-4 transform transition-transform"></i>
</button>
<div class="submenu pl-11 mt-1">
<a href="#" data-section="users" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i data-feather="user" class="text-gray-400 mr-2 w-3 h-3"></i>
Users
</a>
<a href="#" data-section="roles" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i data-feather="key" class="text-gray-400 mr-2 w-3 h-3"></i>
Roles & Permissions
</a>
</div>
</div>
<a href="#" data-section="devices" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
<i data-feather="cast" class="text-gray-500 mr-3 flex-shrink-0"></i>
Devices
</a>
<a href="#" data-section="prompts" class="nav-item flex items-center px-3 py-2 text-sm font-medium rounded-md group">
<i data-feather="code" class="text-gray-500 mr-3 flex-shrink-0"></i>
AI Prompts
</a>
</div>
<div class="mt-12 pt-6 border-t border-gray-200">
<h3 class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Settings
</h3>
<div class="mt-3 space-y-1">
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i data-feather="settings" class="text-gray-400 mr-3 flex-shrink-0"></i>
System Settings
</a>
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-gray-100">
<i data-feather="help-circle" class="text-gray-400 mr-3 flex-shrink-0"></i>
Help & Support
</a>
</div>
</div>
</nav>
</div>
</aside>
`;
// Add click handlers for navigation items
const navItems = this.shadowRoot.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function() {
// Remove active class from all items
navItems.forEach(navItem => {
navItem.classList.remove('active');
});
// Add active class to clicked item
this.classList.add('active');
});
});
// Add click handlers for dropdown menus
const dropdownButtons = this.shadowRoot.querySelectorAll('.relative > button');
dropdownButtons.forEach(button => {
button.addEventListener('click', function() {
const submenu = this.nextElementSibling;
const icon = this.querySelector('i:last-child');
submenu.classList.toggle('open');
icon.classList.toggle('rotate-180');
});
});
// Mobile menu toggle
const mobileMenuButton = this.shadowRoot.querySelector('button.md\\:hidden');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
this.shadowRoot.querySelector('.sidebar').classList.toggle('open');
});
}
}
}
customElements.define('custom-sidebar', CustomSidebar); |