Spaces:
Running
Running
File size: 1,430 Bytes
b93a74d 906851f b93a74d 906851f b93a74d 906851f b93a74d 906851f b93a74d 906851f b93a74d |
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 |
class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
aside {
width: 250px;
background: white;
height: calc(100vh - 64px);
border-right: 1px solid #e5e7eb;
padding: 1rem 0;
}
.menu-item {
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
color: #4b5563;
cursor: pointer;
}
.menu-item:hover {
background: #f3f4f6;
color: #3b82f6;
}
.menu-item i {
margin-right: 0.75rem;
font-size: 1.25rem;
}
.active {
background: #eff6ff;
color: #3b82f6;
border-right: 2px solid #3b82f6;
}
</style>
<aside>
<a href="index.html" class="menu-item">
<i class="mdi mdi-view-dashboard"></i>
Dashboard
</a>
<a href="agents.html" class="menu-item">
<i class="mdi mdi-robot"></i>
Agents
</a>
<a href="settings.html" class="menu-item">
<i class="mdi mdi-cog"></i>
Settings
</a>
<a href="analytics.html" class="menu-item">
<i class="mdi mdi-chart-bar"></i>
Analytics
</a>
</aside>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |