|
|
class CustomSidebar extends HTMLElement { |
|
|
connectedCallback() { |
|
|
this.attachShadow({ mode: 'open' }); |
|
|
this.shadowRoot.innerHTML = ` |
|
|
<style> |
|
|
.nav-item { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.nav-item:hover:not(.active) { |
|
|
background-color: rgba(99, 102, 241, 0.1); |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
background-color: rgba(99, 102, 241, 0.2); |
|
|
border-left: 3px solid var(--primary-500); |
|
|
} |
|
|
|
|
|
.submenu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.submenu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
.rotate-90 { |
|
|
transform: rotate(90deg); |
|
|
} |
|
|
</style> |
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
|
<div class="flex flex-col w-64 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 h-screen fixed"> |
|
|
<div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> |
|
|
<div class="flex-1 px-3 space-y-1"> |
|
|
<a href="index.html" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="home" class="mr-3 h-5 w-5"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<div class="space-y-1"> |
|
|
<button class="nav-item flex items-center w-full px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="users" class="mr-3 h-5 w-5"></i> |
|
|
<span class="flex-1 text-left">Users</span> |
|
|
<i data-feather="chevron-down" class="h-4 w-4"></i> |
|
|
</button> |
|
|
<div class="submenu pl-11"> |
|
|
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"> |
|
|
All Users |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"> |
|
|
Add New |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-1"> |
|
|
<a href="courses.html" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="book" class="mr-3 h-5 w-5"></i> |
|
|
<span class="flex-1">Courses</span> |
|
|
</a> |
|
|
<div class="submenu pl-11"> |
|
|
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"> |
|
|
All Courses |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"> |
|
|
Add New |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"> |
|
|
Categories |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="clipboard" class="mr-3 h-5 w-5"></i> |
|
|
Enrollments |
|
|
</a> |
|
|
|
|
|
<a href="#" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="file-text" class="mr-3 h-5 w-5"></i> |
|
|
Assignments |
|
|
</a> |
|
|
|
|
|
<a href="#" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="award" class="mr-3 h-5 w-5"></i> |
|
|
Certificates |
|
|
</a> |
|
|
|
|
|
<a href="#" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="credit-card" class="mr-3 h-5 w-5"></i> |
|
|
Payments |
|
|
</a> |
|
|
|
|
|
<a href="#" class="nav-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-900 dark:text-white"> |
|
|
<i data-feather="settings" class="mr-3 h-5 w-5"></i> |
|
|
Settings |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
const submenuButtons = this.shadowRoot.querySelectorAll('button.nav-item'); |
|
|
submenuButtons.forEach(button => { |
|
|
if (button.nextElementSibling && button.nextElementSibling.classList.contains('submenu')) { |
|
|
button.addEventListener('click', () => { |
|
|
const icon = button.querySelector('i:last-child'); |
|
|
const submenu = button.nextElementSibling; |
|
|
|
|
|
submenu.classList.toggle('open'); |
|
|
icon.classList.toggle('rotate-90'); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
} |
|
|
} |
|
|
|
|
|
customElements.define('custom-sidebar', CustomSidebar); |
