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
02-admin-dashboard.html
+78
View File
@@ -205,9 +205,66 @@
}
.full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* 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>
<!-- SIDEBAR -->
<aside class="sidebar">
@@ -287,6 +344,11 @@
<!-- MAIN -->
<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">Dashboard</div>
<div class="search-box">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
@@ -532,5 +594,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>