Spaces:
Running
Running
File size: 2,390 Bytes
659d490 e6d88c6 659d490 e6d88c6 659d490 ead5792 659d490 ead5792 659d490 | 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 | class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
width: 240px;
height: calc(100vh - 64px);
top: 64px;
}
.nav-link:hover {
background-color: rgba(59, 130, 246, 0.1);
}
.nav-link.active {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border-left: 3px solid #3b82f6;
}
</style>
<aside class="sidebar bg-white fixed shadow sidebar-transition">
<div class="p-4">
<ul class="space-y-1">
<li>
<a href="/" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="home" class="mr-3"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="/users.html" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="users" class="mr-3"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="/settings" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="settings" class="mr-3"></i>
<span>Settings</span>
</a>
</li>
<li>
<a href="/reports" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="file-text" class="mr-3"></i>
<span>Reports</span>
</a>
</li>
<li>
<a href="/admin.php" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="shield" class="mr-3"></i>
<span>Admin Panel</span>
</a>
</li>
<li>
<a href="/chat.html" class="nav-link flex items-center p-3 rounded-lg">
<i data-feather="message-circle" class="mr-3"></i>
<span>AI Assistant</span>
</a>
</li>
<li>
<a href="/logout" class="nav-link flex items-center p-3 rounded-lg text-red-500">
<i data-feather="log-out" class="mr-3"></i>
<span>Logout</span>
</a>
</li>
</ul>
</div>
</aside>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |