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
04-leave-management.html
+78
View File
@@ -92,9 +92,66 @@
.panel-btn-reject { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.panel-btn-reject:hover { background: #fee2e2; }
.days-badge { display: inline-block; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }
/* 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="#ffffff" 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>
@@ -123,6 +180,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">Leave Management</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><input type="text" placeholder="Search leaves..."></div>
<div style="display:flex;align-items:center;gap:8px">
@@ -274,5 +336,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>