In today’s digital landscape, admin dashboards are essential tools for managing websites, apps, and business operations. Whether you’re tracking user activity, monitoring sales, or visualizing data, a well-designed dashboard makes everything easier. If you’ve ever wanted to create your own professional-looking admin dashboard, you’re in the right place!
In this blog post, I’ll guide you through building a fully responsive and interactive admin dashboard using HTML, CSS, and JavaScript. This dashboard features a collapsible sidebar, smooth navigation, theme switching (dark/light mode), interactive charts, and a clean, modern design that works seamlessly on desktop, tablet, and mobile devices.
Why Should You Build an Admin Dashboard?
Creating an admin dashboard with HTML, CSS, and JavaScript is more than just a visually appealing project. It’s a fantastic way to develop valuable skills, and here’s what you’ll learn:
- Practice Core Skills: Master HTML structure, CSS styling with CSS variables, and JavaScript DOM manipulation.
- Learn Modern Design: Implement contemporary UI patterns like collapsible sidebars, theme toggles, and responsive layouts.
- Work with Charts: Integrate Chart.js library to create beautiful data visualizations like line and doughnut charts.
- Enhance User Experience: Build interactive features like search functionality, dropdown menus, and smooth transitions.
- Create a Portfolio Piece: Build an impressive, professional project to showcase your web development skills.
Video Demo of Responsive Dashboard in HTML CSS & JavaScript
Steps to Create Responsive Dashboard in HTML CSS & JavaScript
To create a responsive admin dashboard using HTML, CSS, and JavaScript, follow these simple step-by-step instructions:
- Create a folder with any name you like, e.g., responsive-dashboard.
- Inside it, create the necessary files:
index.html,style.css, andscript.js.
In your index.html file, start by setting up the HTML structure for the dashboard. This includes the sidebar navigation, main header with search bar, and content area where we’ll display stats, charts, and tables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard - CodingNepal</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,[email protected],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">3</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="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face&auto=format" 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">12</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+2 this week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Completed Tasks</div>
<div class="stat-card-icon success">
<span class="material-symbols-rounded">check_circle</span>
</div>
</div>
<div class="stat-card-value">48</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+15% from last week</span>
</div>
</div>
<div class="stat-card">
<div class="stat-card-header">
<div class="stat-card-title">Pending Tasks</div>
<div class="stat-card-icon warning">
<span class="material-symbols-rounded">schedule</span>
</div>
</div>
<div class="stat-card-value">23</div>
<div class="stat-card-change negative">
<span class="material-symbols-rounded">trending_down</span>
<span>-3 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">8</div>
<div class="stat-card-change positive">
<span class="material-symbols-rounded">trending_up</span>
<span>+1 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 • 5 tasks</div>
</div>
</div>
</td>
<td>85%</td>
<td><span class="status-badge success">In Progress</span></td>
<td>Dec 15, 2024</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 • 8 tasks</div>
</div>
</div>
</td>
<td>60%</td>
<td><span class="status-badge warning">In Progress</span></td>
<td>Jan 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 • 3 tasks</div>
</div>
</div>
</td>
<td>100%</td>
<td><span class="status-badge success">Completed</span></td>
<td>Nov 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. Create new projects, track progress, and collaborate 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">View and manage all your tasks. Create new tasks, set priorities, and track 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">Generate detailed reports and analytics. View project performance, team productivity, and time tracking 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">Configure your dashboard preferences, manage team members, and customize your workspace.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>
In your style.css file, add the CSS code to style your dashboard with a modern, professional look. We’ll use CSS variables for easy theme customization and ensure the design is fully responsive.
/* ===================================
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;
/* 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;
}
}
In your script.js file, add JavaScript to bring interactivity to your dashboard. This includes sidebar toggle, navigation switching, theme management, search functionality, and chart initialization.
// 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: [20, 35, 45, 60, 70, 85],
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: [35, 25, 20, 20],
backgroundColor: ["#8b5cf6", "#10b981", "#f59e0b", "#ef4444"],
borderWidth: 0,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: "bottom",
labels: {
padding: 20,
usePointStyle: true,
},
},
},
},
});
}
Conclusion and Final Words
And that’s it! You’ve built your own responsive admin dashboard using HTML, CSS, and JavaScript! This project is an excellent way to enhance your web development skills while creating something practical and professional. Whether you’re using it for a personal project, a client, or to showcase in your portfolio, it demonstrates your ability to build modern, interactive web applications.
You can always take it further by adding more features like adding content to remaining tabs, real-time data updates, more chart types, user authentication, data filtering, or connecting to a backend API. The possibilities are endless, so don’t hesitate to get creative and expand your dashboard!
If you encounter any issues, you can download the source code for this responsive dashboard project by clicking the “Download” button
