Building of Responsive Admin Dashboard using HTML, CSS, and JavaScript
In the contemporary digital environment, admin dashboards serve as a crucial tools for overseeing websites, applications, and business activities. Whether you are analyzing user engagement, tracking sales, or presenting data, a well-crafted dashboard simplifies the process. If you have ever aspired to design your own polished admin dashboard, you have come to the right spot!
In this article, I will walk you through the process of creating a fully responsive and interactive admin dashboard using HTML, CSS, and JavaScript. This dashboard includes a collapsible sidebar, seamless navigation, theme toggling (dark/light mode), dynamic charts, and a sleek, modern aesthetic that functions flawlessly on desktops, tablets, and mobile devices.
Why Is It important to create an Admin Dashboard?
Developing an Admin Dashboard with HTML, CSS, and JavaScript is not just an attractive endeavor. It’s an excellent opportunity to cultivate essential skills, and here’s what you will gain:
- Hone Core Abilities: Gain proficiency in HTML structuring, CSS styling using variables, and JavaScript DOM manipulation.
- Explore Modern Design: Apply current UI trends such as collapsible sidebars, theme switches, and responsive designs.
- Utilize charts: Incorporate the chart.js library to craft stunning data representations like line and doughnut charts.
- Improve User Engagement: Create interactive components like search options, dropdown menus, and smooth transitions.
- Build a Portfolio Asset: Develop a striking, professional project to highlight your web development capabilities.
- HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard - Coding Jasim</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<!-- Google Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="dashboard-container">
<!-- Dashboard Sidebar -->
<aside class="dashboard-sidebar" id="dashboardSidebar">
<div class="dashboard-brand">
<button class="dashboard-sidebar-toggle">
<span class="material-symbols-rounded">menu</span>
</button>
<a class="logo">My Dashboard</a>
</div>
<nav class="dashboard-nav">
<div class="dashboard-nav-section">
<a href="#" class="dashboard-nav-item active" data-view="overview">
<span class="nav-icon material-symbols-rounded">dashboard</span>
<span class="nav-label">Overview</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="projects">
<span class="nav-icon material-symbols-rounded">folder</span>
<span class="nav-label">Projects</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="tasks">
<span class="nav-icon material-symbols-rounded">checklist</span>
<span class="nav-label">Tasks</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="reports">
<span class="nav-icon material-symbols-rounded">bar_chart</span>
<span class="nav-label">Reports</span>
</a>
<a href="#" class="dashboard-nav-item" data-view="settings">
<span class="nav-icon material-symbols-rounded">settings</span>
<span class="nav-label">Settings</span>
</a>
</div>
</nav>
<!-- Back to Site Button -->
<div class="sidebar-footer">
<a href="#" class="btn btn-secondary sidebar-back-button">
<span class="material-symbols-rounded">home</span>
<span class="btn-label">Back to Site</span>
</a>
</div>
</aside>
<div class="dashboard-sidebar-overlay" id="dashboardSidebarOverlay"></div>
<!-- Dashboard Main Content -->
<main class="dashboard-main">
<!-- Dashboard Header -->
<header class="dashboard-header">
<!-- Header Content -->
<div class="dashboard-header-content">
<button class="dashboard-sidebar-toggle">
<span class="material-symbols-rounded">menu</span>
</button>
<h1 class="dashboard-header-title" id="dashboardTitle">Overview</h1>
</div>
<!-- Search Container -->
<div class="search-container" id="searchContainer">
<span class="search-icon material-symbols-rounded">search</span>
<input type="search" class="search-input form-input" placeholder="Search projects, tasks, reports..." id="searchInput" />
<button class="search-close btn" id="searchClose">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<!-- Header Actions -->
<div class="dashboard-header-actions">
<!-- Mobile Search Button -->
<button class="mobile-search-btn btn btn-ghost" id="mobileSearchBtn">
<span class="material-symbols-rounded">search</span>
</button>
<!-- Notification Button -->
<div class="notification-button">
<span class="material-symbols-rounded">notifications</span>
<div class="notification-badge">5</div>
</div>
<!-- User Profile -->
<div class="user-menu" id="userMenu">
<div class="user-menu-trigger" id="user-menu-trigger">
<div class="user-avatar-small">
<img src="user.jpg" alt="User Avatar" />
</div>
</div>
<div class="user-menu-dropdown">
<a href="#" class="user-menu-item">
<span class="icon material-symbols-rounded">person</span>
<span>Profile</span>
</a>
<!-- Theme Toggle inside dropdown -->
<div class="user-menu-item theme-item">
<span class="icon material-symbols-rounded">palette</span>
<div class="theme-toggle" id="theme-toggle">
<div class="theme-option active" data-theme="light">Light</div>
<div class="theme-option" data-theme="dark">Dark</div>
</div>
</div>
<a href="#" class="user-menu-item">
<span class="icon material-symbols-rounded">logout</span>
<span>Sign Out</span>
</a>
</div>
</div>
</div>
</header>
<!-- Dashboard Content -->
<div class="dashboard-content">
<!-- Overview View -->
<div class="dashboard-view active" id="overview">
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Total Projects</div>
<div class="stat-card-icon primary">
<span class="material-symbols-rounded">folder</span>
</div>
</div>
<div class="stat-card-value">14</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+3 this week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Tasks completed</div>
<div class="stat-card-icon success">
<span class="material-symbols-rounded">check_circle</span>
</div>
</div>
<div class="stat-card-value">57</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+13% from last week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Tasks Pending</div>
<div class="stat-card-icon warning">
<span class="material-symbols-rounded">schedule</span>
</div>
</div>
<div class="stat-card-value">19</div>
<div class="stat-card-change negative">
<span class="material-symbols-rounded">trending_down</span>
<span>-4 from last week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Team Members</div>
<div class="stat-card-icon info">
<span class="material-symbols-rounded">group</span>
</div>
</div>
<div class="stat-card-value">10</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+2 new member</span>
</div>
</div>
</div>
<!-- Charts -->
<div class="chart-grid">
<div class="chart-card">
<div class="chart-card-header">
<h3 class="chart-card-title">Project Progress</h3>
<p class="chart-card-subtitle">Completion rate over time</p>
</div>
<div class="chart-container">
<canvas id="progressChart"></canvas>
</div>
</div>
<div class="chart-card">
<div class="chart-card-header">
<h3 class="chart-card-title">Task Distribution</h3>
<p class="chart-card-subtitle">Tasks by category</p>
</div>
<div class="chart-container">
<canvas id="categoryChart"></canvas>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="dashboard-table-container">
<div class="dashboard-table-header">
<h3 class="dashboard-table-title">Recent Projects</h3>
<a href="#" class="btn btn-secondary">View All</a>
</div>
<table class="dashboard-table">
<thead>
<tr>
<th>Project</th>
<th>Progress</th>
<th>Status</th>
<th>Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">web</span>
</div>
<div class="project-info">
<div class="project-title-text">Website Redesign</div>
<div class="project-meta-text">Frontend • 7 tasks</div>
</div>
</div>
</td>
<td>90%</td>
<td><span class="status-badge success">In Progress</span></td>
<td>Jan 15, 2025</td>
</tr>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">phone_android</span>
</div>
<div class="project-info">
<div class="project-title-text">Mobile App</div>
<div class="project-meta-text">Mobile • 5 tasks</div>
</div>
</div>
</td>
<td>63%</td>
<td><span class="status-badge warning">In Progress</span></td>
<td>Feb 20, 2025</td>
</tr>
<tr>
<td>
<div class="project-title-cell">
<div class="project-icon">
<span class="material-symbols-rounded">database</span>
</div>
<div class="project-info">
<div class="project-title-text">Database Migration</div>
<div class="project-meta-text">Backend • 5 tasks</div>
</div>
</div>
</td>
<td>100%</td>
<td><span class="status-badge success">Completed</span></td>
<td>Dec 30, 2024</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Projects View -->
<div class="dashboard-view" id="projects">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">folder</span>
</div>
<h3 class="empty-state-title">Projects</h3>
<p class="empty-state-description">Manage your projects here. Launch new projects, monitor progress, and work together with your team.</p>
</div>
</div>
<!-- Tasks View -->
<div class="dashboard-view" id="tasks">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">checklist</span>
</div>
<h3 class="empty-state-title">Tasks</h3>
<p class="empty-state-description">Access and manage all your tasks. Initiate new tasks, establish priorities, and monitor their completion status.</p>
</div>
</div>
<!-- Reports View -->
<div class="dashboard-view" id="reports">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">bar_chart</span>
</div>
<h3 class="empty-state-title">Reports</h3>
<p class="empty-state-description">Produce comprehensive reports and analytics. Examine project performance, team efficiency, and time management data.</p>
</div>
</div>
<!-- Settings View -->
<div class="dashboard-view" id="settings">
<div class="empty-state">
<div class="empty-state-icon">
<span class="material-symbols-rounded">settings</span>
</div>
<h3 class="empty-state-title">Settings</h3>
<p class="empty-state-description">Adjust your dashboard settings, manage team members, and personalize your workspace.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>- CSS CODE
/* CSS VARIABLES */
:root {
/* Primary Colors */
--color-primary: #8b5cf6;
--color-primary-hover: #7c3aed;
--color-primary-50: rgba(139, 92, 246, 0.05);
--color-primary-100: rgba(139, 92, 246, 0.1);
--color-primary-200: rgba(139, 92, 246, 0.2);
/* Semantic Colors */
--color-success: #10b981;
--color-success-50: rgba(16, 185, 129, 0.05);
--color-success-100: rgba(16, 185, 129, 0.1);
--color-warning: #f59e0b;
--color-warning-50: rgba(245, 158, 11, 0.05);
--color-warning-100: rgba(245, 158, 11, 0.1);
--color-error: #ef4444;
--color-error-50: rgba(239, 68, 68, 0.05);
--color-error-100: rgba(239, 68, 68, 0.1);
--color-info: #3b82f6;
--color-info-50: rgba(59, 130, 246, 0.05);
--color-info-100: rgba(59, 130, 246, 0.1);
/* Text Colors */
--color-text: #1e293b;
--color-text-secondary: #475569;
--color-text-muted: #94a3b8;
/* Background Colors */
--color-background: #ffffff;
--color-surface: #f8fafc;
--color-surface-hover: #f1f5f9;
/* Border Colors */
/*--color-border: #e2e8f0;*/
--color-border: #245089;
/* Typography */
--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.75rem;
--text-4xl: 2rem;
/* Font Weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-base: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
/* Layout */
--sidebar-width: 260px;
--sidebar-collapsed-width: 80px;
--header-height: 64px;
/* Transitions */
--transition: 0.2s ease;
}
/* Dark Theme */
[data-theme="dark"] {
--color-text: #ffffff;
--color-text-secondary: #c0c0c0;
--color-text-muted: #838383;
--color-background: #111214;
--color-surface: #1f1f1f;
--color-surface-hover: #262626;
--color-border: #2d2d2d;
}
/* RESET & BASE STYLES */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-primary);
background: var(--color-background);
color: var(--color-text);
line-height: 1.6;
font-size: var(--text-base);
font-weight: var(--weight-normal);
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
font-size: inherit;
border: none;
background: none;
cursor: pointer;
}
.active > .material-symbols-rounded {
color: var(--color-primary);
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
* {
scrollbar-color: var(--color-text-muted) transparent;
}
/* BUTTON COMPONENTS */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid transparent;
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--color-surface-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* ===================================
DASHBOARD LAYOUT
=================================== */
.dashboard-container {
display: flex;
height: 100vh;
overflow: hidden;
}
/* Sidebar */
.dashboard-sidebar {
width: var(--sidebar-width);
background: var(--color-background);
display: flex;
flex-direction: column;
position: sticky;
left: 0;
top: 0;
height: 100vh;
z-index: 1000;
transition: var(--transition);
}
.dashboard-sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.dashboard-brand {
padding: var(--space-md) calc(var(--space-lg) - 2px);
display: flex;
align-items: center;
gap: var(--space-md);
height: var(--header-height);
}
.dashboard-sidebar-toggle {
display: flex;
align-items: center;
color: var(--color-text);
padding: var(--space-sm);
border-radius: var(--radius-lg);
transition: var(--transition);
}
.dashboard-sidebar-toggle:hover {
background: var(--color-surface-hover);
}
.dashboard-sidebar .logo {
font-size: var(--text-lg);
white-space: nowrap;
font-weight: var(--weight-semibold);
color: var(--color-text);
transition: var(--transition);
}
.dashboard-sidebar.collapsed .logo {
opacity: 0;
pointer-events: none;
}
.dashboard-nav {
flex: 1;
padding: var(--space-md) var(--space-xs);
}
.dashboard-nav-section {
display: flex;
flex-direction: column;
gap: 2px;
}
.dashboard-nav-item {
display: flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
margin: 2px var(--space-sm);
transition: var(--transition);
cursor: pointer;
}
.dashboard-nav-item .nav-icon {
color: var(--color-text-secondary);
margin-right: var(--space-base);
font-size: var(--text-2xl);
flex-shrink: 0;
}
.dashboard-nav-item:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.dashboard-nav-item.active {
background: var(--color-surface-hover);
color: var(--color-text);
font-weight: var(--weight-medium);
}
.dashboard-sidebar .nav-label {
transition: var(--transition);
}
.dashboard-sidebar.collapsed .nav-label {
opacity: 0;
pointer-events: none;
}
.sidebar-footer {
padding: var(--space-md);
}
.sidebar-back-button {
width: 100%;
justify-content: flex-start;
}
.dashboard-sidebar.collapsed .sidebar-back-button .btn-label {
opacity: 0;
pointer-events: none;
}
.dashboard-sidebar.collapsed .sidebar-back-button {
padding-left: 12px;
}
.dashboard-sidebar-overlay {
opacity: 0;
pointer-events: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: var(--transition);
}
/* Main Content */
.dashboard-main {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* Header */
.dashboard-header {
height: var(--header-height);
background: var(--color-background);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-lg);
gap: var(--space-md);
}
.dashboard-header-content {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dashboard-header .dashboard-sidebar-toggle {
display: none;
}
.dashboard-header-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
/* Search Container */
.search-container {
display: flex;
align-items: center;
max-width: 500px;
width: 100%;
margin: 0 var(--space-2xl);
position: relative;
}
.search-icon {
position: absolute;
left: 16px;
z-index: 10;
pointer-events: none;
color: var(--color-text-secondary);
}
.search-input {
width: 100%;
padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl);
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text);
font-size: var(--text-sm);
transition: var(--transition);
height: 44px;
font-family: var(--font-primary);
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-100);
}
.search-input::placeholder {
color: var(--color-text-muted);
}
.search-close {
position: absolute;
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text-muted);
display: none;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.search-close:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.search-close.show {
display: flex;
}
.mobile-search-btn {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text-secondary);
transition: var(--transition);
}
.mobile-search-btn:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.dashboard-header-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}
/* Theme Toggle (inside dropdown) */
.theme-toggle {
display: flex;
gap: var(--space-xs);
margin-left: auto;
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: var(--space-xs);
align-items: center;
justify-content: center;
cursor: pointer;
}
.theme-option {
padding: var(--space-xs) var(--space-base);
border-radius: var(--radius-full);
font-size: var(--text-xs);
cursor: pointer;
transition: var(--transition);
}
.theme-option:not(.active):hover {
background-color: var(--color-primary-200);
}
.theme-option.active {
background: var(--color-primary);
color: white;
}
/* Notification Button */
.notification-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
cursor: pointer;
user-select: none;
transition: var(--transition);
color: var(--color-text-secondary);
}
.notification-button:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.notification-badge {
position: absolute;
top: 3px;
right: 3px;
background: var(--color-error);
color: white;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 6px;
border-radius: var(--radius-full);
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
/* User Menu */
.user-menu {
position: relative;
}
.user-menu-trigger {
display: flex;
align-items: center;
gap: var(--space-sm);
height: 36px;
width: 36px;
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition);
}
.user-menu-trigger:hover {
transform: scale(1.1);
}
.user-avatar-small {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
}
.user-avatar-small img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-full);
}
.user-avatar-small .material-symbols-rounded {
font-size: var(--text-lg);
}
.user-menu-dropdown {
position: absolute;
top: calc(100% + var(--space-sm));
right: 0;
z-index: 1000;
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
min-width: 200px;
padding: var(--space-sm);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
}
.user-menu.active .user-menu-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-base);
color: var(--color-text);
text-decoration: none;
font-size: var(--text-sm);
border-radius: var(--radius-lg);
transition: var(--transition);
cursor: pointer;
}
.user-menu-item:not(.theme-item):hover {
background: var(--color-surface-hover);
}
.user-menu-item.theme-item {
gap: 0;
}
.user-menu-item .icon {
font-size: 1.4rem;
}
/* Content Area */
.dashboard-content {
flex: 1;
overflow-y: auto;
padding: var(--space-xl);
border-top-left-radius: var(--radius-xl);
background: var(--color-surface);
}
/* Views */
.dashboard-view {
display: none;
}
.dashboard-view.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.stat-card {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-lg);
transition: var(--transition);
}
.stat-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.stat-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
}
.stat-card-title {
font-size: var(--text-sm);
color: var(--color-text-secondary);
font-weight: var(--weight-medium);
}
.stat-card-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xl);
}
.stat-card-icon.primary {
background: var(--color-primary-100);
color: var(--color-primary);
}
.stat-card-icon.success {
background: var(--color-success-100);
color: var(--color-success);
}
.stat-card-icon.warning {
background: var(--color-warning-100);
color: var(--color-warning);
}
.stat-card-icon.info {
background: var(--color-info-100);
color: var(--color-info);
}
.stat-card-value {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.stat-card-change {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
}
.stat-card-change.positive {
color: var(--color-success);
}
.stat-card-change.negative {
color: var(--color-error);
}
/* Chart Cards */
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}
.chart-card {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-lg);
}
.chart-card-header {
margin-bottom: var(--space-lg);
}
.chart-card-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.chart-card-subtitle {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.chart-container {
position: relative;
height: 300px;
}
/* Table Styles */
.dashboard-table-container {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
}
.dashboard-table-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.dashboard-table-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.dashboard-table {
width: 100%;
border-collapse: collapse;
}
.dashboard-table thead {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.dashboard-table th {
padding: var(--space-md) var(--space-lg);
text-align: left;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dashboard-table td {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.dashboard-table tbody tr:last-child td {
border-bottom: none;
}
.dashboard-table tbody tr:hover {
background: var(--color-surface-hover);
}
.project-title-cell {
display: flex;
align-items: center;
gap: var(--space-md);
max-width: 300px;
}
.project-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-lg);
background: var(--color-primary-100);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.project-info {
flex: 1;
min-width: 0;
}
.project-title-text {
font-weight: var(--weight-medium);
color: var(--color-text);
margin-bottom: 2px;
}
.project-meta-text {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.status-badge {
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
}
.status-badge.success {
background: var(--color-success-100);
color: var(--color-success);
}
.status-badge.warning {
background: var(--color-warning-100);
color: var(--color-warning);
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--space-2xl) var(--space-md);
}
.empty-state-icon {
width: 80px;
height: 80px;
background: var(--color-primary-50);
color: var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-lg);
}
.empty-state-icon .material-symbols-rounded {
font-size: var(--text-4xl);
}
.empty-state-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-sm);
}
.empty-state-description {
color: var(--color-text-secondary);
margin-bottom: var(--space-xl);
}
/* RESPONSIVE DESIGN */
/* Tablet and Mobile */
@media (max-width: 1024px) {
.dashboard-sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
z-index: 1000;
width: var(--sidebar-width);
transition: left 0.3s ease;
}
.dashboard-sidebar.collapsed {
left: 0;
}
.dashboard-sidebar.collapsed :is(.logo, .nav-label, .nav-icon, .dashboard-nav-title, .sidebar-back-button .btn-label) {
opacity: 1;
pointer-events: auto;
}
.dashboard-sidebar.collapsed .sidebar-back-button {
padding-left: var(--space-md);
}
.dashboard-header {
padding: 0 var(--space-md);
}
.dashboard-brand {
gap: var(--space-sm);
}
.dashboard-header .dashboard-sidebar-toggle {
display: flex;
}
/* Search responsive styles */
.search-container {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
height: var(--header-height);
background: var(--color-background);
border-bottom: 1px solid var(--color-border);
z-index: 1001;
margin: 0;
padding: 0 var(--space-md);
display: none;
align-items: center;
gap: var(--space-sm);
}
.search-container.mobile-active {
display: flex;
}
.search-container .search-close {
display: flex;
position: static;
transform: none;
height: 44px;
width: 44px;
background: var(--color-surface-hover);
}
.search-icon {
left: 30px;
}
.mobile-search-btn {
display: flex;
}
/* Sidebar Overlay Mobile Behavior */
.dashboard-sidebar-overlay.active {
opacity: 1;
pointer-events: auto;
}
.dashboard-sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
z-index: 1000;
width: var(--sidebar-width);
transition: left 0.3s ease;
}
.dashboard-sidebar.collapsed {
left: 0;
width: var(--sidebar-width);
}
.dashboard-content {
padding: var(--space-md);
border-top-left-radius: 0;
}
.chart-grid {
grid-template-columns: 1fr;
}
}
/* Mobile */
@media (max-width: 768px) {
.dashboard-header {
padding: 0 var(--space-md);
}
.dashboard-content {
padding: var(--space-base);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.chart-grid {
grid-template-columns: 1fr;
}
.dashboard-table-container {
overflow-x: auto;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.dashboard-table-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
}
/* Focus Styles */
*:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-primary);
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}- JavaScript
// DOM Elements
const dashboardSidebar = document.getElementById("dashboardSidebar");
const userMenu = document.getElementById("userMenu");
const userMenuTrigger = document.getElementById("user-menu-trigger");
const userMenuDropdown = document.querySelector(".user-menu-dropdown");
const themeToggle = document.getElementById("theme-toggle");
const dashboardViews = document.querySelectorAll(".dashboard-view");
const dashboardNavItems = document.querySelectorAll(".dashboard-nav-item");
const dashboardTitle = document.getElementById("dashboardTitle");
const dashboardSidebarOverlay = document.getElementById("dashboardSidebarOverlay");
const searchContainer = document.getElementById("searchContainer");
const searchInput = document.getElementById("searchInput");
const searchClose = document.getElementById("searchClose");
const mobileSearchBtn = document.getElementById("mobileSearchBtn");
// State
let sidebarCollapsed = false;
let currentView = "overview";
// INITIALIZATION
document.addEventListener("DOMContentLoaded", function () {
initTheme();
initThemeToggle();
initSidebar();
initUserMenu();
initNavigation();
initSearch();
initCharts();
});
// SIDEBAR FUNCTIONALITY
function initSidebar() {
// Load saved sidebar state
sidebarCollapsed = localStorage.getItem("dashboard-sidebar-collapsed") === "true";
dashboardSidebar.classList.toggle("collapsed", sidebarCollapsed);
// Sidebar toggle functionality
document.querySelectorAll(".dashboard-sidebar-toggle").forEach((toggle) => {
toggle.addEventListener("click", toggleSidebar);
});
// Sidebar overlay functionality
dashboardSidebarOverlay?.addEventListener("click", closeSidebar);
}
function toggleSidebar() {
sidebarCollapsed = !sidebarCollapsed;
const isMobile = window.innerWidth <= 1024;
if (isMobile) {
// Mobile behavior - toggle sidebar and overlay together
const isOpen = dashboardSidebar.classList.contains("collapsed");
dashboardSidebar.classList.toggle("collapsed", !isOpen);
dashboardSidebarOverlay?.classList.toggle("active", !isOpen);
} else {
// Desktop behavior
dashboardSidebar.classList.toggle("collapsed", sidebarCollapsed);
}
localStorage.setItem("dashboard-sidebar-collapsed", sidebarCollapsed.toString());
}
function closeSidebar() {
if (window.innerWidth <= 1024) {
dashboardSidebar.classList.remove("collapsed");
dashboardSidebarOverlay?.classList.remove("active");
}
}
// USER MENU FUNCTIONALITY
function initUserMenu() {
if (!userMenuTrigger || !userMenu) return;
userMenuTrigger.addEventListener("click", (e) => {
e.stopPropagation();
userMenu.classList.toggle("active");
});
// Close menu when clicking outside or pressing escape
document.addEventListener("click", (e) => {
if (!userMenu.contains(e.target)) {
userMenu.classList.remove("active");
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && userMenu.classList.contains("active")) {
userMenu.classList.remove("active");
}
});
}
// NAVIGATION FUNCTIONALITY
function initNavigation() {
dashboardNavItems.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
const viewId = item.getAttribute("data-view");
if (viewId) switchView(viewId);
});
});
}
function switchView(viewId) {
// Update active nav item
dashboardNavItems.forEach((item) => {
item.classList.toggle("active", item.getAttribute("data-view") === viewId);
});
// Hide all views and show selected one
dashboardViews.forEach((view) => view.classList.remove("active"));
const targetView = document.getElementById(viewId);
if (targetView) {
targetView.classList.add("active");
currentView = viewId;
updatePageTitle(viewId);
}
// Close sidebar on mobile after navigation
if (window.innerWidth <= 1024) closeSidebar();
}
function updatePageTitle(viewId) {
const titles = {
overview: "Overview",
projects: "Projects",
tasks: "Tasks",
reports: "Reports",
settings: "Settings",
};
if (dashboardTitle) {
dashboardTitle.textContent = titles[viewId] || "Dashboard";
}
}
// THEME FUNCTIONALITY
function initTheme() {
// Load saved theme
const savedTheme = localStorage.getItem("dashboard-theme") || "light";
document.documentElement.setAttribute("data-theme", savedTheme);
// Update theme toggle UI
updateThemeToggleUI(savedTheme);
}
function initThemeToggle() {
if (!themeToggle) return;
themeToggle.querySelectorAll(".theme-option").forEach((option) => {
option.addEventListener("click", (e) => {
e.stopPropagation();
setTheme(option.getAttribute("data-theme"));
});
});
}
function setTheme(theme) {
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("dashboard-theme", theme);
updateThemeToggleUI(theme);
}
function updateThemeToggleUI(theme) {
if (!themeToggle) return;
themeToggle.querySelectorAll(".theme-option").forEach((option) => {
option.classList.toggle("active", option.getAttribute("data-theme") === theme);
});
}
// SEARCH FUNCTIONALITY
function initSearch() {
mobileSearchBtn?.addEventListener("click", () => {
searchContainer.classList.add("mobile-active");
searchInput.focus();
});
searchClose?.addEventListener("click", () => {
searchContainer.classList.remove("mobile-active");
searchInput.value = "";
});
}
// CHART INITIALIZATION
function initCharts() {
initProgressChart();
initCategoryChart();
}
function initProgressChart() {
const ctx = document.getElementById("progressChart");
if (!ctx) return;
new Chart(ctx, {
type: "line",
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN"],
datasets: [
{
label: "Project Progress",
data: [25, 43, 48, 65, 75, 90],
borderColor: "#8b5cf6",
backgroundColor: "rgba(139, 92, 246, 0.1)",
borderWidth: 2,
fill: true,
tension: 0.4,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
y: {
beginAtZero: true,
max: 100,
ticks: { callback: (value) => value + "%" },
},
},
},
});
}
function initCategoryChart() {
const ctx = document.getElementById("categoryChart");
if (!ctx) return;
new Chart(ctx, {
type: "doughnut",
data: {
labels: ["Frontend", "Backend", "Mobile", "DevOps"],
datasets: [
{
data: [38, 32, 17, 13],
/*backgroundColor: ["#8b5cf6", "#10b981", "#f59e0b", "#ef4444"],*/
backgroundColor: ["#300695", "#1a9f54", "#dcee4d", "#ef4444"],
borderWidth: 0,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom",
labels: {
padding: 20,
usePointStyle: true,
},
},
},
},
});
}