Join Now

Responsive Admin Dashboard Using Html, Css & Javascript

  • By CodingManish
  • Responsive Admin Dashboard Using Html, Css & Javascript

    An Admin Panel or Dashboard serves as the nerve center of any application or website, offering a comprehensive overview of important data and functionalities. These interfaces are crucial for administrators to manage and monitor various aspects of their platforms. For instance, YouTube Studio provides channel owners with insights into their video performance and audience engagement metrics.

    In this tutorial, we'll guide you through the process of creating a responsive admin dashboard panel with a side navigation menu bar using HTML, CSS, and JavaScript. We'll also incorporate dark and light mode features to enhance user experience.

  • Video Tutorial of Responsive Admin Dashboard
  • Enhancements and Customizations:

    Dark/Light Mode : You can implement dark and light mode themes to provide users with a personalized experience. This can be achieved using CSS variables or JavaScript to toggle between different color schemes.

    Dynamic Data Visualization : Incorporate charts, graphs, and other visual elements to represent data dynamically. Libraries like Chart.js or D3.js can be utilized for this purpose.

    User Authentication : Implement user authentication and authorization features to control access to the admin panel and ensure security.

    HTML Structure (index.html):
      
       
         
        <!DOCTYPE html>
        <!-- CodingManish - codingmanish.in -->
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <link rel="stylesheet" href="style.css" />
            <link
              rel="stylesheet"
              href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
            />
            <title>Admin Dashboard Panel</title>
          </head>
          <body>
            <nav>
              <div class="logo-name">
                <div class="logo-image">
                  <img src="icon1.png" alt="" />
                </div>
        
                <span class="logo_name">CodingManish</span>
              </div>
        
              <div class="menu-items">
                <ul class="nav-links">
                  <li>
                    <a href="#">
                      <i class="uil uil-estate"></i>
                      <span class="link-name">Dahsboard</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="uil uil-files-landscapes"></i>
                      <span class="link-name">Content</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="uil uil-chart"></i>
                      <span class="link-name">Analytics</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="uil uil-thumbs-up"></i>
                      <span class="link-name">Like</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="uil uil-comments"></i>
                      <span class="link-name">Comment</span>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="uil uil-share"></i>
                      <span class="link-name">Share</span>
                    </a>
                  </li>
                </ul>
        
                <ul class="logout-mode">
                  <li>
                    <a href="#">
                      <i class="uil uil-signout"></i>
                      <span class="link-name">Logout</span>
                    </a>
                  </li>
        
                  <li class="mode">
                    <a href="#">
                      <i class="uil uil-moon"></i>
                      <span class="link-name">Dark Mode</span>
                    </a>
        
                    <div class="mode-toggle">
                      <span class="switch"></span>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>
        
            <section class="dashboard">
              <div class="top">
                <i class="uil uil-bars sidebar-toggle"></i>
        
                <div class="search-box">
                  <i class="uil uil-search"></i>
                  <input type="text" placeholder="Search here..." />
                </div>
              </div>
        
              <div class="dash-content">
                <div class="overview">
                  <div class="title">
                    <i class="uil uil-tachometer-fast-alt"></i>
                    <span class="text">Dashboard</span>
                  </div>
        
                  <div class="boxes">
                    <div class="box box1">
                      <i class="uil uil-thumbs-up"></i>
                      <span class="text">Total Likes</span>
                      <span class="number">50,120</span>
                    </div>
                    <div class="box box2">
                      <i class="uil uil-comments"></i>
                      <span class="text">Comments</span>
                      <span class="number">20,120</span>
                    </div>
                    <div class="box box3">
                      <i class="uil uil-share"></i>
                      <span class="text">Total Share</span>
                      <span class="number">10,120</span>
                    </div>
                  </div>
                </div>
        
                <div class="activity">
                  <div class="title">
                    <i class="uil uil-clock-three"></i>
                    <span class="text">Recent Activity</span>
                  </div>
        
                  <div class="activity-data">
                    <div class="data names">
                      <span class="data-title">Name</span>
                      <span class="data-list">Bharat Suthar</span>
                      <span class="data-list">Jay Rathod</span>
                      <span class="data-list">Dheeraj Suthar</span>
                      <span class="data-list">Pravin Suthar</span>
                      <span class="data-list">Man Shahi</span>
                      <span class="data-list">Ganesh Chand</span>
                      <span class="data-list">Bikash Chand</span>
                    </div>
                    <div class="data email">
                      <span class="data-title">Email</span>
                      <span class="data-list">bharat@gmail.com</span>
                      <span class="data-list">jay@gmail.com</span>
                      <span class="data-list">dheeraj@gmail.com</span>
                      <span class="data-list">pravin@gmail.com</span>
                      <span class="data-list">pratimashhai@gmail.com</span>
                      <span class="data-list">manshahi@gmail.com</span>
                      <span class="data-list">ganeshchand@gmail.com</span>
                    </div>
                    <div class="data joined">
                      <span class="data-title">Joined</span>
                      <span class="data-list">2022-02-12</span>
                      <span class="data-list">2022-02-12</span>
                      <span class="data-list">2022-02-13</span>
                      <span class="data-list">2022-02-13</span>
                      <span class="data-list">2022-02-14</span>
                      <span class="data-list">2022-02-14</span>
                      <span class="data-list">2022-02-15</span>
                    </div>
                    <div class="data type">
                      <span class="data-title">Type</span>
                      <span class="data-list">New</span>
                      <span class="data-list">Member</span>
                      <span class="data-list">Member</span>
                      <span class="data-list">New</span>
                      <span class="data-list">Member</span>
                      <span class="data-list">New</span>
                      <span class="data-list">Member</span>
                    </div>
                    <div class="data status">
                      <span class="data-title">Status</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                      <span class="data-list">Liked</span>
                    </div>
                  </div>
                </div>
              </div>
            </section>
        
            <script src="script.js"></script>
          </body>
        </html>
        
        
      
      
      
    CSS Styling (style.css):
        
      
        
       
        /* ===== Google Font Import - Poppins ===== */
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Poppins", sans-serif;
        }
        
        :root {
          /* ===== Colors ===== */
          --primary-color: #0e4bf1;
          --panel-color: #fff;
          --text-color: #000;
          --black-light-color: #707070;
          --border-color: #e6e5e5;
          --toggle-color: #ddd;
          --box1-color: #4da3ff;
          --box2-color: #ffe6ac;
          --box3-color: #e7d1fc;
          --title-icon-color: #fff;
        
          /* ====== Transition ====== */
          --tran-05: all 0.5s ease;
          --tran-03: all 0.3s ease;
          --tran-03: all 0.2s ease;
        }
        
        body {
          min-height: 100vh;
          background-color: var(--primary-color);
        }
        body.dark {
          --primary-color: #3a3b3c;
          --panel-color: #242526;
          --text-color: #ccc;
          --black-light-color: #ccc;
          --border-color: #4d4c4c;
          --toggle-color: #fff;
          --box1-color: #3a3b3c;
          --box2-color: #3a3b3c;
          --box3-color: #3a3b3c;
          --title-icon-color: #ccc;
        }
        /* === Custom Scroll Bar CSS === */
        ::-webkit-scrollbar {
          width: 8px;
        }
        ::-webkit-scrollbar-track {
          background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
          background: var(--primary-color);
          border-radius: 12px;
          transition: all 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
          background: #0b3cc1;
        }
        
        body.dark::-webkit-scrollbar-thumb:hover,
        body.dark .activity-data::-webkit-scrollbar-thumb:hover {
          background: #3a3b3c;
        }
        
        nav {
          position: fixed;
          top: 0;
          left: 0;
          height: 100%;
          width: 250px;
          padding: 10px 14px;
          background-color: var(--panel-color);
          border-right: 1px solid var(--border-color);
          transition: var(--tran-05);
        }
        nav.close {
          width: 73px;
        }
        nav .logo-name {
          display: flex;
          align-items: center;
        }
        nav .logo-image {
          display: flex;
          justify-content: center;
          min-width: 45px;
        }
        nav .logo-image img {
          width: 40px;
          object-fit: cover;
          border-radius: 50%;
        }
        
        nav .logo-name .logo_name {
          font-size: 22px;
          font-weight: 600;
          color: var(--text-color);
          margin-left: 14px;
          transition: var(--tran-05);
        }
        nav.close .logo_name {
          opacity: 0;
          pointer-events: none;
        }
        nav .menu-items {
          margin-top: 40px;
          height: calc(100% - 90px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .menu-items li {
          list-style: none;
        }
        .menu-items li a {
          display: flex;
          align-items: center;
          height: 50px;
          text-decoration: none;
          position: relative;
        }
        .nav-links li a:hover:before {
          content: "";
          position: absolute;
          left: -7px;
          height: 5px;
          width: 5px;
          border-radius: 50%;
          background-color: var(--primary-color);
        }
        body.dark li a:hover:before {
          background-color: var(--text-color);
        }
        .menu-items li a i {
          font-size: 24px;
          min-width: 45px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--black-light-color);
        }
        .menu-items li a .link-name {
          font-size: 18px;
          font-weight: 400;
          color: var(--black-light-color);
          transition: var(--tran-05);
        }
        nav.close li a .link-name {
          opacity: 0;
          pointer-events: none;
        }
        .nav-links li a:hover i,
        .nav-links li a:hover .link-name {
          color: var(--primary-color);
        }
        body.dark .nav-links li a:hover i,
        body.dark .nav-links li a:hover .link-name {
          color: var(--text-color);
        }
        .menu-items .logout-mode {
          padding-top: 10px;
          border-top: 1px solid var(--border-color);
        }
        .menu-items .mode {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
        .menu-items .mode-toggle {
          position: absolute;
          right: 14px;
          height: 50px;
          min-width: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .mode-toggle .switch {
          position: relative;
          display: inline-block;
          height: 22px;
          width: 40px;
          border-radius: 25px;
          background-color: var(--toggle-color);
        }
        .switch:before {
          content: "";
          position: absolute;
          left: 5px;
          top: 50%;
          transform: translateY(-50%);
          height: 15px;
          width: 15px;
          background-color: var(--panel-color);
          border-radius: 50%;
          transition: var(--tran-03);
        }
        body.dark .switch:before {
          left: 20px;
        }
        
        .dashboard {
          position: relative;
          left: 250px;
          background-color: var(--panel-color);
          min-height: 100vh;
          width: calc(100% - 250px);
          padding: 10px 14px;
          transition: var(--tran-05);
        }
        nav.close ~ .dashboard {
          left: 73px;
          width: calc(100% - 73px);
        }
        .dashboard .top {
          position: fixed;
          top: 0;
          left: 250px;
          display: flex;
          width: calc(100% - 250px);
          justify-content: space-between;
          align-items: center;
          padding: 10px 14px;
          background-color: var(--panel-color);
          transition: var(--tran-05);
          z-index: 10;
        }
        nav.close ~ .dashboard .top {
          left: 73px;
          width: calc(100% - 73px);
        }
        .dashboard .top .sidebar-toggle {
          font-size: 26px;
          color: var(--text-color);
          cursor: pointer;
        }
        .dashboard .top .search-box {
          position: relative;
          height: 45px;
          max-width: 600px;
          width: 100%;
          margin: 0 30px;
        }
        .top .search-box input {
          position: absolute;
          border: 1px solid var(--border-color);
          background-color: var(--panel-color);
          padding: 0 25px 0 50px;
          border-radius: 5px;
          height: 100%;
          width: 100%;
          color: var(--text-color);
          font-size: 15px;
          font-weight: 400;
          outline: none;
        }
        .top .search-box i {
          position: absolute;
          left: 15px;
          font-size: 22px;
          z-index: 10;
          top: 50%;
          transform: translateY(-50%);
          color: var(--black-light-color);
        }
        .top img {
          width: 40px;
          border-radius: 50%;
        }
        .dashboard .dash-content {
          padding-top: 50px;
        }
        .dash-content .title {
          display: flex;
          align-items: center;
          margin: 60px 0 30px 0;
        }
        .dash-content .title i {
          position: relative;
          height: 35px;
          width: 35px;
          background-color: var(--primary-color);
          border-radius: 6px;
          color: var(--title-icon-color);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
        }
        .dash-content .title .text {
          font-size: 24px;
          font-weight: 500;
          color: var(--text-color);
          margin-left: 10px;
        }
        .dash-content .boxes {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .dash-content .boxes .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          border-radius: 12px;
          width: calc(100% / 3 - 15px);
          padding: 15px 20px;
          background-color: var(--box1-color);
          transition: var(--tran-05);
        }
        .boxes .box i {
          font-size: 35px;
          color: var(--text-color);
        }
        .boxes .box .text {
          white-space: nowrap;
          font-size: 18px;
          font-weight: 500;
          color: var(--text-color);
        }
        .boxes .box .number {
          font-size: 40px;
          font-weight: 500;
          color: var(--text-color);
        }
        .boxes .box.box2 {
          background-color: var(--box2-color);
        }
        .boxes .box.box3 {
          background-color: var(--box3-color);
        }
        .dash-content .activity .activity-data {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
        .activity .activity-data {
          display: flex;
        }
        .activity-data .data {
          display: flex;
          flex-direction: column;
          margin: 0 15px;
        }
        .activity-data .data-title {
          font-size: 20px;
          font-weight: 500;
          color: var(--text-color);
        }
        .activity-data .data .data-list {
          font-size: 18px;
          font-weight: 400;
          margin-top: 20px;
          white-space: nowrap;
          color: var(--text-color);
        }
        
        @media (max-width: 1000px) {
          nav {
            width: 73px;
          }
          nav.close {
            width: 250px;
          }
          nav .logo_name {
            opacity: 0;
            pointer-events: none;
          }
          nav.close .logo_name {
            opacity: 1;
            pointer-events: auto;
          }
          nav li a .link-name {
            opacity: 0;
            pointer-events: none;
          }
          nav.close li a .link-name {
            opacity: 1;
            pointer-events: auto;
          }
          nav ~ .dashboard {
            left: 73px;
            width: calc(100% - 73px);
          }
          nav.close ~ .dashboard {
            left: 250px;
            width: calc(100% - 250px);
          }
          nav ~ .dashboard .top {
            left: 73px;
            width: calc(100% - 73px);
          }
          nav.close ~ .dashboard .top {
            left: 250px;
            width: calc(100% - 250px);
          }
          .activity .activity-data {
            overflow-x: scroll;
          }
        }
        
        @media (max-width: 780px) {
          .dash-content .boxes .box {
            width: calc(100% / 2 - 15px);
            margin-top: 15px;
          }
        }
        @media (max-width: 560px) {
          .dash-content .boxes .box {
            width: 100%;
          }
        }
        @media (max-width: 400px) {
          nav {
            width: 0px;
          }
          nav.close {
            width: 73px;
          }
          nav .logo_name {
            opacity: 0;
            pointer-events: none;
          }
          nav.close .logo_name {
            opacity: 0;
            pointer-events: none;
          }
          nav li a .link-name {
            opacity: 0;
            pointer-events: none;
          }
          nav.close li a .link-name {
            opacity: 0;
            pointer-events: none;
          }
          nav ~ .dashboard {
            left: 0;
            width: 100%;
          }
          nav.close ~ .dashboard {
            left: 73px;
            width: calc(100% - 73px);
          }
          nav ~ .dashboard .top {
            left: 0;
            width: 100%;
          }
          nav.close ~ .dashboard .top {
            left: 0;
            width: 100%;
          }
        }
        
    
    
      
      
    JavaScript (script.js):
      
        
    
        const body = document.querySelector("body"),
        modeToggle = body.querySelector(".mode-toggle");
      sidebar = body.querySelector("nav");
      sidebarToggle = body.querySelector(".sidebar-toggle");
      
      let getMode = localStorage.getItem("mode");
      if (getMode && getMode === "dark") {
        body.classList.toggle("dark");
      }
      
      let getStatus = localStorage.getItem("status");
      if (getStatus && getStatus === "close") {
        sidebar.classList.toggle("close");
      }
      
      modeToggle.addEventListener("click", () => {
        body.classList.toggle("dark");
        if (body.classList.contains("dark")) {
          localStorage.setItem("mode", "dark");
        } else {
          localStorage.setItem("mode", "light");
        }
      });
      
      sidebarToggle.addEventListener("click", () => {
        sidebar.classList.toggle("close");
        if (sidebar.classList.contains("close")) {
          localStorage.setItem("status", "close");
        } else {
          localStorage.setItem("status", "open");
        }
      });
      
    
        
        

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects



  •   Pepsi Landing Page Using Html Css Javascript
    9 mins read

    Pepsi Landing Page Using Html Css Javascript

    codingmanish

    1 Nov 2023

    Read more

  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀