File size: 3,720 Bytes
e9077cf |
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 |
class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
width: 280px;
transition: all 0.3s;
}
.sidebar-item {
transition: all 0.2s;
}
.sidebar-item:hover {
background-color: rgba(255, 88, 15, 0.1);
}
.sidebar-item.active {
background-color: rgba(255, 88, 15, 0.1);
border-left: 3px solid #ff580f;
}
.sidebar-item.active .sidebar-icon {
color: #ff580f;
}
.sidebar-item.active .sidebar-text {
color: #21223a;
font-weight: 500;
}
@media (max-width: 768px) {
.sidebar {
width: 0;
overflow: hidden;
}
.sidebar.open {
width: 280px;
}
}
</style>
<div class="sidebar bg-primary text-white h-full flex flex-col">
<div class="p-6 border-b border-primary-light">
<h2 class="text-xl font-bold flex items-center">
<i data-feather="shield" class="mr-2"></i>
CodeDoc AI
</h2>
</div>
<div class="flex-1 overflow-y-auto py-4">
<div class="px-4 space-y-1">
<a href="/" class="flex items-center px-4 py-3 rounded-lg sidebar-item active">
<i data-feather="home" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Dashboard</span>
</a>
<a href="/repositories" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="github" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Repositories</span>
</a>
<a href="/documentation" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="file-text" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Documentation</span>
</a>
<a href="/code-reviews" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="check-circle" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Code Reviews</span>
</a>
<a href="/testing" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="cpu" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Testing</span>
</a>
<a href="/deployments" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="upload" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Deployments</span>
</a>
<a href="/settings" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<i data-feather="settings" class="sidebar-icon mr-3"></i>
<span class="sidebar-text">Settings</span>
</a>
</div>
</div>
<div class="p-4 border-t border-primary-light">
<div class="flex items-center px-4 py-3 rounded-lg sidebar-item">
<div class="relative mr-3">
<img src="http://static.photos/people/200x200/42" class="w-8 h-8 rounded-full" alt="User">
<span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
</div>
<div>
<p class="sidebar-text text-sm">John Doe</p>
<p class="text-xs opacity-70">Admin</p>
</div>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |