Responsive Dashboard with Sidebar

Create a user-friendly dashboard with responsive sidebar navigation. Learn how to design a dashboard layout that adapts seamlessly to different screen sizes.

Create a responsive dashboard with a sidebar for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a dashboard layout, ensuring it adapts seamlessly to various screen sizes and devices.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the responsive dashboard with sidebar. This snippet includes the foundational structure, styles, and basic functionality needed to create a visually appealing and functional dashboard. Select the code, click the copy button, and paste it into your HTML file where you want the dashboard to appear.

Step 2: Link CSS and JavaScript Files

  • Ensure the necessary CSS and JavaScript files are linked correctly in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles:
  • <link rel="stylesheet" href="styles.css">
  • Include the following <script> tag at the end of your <body> section to import the JavaScript file:
  • <script src="script.js"></script>
  • Replace "styles.css" and "script.js" with the actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

  • Personalize the dashboard layout to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the sidebar's behavior, content, and interaction features. Experiment with different layouts, responsive techniques, and dashboard components to create a seamless and engaging user experience.

By following these steps, you can implement and customize a responsive dashboard with a sidebar on your website using HTML, CSS, and JavaScript. Make the dashboard component your own by adjusting styles, adding interactive features, and optimizing for responsiveness to create a robust and user-friendly dashboard experience.

Code Explanation

HTML Code

Burger Menu Button
<button type="button" class="burger" onclick="toggleSidebar()">
  <img class="burger-avatar" src="https://www.frontendcomponent.com/favicon.ico" />
  <span class="burger-icon"></span>
</button>
  • <button> Element: This is a button element (type="button") styled with the class burger.
  • Image (<img>): Inside the button, there's an image with the class burger-avatar, displaying an avatar or icon.
  • Span (<span>): Another element with the class burger-icon, likely used for styling purposes or to indicate the menu icon.
Overlay
<div class="overlay"></div>
  • <div> Element: This is a generic <div> with the class overlay. It's typically used to create a semi-transparent overlay that covers the entire viewport when the sidebar is open, preventing interaction with the rest of the page.
Sidebar (<aside>)
<aside class="sidebar">
  <img class="sidebar-avatar" src="https://www.frontendcomponent.com/favicon.ico" />
  <div class="sidebar-username">frontendjoe</div>
  <div class="sidebar-role">Frontend Developer</div>
  <nav class="sidebar-menu">
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-home.svg" />
      <span>Home</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-settings.svg" />
      <span>Settings</span>
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-accounts.svg" />
      <span>Profile</span>
    </button>
  </nav>
  <nav class="sidebar-menu bottom">
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/master/sidebar-2/assets/icon-lock.svg" />
      <span>Sign Out</span>
    </button>
  </nav>
</aside>
  • <aside> Element: Represents a sidebar section in HTML, typically used for content related to the main content but outside of it.
Sidebar Content:
  • Avatar (<img>): Displays an avatar image for the user or the sidebar itself (class="sidebar-avatar").
  • Username and Role:
    • <div class="sidebar-username">frontendjoe</div>: Displays the username "frontendjoe".
    • <div class="sidebar-role">Frontend Developer</div>: Indicates the user's role as a "Frontend Developer".
  • Menus (<nav class="sidebar-menu">):
    • These are navigation sections within the sidebar.
    • Each <nav> contains a list of <button> elements, each representing a menu item.
    • Each button has an <img> for an icon and a <span> for text.
Bottom Menu:
  • <nav class="sidebar-menu bottom">: This likely represents a separate section at the bottom of the sidebar, possibly for actions like signing out.
  • Contains a single <button> with an icon and text ("Sign Out").
Dashboard Heading
<h2>Dashboard</h2>
  • This <h2> heading ("Dashboard") is placed outside the sidebar and serves as a heading for the main content area, distinct from the sidebar navigation.

CSS Code

Global Styles
* {
  box-sizing: border-box;
}
  • * Selector: Applies box-sizing: border-box; to all elements, ensuring padding and border are included in the element's total width and height.
body {
  margin: 0;
  background: #202124;
  font-family: "Poppins";
  color: #f9f9f9;
}
  • body Element: Resets margin to 0, sets a dark background color (#202124), uses the "Poppins" font for text, and sets text color to #f9f9f9.
button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
  • button Element: Removes default button styles (background, border, padding) and sets the cursor to pointer for better UX.
Overlay
.overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

body.open .overlay {
  opacity: 1;
  visibility: visible;
}
  • .overlay Class: Creates a full-screen overlay for modal effects.
  • position: fixed; z-index: 1;: Fixes overlay position above other elements.
  • background: rgba(0, 0, 0, 0.6);: Semi-transparent black background.
  • backdrop-filter: blur(3px);: Applies blur effect behind the overlay.
  • opacity: 0; visibility: hidden;: Initially hidden.
  • .overlay transitions opacity and visibility when .open class is applied to body.
Burger Menu Button
.burger {
  position: fixed;
  z-index: 3;
  top: 20px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (width >= 500px) {
  .burger {
    display: none;
  }
}
  • .burger Class: Styles the burger menu button.
  • position: fixed;: Fixed position on the top right.
  • z-index: 3;: Above other elements.
  • display: flex; align-items: center; gap: 6px;: Flex layout for icon and text.
  • Media query hides the burger menu button on screens wider than 500px.
Sidebar
.sidebar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  filter: blur(10px);
  transition-property: filter, visibility, opacity;
  transition-duration: 0.6s;
}
@media (width >= 330px) {
  .sidebar {
    transition-property: translate;
  }
}
@media (width >= 400px) {
  .sidebar {
    translate: 100% 0;
    width: 180px;
    transition: 0.4s;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}
@media (width >= 500px) {
  .sidebar {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}
body.open .sidebar {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}
  • .sidebar Class: Defines the sidebar styles.
  • position: absolute; z-index: 2;: Positioned absolutely on the top right.
  • display: flex; align-items: center; flex-direction: column;: Flex container for items.
  • width: 100%; height: 100%;: Full height and width.
  • padding: 40px 20px;: Padding inside the sidebar.
  • background: #000000;: Background color (black).
  • Initial state (opacity: 0; visibility: hidden; filter: blur(10px);).
  • Media queries adjust sidebar width and transition properties based on screen width.
  • .open class on body transitions sidebar to visible state (opacity: 1; visibility: visible; filter: blur(0);).
Sidebar Content
.sidebar-avatar {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}
.sidebar-username {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.96);
}
.sidebar-role {
  margin: 0 0 20px;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.57);
}
.sidebar-menu {
  display: grid;
  width: 100%;
  padding: 10px 0;
  padding-left: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (width >= 350px) {
  .sidebar-menu {
    padding-left: 0;
  }
}
.sidebar-menu > button {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Poppins";
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1;
  padding: 10px 20px;
}
.sidebar-menu > button > img {
  width: 17px;
  height: 17px;
}
.sidebar-menu > button > span {
  color: #f9f9f9;
  font-size: 11px;
  translate: 0 1px;
}
  • Sidebar Content Styles: Styles avatar, username, role, and menu items within the sidebar.
  • Adjusts sizes, colors, fonts, and spacing to create a cohesive design for the sidebar navigation.

JavaScript Code

const toggleSidebar: This declares a constant named toggleSidebar. Constants are variables whose values cannot be changed once they are assigned. Here, toggleSidebar is a function.

Arrow Function (() => { ... }):
  • Arrow functions are a concise way to write JavaScript functions. They are commonly used for anonymous functions and for functions that are passed as arguments to other functions.
document.body.classList.toggle("open"):
  • document.body refers to the <body> element of the current HTML document.
  • .classList is a property of DOM elements that returns a DOMTokenList representing the class attribute of the element. It allows you to manipulate classes on the element.
  • .toggle("open") is a method of classList. It toggles the presence of the class "open" on the <body> element.
    • If the class "open" is not present, it adds it.
    • If the class "open" is already present, it removes it.