pankaj/hr-portal-v4-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile-responsive collapsible sidebar

Browse Source
This commit is contained in:
TenX PM
2026-05-09 18:27:47 +00:00
parent 15401ca7de
commit 57b1c62b2a
7 changed files with 546 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
05-payroll.html
+78
View File
@@ -77,9 +77,66 @@
.btn-payslip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; font-family: inherit; white-space: nowrap; }
.btn-payslip:hover { background: #dbeafe; }
.total-row td { background: #f8fafc !important; font-weight: 700; border-top: 2px solid #e2e8f0; }
/* MOBILE RESPONSIVE */
.sidebar-overlay {
display: none;
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: 99;
}
.hamburger {
display: none;
background: none; border: none; cursor: pointer;
padding: 4px; color: #0f172a;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-overlay.open {
display: block;
}
.main {
margin-left: 0 !important;
}
.hamburger {
display: flex;
align-items: center;
justify-content: center;
}
.search-box {
display: none;
}
.header {
padding: 0 16px;
}
.content {
padding: 16px !important;
}
/* Stack KPI cards on mobile */
.kpi-grid, .stats-row {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Hide less important table columns on mobile */
.hide-mobile {
display: none !important;
}
}
@media (max-width: 480px) {
.kpi-grid, .stats-row {
grid-template-columns: 1fr 1fr !important;
}
}
</style>
</head>
<body>
<div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="sidebar-logo-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
@@ -108,6 +165,11 @@
<div class="main">
<header class="header">
<button class="hamburger" onclick="toggleSidebar()" aria-label="Toggle menu">
<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<div class="header-title">Payroll Processing</div>
<div style="display:flex;align-items:center;gap:8px">
<div class="icon-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">5</span></div>
@@ -323,5 +385,21 @@
</div>
</div>
</div>
<script>
function toggleSidebar() {
document.querySelector('.sidebar').classList.toggle('open');
document.getElementById('sidebarOverlay').classList.toggle('open');
}
function closeSidebar() {
document.querySelector('.sidebar').classList.remove('open');
document.getElementById('sidebarOverlay').classList.remove('open');
}
// Close sidebar on nav item click (mobile UX)
document.querySelectorAll('.nav-item').forEach(function(item) {
item.addEventListener('click', function() {
if (window.innerWidth <= 768) closeSidebar();
});
});
</script>
</body>
</html>