feat: add mobile-responsive collapsible sidebar
This commit is contained in:
TenX PM
@@ -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>
|
||||
|
||||
@@ -77,9 +77,66 @@
|
||||
|
||||
.dept-tag { font-size: 12px; color: #475569; }
|
||||
.desig-text { font-size: 12px; color: #64748b; }
|
||||
|
||||
/* 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">
|
||||
@@ -117,6 +174,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">Employee Directory</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>
|
||||
@@ -344,5 +406,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -104,9 +104,66 @@
|
||||
.legend-label { font-size: 11px; }
|
||||
.legend-cells { display: flex; gap: 4px; }
|
||||
.legend-cell { width: 16px; height: 16px; border-radius: 3px; }
|
||||
|
||||
/* 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>
|
||||
@@ -135,6 +192,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">Attendance</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>
|
||||
@@ -383,5 +445,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>
|
||||
|
||||
@@ -87,9 +87,66 @@
|
||||
|
||||
.add-card { border: 2px dashed #e2e8f0; border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; color: #94a3b8; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
|
||||
.add-card:hover { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
|
||||
|
||||
/* 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>
|
||||
@@ -118,6 +175,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">Recruitment</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>
|
||||
@@ -381,5 +443,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>
|
||||
|
||||
@@ -98,9 +98,66 @@
|
||||
.perf-cat-score { font-size: 12px; font-weight: 700; color: #0f172a; width: 30px; text-align: right; flex-shrink: 0; }
|
||||
|
||||
.bottom-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>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
@@ -134,6 +191,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">My Dashboard</div>
|
||||
<div style="display:flex;align-items:center;gap:10px">
|
||||
<div class="icon-btn">
|
||||
@@ -352,5 +414,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>
|
||||
|
||||
Reference in New Issue
Block a user