|
|
class CustomSidebar extends HTMLElement { |
|
|
connectedCallback() { |
|
|
this.attachShadow({ mode: 'open' }); |
|
|
this.shadowRoot.innerHTML = ` |
|
|
<style> |
|
|
:host { |
|
|
display: block; |
|
|
width: 240px; |
|
|
background-color: white; |
|
|
height: calc(100vh - 60px); |
|
|
position: sticky; |
|
|
top: 60px; |
|
|
border-right: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
padding: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.menu-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 0.75rem 1.5rem; |
|
|
color: #4a5568; |
|
|
cursor: pointer; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.menu-item:hover { |
|
|
background-color: #edf2f7; |
|
|
color: #2d3748; |
|
|
} |
|
|
|
|
|
.menu-item.active { |
|
|
background-color: #ebf8ff; |
|
|
color: #3182ce; |
|
|
border-left: 3px solid #3182ce; |
|
|
} |
|
|
|
|
|
.menu-item i { |
|
|
margin-right: 0.75rem; |
|
|
} |
|
|
|
|
|
.menu-group { |
|
|
margin: 1.5rem 0; |
|
|
} |
|
|
|
|
|
.menu-group-title { |
|
|
padding: 0.5rem 1.5rem; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
color: #718096; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<div class="sidebar"> |
|
|
<div class="menu-group"> |
|
|
<div class="menu-group-title">Test Management</div> |
|
|
<a href="/test-cases.html" class="menu-item active"> |
|
|
<i data-feather="list"></i> |
|
|
<span>Test Cases</span> |
|
|
</a> |
|
|
<a href="/sit-testing.html" class="menu-item"> |
|
|
<i data-feather="layers"></i> |
|
|
<span>SIT Testing</span> |
|
|
</a> |
|
|
<a href="/uat-testing.html" class="menu-item"> |
|
|
<i data-feather="users"></i> |
|
|
<span>UAT Testing</span> |
|
|
</a> |
|
|
<a href="/test-runs" class="menu-item"> |
|
|
<i data-feather="play"></i> |
|
|
<span>Test Runs</span> |
|
|
</a> |
|
|
<a href="/test-plans" class="menu-item"> |
|
|
<i data-feather="calendar"></i> |
|
|
<span>Test Plans</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="menu-group"> |
|
|
<div class="menu-group-title">Defects</div> |
|
|
<a href="/defects" class="menu-item"> |
|
|
<i data-feather="alert-circle"></i> |
|
|
<span>Defect Dashboard</span> |
|
|
</a> |
|
|
<a href="/defects/new" class="menu-item"> |
|
|
<i data-feather="plus-circle"></i> |
|
|
<span>Create Defect</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="menu-group"> |
|
|
<div class="menu-group-title">Reports</div> |
|
|
<a href="/reports/coverage" class="menu-item"> |
|
|
<i data-feather="pie-chart"></i> |
|
|
<span>Test Coverage</span> |
|
|
</a> |
|
|
<a href="/reports/execution" class="menu-item"> |
|
|
<i data-feather="bar-chart-2"></i> |
|
|
<span>Execution Trends</span> |
|
|
</a> |
|
|
<a href="/reports/defects" class="menu-item"> |
|
|
<i data-feather="trending-up"></i> |
|
|
<span>Defect Analysis</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="menu-group"> |
|
|
<div class="menu-group-title">Settings</div> |
|
|
<a href="/settings/projects" class="menu-item"> |
|
|
<i data-feather="folder"></i> |
|
|
<span>Projects</span> |
|
|
</a> |
|
|
<a href="/settings/users" class="menu-item"> |
|
|
<i data-feather="users"></i> |
|
|
<span>Users & Groups</span> |
|
|
</a> |
|
|
<a href="/settings/integrations" class="menu-item"> |
|
|
<i data-feather="settings"></i> |
|
|
<span>Integrations</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (window.feather) { |
|
|
window.feather.replace({ class: 'feather-inline' }); |
|
|
} |
|
|
}, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
customElements.define('custom-sidebar', CustomSidebar); |
