Order Management Dashboard using HTML CSS JavaScript

Home
/
Order Management Dashboard using HTML CSS JavaScript

Order Management Dashboard using HTML CSS JavaScript | Light & Dark Mode

HTML

				
					<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arshyan Dashboard</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button class="mobile-menu-btn" id="mobileMenuBtn">
        <i class="fas fa-bars"></i>
    </button>

    <div class="container">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="brand">
                <div class="brand-content">
                    <div class="diamond-logo">
                        <div class="diamond-shape">
                            <i class="fas fa-diamond"></i>
                        </div>
                    </div>
                    <h1>Arshyan</h1>
                </div>
                <button class="toggle-btn" id="sidebarToggle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            <nav class="nav-menu">
                <div class="nav-item active">
                    <i class="fas fa-home"></i>
                    <span>Dashboard</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>Analytics</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-shopping-cart"></i>
                    <span>Sales</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-users"></i>
                    <span>Customers</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-cog"></i>
                    <span>Settings</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-question-circle"></i>
                    <span>Support</span>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <!-- Header -->
            <div class="header">
                <div class="page-title">
                    <h2>Dashboard</h2>
                    <div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2094722033678002"
     data-ad-slot="2248279416"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>Welcome back, Arshyan! Here's today's summary.</p>
                </div>
                <div class="header-controls">
                    <label class="theme-toggle">
                        <input type="checkbox" id="themeToggle">
                        <span class="slider"></span>
                    </label>
                    <div class="user-profile">
                        <div class="user-info">
                            <h4>Arshyan Malik</h4>
                            <p>Admin</p>
                        </div>
                        <div class="avatar">AM</div>
                    </div>
                </div>
            </div>

            <!-- Metrics Cards -->
            <div class="metrics">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Tool Sales</div>
                        <div class="card-actions">
                            <button class="btn btn-edit">Edit</button>
                            <button class="btn btn-explorer">Tools</button>
                        </div>
                    </div>
                    <div class="card-value">$25,024</div>
                    <div class="card-footer">Increased by 12% this month</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Target: $30,000</span>
                            <span>83.4%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 83.4%; background: var(--primary);"></div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Tool Expenses</div>
                        <div class="card-actions">
                            <button class="btn btn-edit">Edit</button>
                            <button class="btn btn-explorer">Tools</button>
                        </div>
                    </div>
                    <div class="card-value">$14,160</div>
                    <div class="card-footer">Decreased by 5% this month</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Budget: $15,000</span>
                            <span>94.4%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 94.4%; background: var(--warning);"></div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Tool Income</div>
                    </div>
                    <div class="card-value">$10,864</div>
                    <div class="card-footer">Net profit after expenses</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Goal: $12,000</span>
                            <span>90.5%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 90.5%; background: var(--success);"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dashboard Grid -->
            <div class="dashboard-grid">
                <!-- Left Column -->
                <div class="left-column">
                    <!-- Recent Updates -->
                    <div class="updates">
                        <h3 class="section-title"><i class="fas fa-bell"></i> Recent Updates</h3>
                        <ul class="update-list">
                            <li class="update-item">
                                <strong>Mile System</strong> received the credit of Apple Inc. under GPS license.
                            </li>
                            <li class="update-item">
                                <strong>Money Management</strong> has made of 2 DAM ZFC $1,000 million.
                            </li>
                            <li class="update-item">
                                <strong>Money Pay</strong> received the credit of LANDWICH SYDX3 Device.
                            </li>
                            <li class="update-item">
                                <strong>Money Pay</strong> has launched a new payment gateway for international
                                transactions.
                            </li>
                        </ul>
                    </div>

                    <!-- Orders Table -->
                    <div class="orders">
                        <h3 class="section-title"><i class="fas fa-shopping-cart"></i> Respect Orders</h3>
                        <table>
                            <thead>
                                <tr>
                                    <th>Projects</th>
                                    <th>Product Name</th>
                                    <th>Product Number</th>
                                    <th>Payment</th>
                                    <th>Status</th>
                                    <th>Sales Analytics</th>
                                    <th>Total Sales</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Settings</td>
                                    <td>Failedable Mini Device</td>
                                    <td>(555)</td>
                                    <td class="payment-due">Due</td>
                                    <td><span class="status status-funding">Funding</span></td>
                                    <td><a href="#" class="details-link">Details</a></td>
                                    <td>$25,024</td>
                                </tr>
                                <tr>
                                    <td>Add Products</td>
                                    <td>LANDWICH SYDX3 Device</td>
                                    <td>5579</td>
                                    <td class="payment-refunded">Refunded</td>
                                    <td><span class="status status-deferred">Deferred</span></td>
                                    <td><a href="#" class="details-link">Details</a></td>
                                    <td>Last $1 Hours</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>Rules IT Pro Device</td>
                                    <td>457</td>
                                    <td class="payment-due">Due</td>
                                    <td><span class="status status-funding">Funding</span></td>
                                    <td><a href="#" class="details-link">Details</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>Device with Common Device</td>
                                    <td>93995</td>
                                    <td class="payment-due">Red</td>
                                    <td><span class="status status-deferred">Deferred</span></td>
                                    <td><a href="#" class="details-link">Details</a></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>GPS & Glosses</td>
                                    <td>2180</td>
                                    <td class="payment-due">Red</td>
                                    <td><span class="status status-deferred">Deferred</span></td>
                                    <td><a href="#" class="details-link">Details</a></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="right-column">
                    <!-- Sales Analytics -->
                    <div class="analytics">
                        <h3 class="section-title"><i class="fas fa-chart-pie"></i> Sales Analytics</h3>

                        <div class="analytics-item">
                            <div class="analytics-header">
                                <div class="analytics-title">CHINA GROWS</div>
                                <div class="analytics-percent">80%</div>
                            </div>
                            <div class="analytics-values">
                                <span>35.00</span>
                                <span>100.00</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 80%; background: var(--primary);"></div>
                            </div>
                        </div>

                        <div class="analytics-item">
                            <div class="analytics-header">
                                <div class="analytics-title">OTTONE GROWS</div>
                                <div class="analytics-percent">65%</div>
                            </div>
                            <div class="analytics-values">
                                <span>18.00</span>
                                <span>11.00</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 65%; background: var(--success);"></div>
                            </div>
                        </div>

                        <div class="analytics-item">
                            <div class="analytics-header">
                                <div class="analytics-title">NEW CUSTOMER</div>
                                <div class="analytics-percent">45%</div>
                            </div>
                            <div class="analytics-values">
                                <span>8.45</span>
                                <span>5.00</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 45%; background: var(--warning);"></div>
                            </div>
                        </div>

                        <div class="analytics-item">
                            <div class="analytics-header">
                                <div class="analytics-title">York Express</div>
                                <div class="analytics-percent">30%</div>
                            </div>
                            <div class="analytics-values">
                                <span>5.00</span>
                                <span></span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 30%; background: var(--info);"></div>
                            </div>
                        </div>

                        <div class="analytics-total">
                            Total Express: $14,160
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Section -->
            <div class="bottom-metrics">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Dashboard</div>
                    </div>
                    <div class="card-value">/ 43 / 7777</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Target: 100</span>
                            <span>43%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 43%; background: var(--primary);"></div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Tool Sales</div>
                        <div class="card-actions">
                            <button class="btn btn-edit">Edit</button>
                            <button class="btn btn-explorer">Tools</button>
                        </div>
                    </div>
                    <div class="card-value">$25,024</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Target: $30,000</span>
                            <span>83.4%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 83.4%; background: var(--success);"></div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Tool Income</div>
                    </div>
                    <div class="card-value">$10,864</div>

                    <!-- Progress chart -->
                    <div class="progress-chart">
                        <div class="progress-info">
                            <span>Goal: $12,000</span>
                            <span>90.5%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 90.5%; background: var(--warning);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>

</html>

CSS

				
					:root {
    --primary: #4361ee;
    --secondary: #3f37c9;
    --success: #4cc9f0;
    --warning: #f72585;
    --info: #4895ef;
    --dark: #1e1e2c;
    --light: #f8f9fa;
    --gray: #6c757d;
    --border: #e0e0e0;
    --card-bg: #ffffff;
    --body-bg: #f5f7fb;
    --sidebar-bg: linear-gradient(180deg, var(--primary), var(--secondary));
    --text-color: #333333;
    --header-bg: #ffffff;
    --table-header: #f8f9fa;
}

.dark-mode {
    --primary: #5e72e4;
    --secondary: #4c54d1;
    --success: #36d1dc;
    --warning: #ff6b6b;
    --info: #4dccff;
    --dark: #f8f9fa;
    --light: #1a1a2e;
    --gray: #a0aec0;
    --border: #2d3748;
    --card-bg: #1e293b;
    --body-bg: #0f172a;
    --sidebar-bg: linear-gradient(180deg, #1a1a2e, #16213e);
    --text-color: #e2e8f0;
    --header-bg: #1e293b;
    --table-header: #2d3748;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

.container.collapsed {
    grid-template-columns: 70px 1fr;
}

/* Mobile Hamburger Button */
.mobile-menu-btn {
    display: none;
    background: var(--primary);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 110;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease, transform 0.3s ease;
}

/* Position for close button when menu is open */
.mobile-menu-btn.menu-open {
    left: auto;
    right: 20px;
}

/* Sidebar Styles */
.sidebar {
    background: var(--sidebar-bg);
    color: white;
    padding: 20px 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 100;
    height: 100vh;
    position: sticky;
    top: 0;
}

.brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.brand-content {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: opacity 0.3s;
}

.diamond-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.diamond-shape {
    width: 40px;
    height: 40px;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
}

.diamond-shape i {
    transform: rotate(-45deg);
    font-size: 1.2rem;
    color: white;
}

.brand h1 {
    font-size: 1.8rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.3s;
}

.toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-menu {
    margin-top: 30px;
}

.nav-item {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.nav-item:hover, .nav-item.active {
    background: rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--success);
}

.nav-item span {
    transition: opacity 0.3s;
}

.container.collapsed .nav-item span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
}

.container.collapsed .brand-content {
    opacity: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
}

/* Main Content Styles */
.main-content {
    padding: 20px;
    overflow-y: auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: var(--header-bg);
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.page-title h2 {
    font-size: 1.8rem;
    color: var(--dark);
    font-weight: 700;
}

.page-title p {
    color: var(--gray);
    font-size: 0.9rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--success);
}

input:checked + .slider:before {
    transform: translateX(30px);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    text-align: right;
}

.user-info h4 {
    font-weight: 600;
    color: var(--dark);
}

.user-info p {
    font-size: 0.85rem;
    color: var(--gray);
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(67, 97, 238, 0.3);
}

/* Metrics Cards */
.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--primary);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray);
}

.card-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn-edit {
    background: rgba(67, 97, 238, 0.1);
    color: var(--primary);
}

.btn-edit:hover {
    background: var(--primary);
    color: white;
}

.btn-explorer {
    background: rgba(76, 201, 240, 0.1);
    color: var(--success);
}

.btn-explorer:hover {
    background: var(--success);
    color: white;
}

.card-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
}

.card-footer {
    font-size: 0.9rem;
    color: var(--gray);
}

/* Progress Charts */
.progress-chart {
    margin-top: 15px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.progress-bar-container {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.dark-mode .progress-bar-container {
    background: #2d3748;
}

.progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 1.5s ease-out;
}

/* Main Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* Recent Updates */
.updates {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.section-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--primary);
}

.update-list {
    list-style: none;
}

.update-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 20px;
}

.update-item:last-child {
    border-bottom: none;
}

.update-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
}

.update-item strong {
    color: var(--primary);
}

/* Orders Table */
.orders {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--gray);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--table-header);
}

td {
    font-size: 0.95rem;
}

.status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-block;
}

.status-funding {
    background: rgba(76, 201, 240, 0.2);
    color: var(--success);
}

.status-deferred {
    background: rgba(247, 37, 133, 0.2);
    color: var(--warning);
}

.payment-due {
    color: var(--warning);
    font-weight: 600;
}

.payment-refunded {
    color: var(--gray);
}

.details-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

/* Sales Analytics */
.analytics {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.analytics-item {
    margin-bottom: 25px;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.analytics-title {
    font-weight: 600;
    color: var(--dark);
}

.analytics-percent {
    color: var(--success);
    font-weight: 600;
}

.analytics-values {
    display: flex;
    justify-content: space-between;
    color: var(--gray);
    font-size: 0.9rem;
}

.analytics-total {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--dark);
    text-align: center;
}

/* Bottom Cards */
.bottom-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

/* Responsive Design - Mobile Improvements */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics, .bottom-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        display: block;
    }
    
    .sidebar {
        position: fixed;
        left: -300px;
        top: 0;
        height: 100%;
        width: 250px;
        z-index: 105;
        transition: left 0.3s ease;
        overflow-y: auto;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 90px 20px 20px;
        position: relative;
    }
    
    .header-controls {
        flex-direction: column;
    }
    
    .user-profile {
        flex-direction: column;
        text-align: center;
    }
    
    .user-info {
        text-align: center;
    }
    
    .page-title {
        margin-top: 20px;
    }
    
    .main-content {
        padding: 15px;
    }
    
    /* Hide desktop toggle button on mobile */
    .toggle-btn {
        display: none;
    }
    
    /* Show full brand on mobile when menu is open */
    .brand-content {
        opacity: 1 !important;
        width: auto !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    .nav-item span {
        opacity: 1 !important;
        width: auto !important;
        position: relative !important;
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    .card-value {
        font-size: 1.8rem;
    }
    
    .card {
        padding: 20px;
    }
    
    .header {
        padding: 90px 15px 15px;
    }
    
    .metrics, .bottom-metrics {
        gap: 15px;
    }
    
    .mobile-menu-btn {
        top: 15px;
        left: 15px;
    }
    
    .mobile-menu-btn.menu-open {
        right: 15px;
    }
}

JavaScript

				
					// Sidebar toggle functionality
const sidebarToggle = document.getElementById('sidebarToggle');
const container = document.querySelector('.container');
const sidebar = document.getElementById('sidebar');
const mobileMenuBtn = document.getElementById('mobileMenuBtn');

// Desktop sidebar toggle
sidebarToggle.addEventListener('click', () => {
    // Only collapse/expand on desktop
    if (window.innerWidth > 768) {
        container.classList.toggle('collapsed');
        const icon = sidebarToggle.querySelector('i');
        if (container.classList.contains('collapsed')) {
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-chevron-right');
        } else {
            icon.classList.remove('fa-chevron-right');
            icon.classList.add('fa-bars');
        }
        
        // Save sidebar state to localStorage
        const isCollapsed = container.classList.contains('collapsed');
        localStorage.setItem('sidebarCollapsed', isCollapsed);
    }
});

// Mobile menu toggle
mobileMenuBtn.addEventListener('click', () => {
    sidebar.classList.toggle('active');
    mobileMenuBtn.classList.toggle('menu-open');
    
    const icon = mobileMenuBtn.querySelector('i');
    if (sidebar.classList.contains('active')) {
        icon.classList.remove('fa-bars');
        icon.classList.add('fa-times');
    } else {
        icon.classList.remove('fa-times');
        icon.classList.add('fa-bars');
    }
});

// Theme toggle functionality
const themeToggle = document.getElementById('themeToggle');

themeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark-mode');
    // Save theme preference to localStorage
    if (document.body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Add active state to navigation items
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
    item.addEventListener('click', function() {
        navItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        
        // Close mobile menu after selection
        if (window.innerWidth <= 768) {
            sidebar.classList.remove('active');
            mobileMenuBtn.classList.remove('menu-open');
            mobileMenuBtn.querySelector('i').classList.remove('fa-times');
            mobileMenuBtn.querySelector('i').classList.add('fa-bars');
        }
    });
});

// Add hover effects to cards
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.1)';
    });
    
    card.addEventListener('mouseleave', function() {
        this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.05)';
    });
});

// Check for saved theme preference
if (localStorage.getItem('theme') === 'dark') {
    document.body.classList.add('dark-mode');
    themeToggle.checked = true;
}

// Check for saved sidebar state
if (localStorage.getItem('sidebarCollapsed') === 'true' && window.innerWidth > 768) {
    container.classList.add('collapsed');
    const icon = sidebarToggle.querySelector('i');
    icon.classList.remove('fa-bars');
    icon.classList.add('fa-chevron-right');
}

// Animate progress bars on page load
document.addEventListener('DOMContentLoaded', () => {
    const progressBars = document.querySelectorAll('.progress-bar');
    
    progressBars.forEach(bar => {
        // Save original width
        const originalWidth = bar.style.width;
        
        // Set initial width to 0
        bar.style.width = '0';
        
        // Animate to original width
        setTimeout(() => {
            bar.style.transition = 'width 1.5s ease-out';
            bar.style.width = originalWidth;
        }, 300);
    });
});

// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
    if (window.innerWidth <= 768) {
        const isClickInsideSidebar = sidebar.contains(event.target);
        const isClickOnMenuBtn = mobileMenuBtn.contains(event.target);
        
        if (!isClickInsideSidebar && !isClickOnMenuBtn && sidebar.classList.contains('active')) {
            sidebar.classList.remove('active');
            mobileMenuBtn.classList.remove('menu-open');
            mobileMenuBtn.querySelector('i').classList.remove('fa-times');
            mobileMenuBtn.querySelector('i').classList.add('fa-bars');
        }
    }
});

Share this post

Comments

No comments yet. Why don’t you start the discussion?

Order Management Dashboard using HTML CSS JavaScript | Light & Dark Mode

HTML

CSS

JavaScript

Share this post

Comments

Leave a Reply Cancel reply