Dual Sidebar

Enhance content organization on your website with a dual sidebar layout. Learn how to implement a dual sidebar design to effectively display and navigate through various sections.

Create a dual sidebar layout for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing two sidebars, ensuring they work harmoniously to provide a functional and visually appealing navigation structure.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the dual sidebar layout. This snippet includes the foundational structure, styles, and basic functionality needed to create a dual sidebar setup. Select the code, click the copy button, and paste it into your HTML file where you want the dual sidebars 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 dual sidebar layout to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the sidebars' behavior, content, and interaction features. Experiment with different layouts, responsive techniques, and sidebar components to create a seamless and engaging user experience.

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

Code Explanation

HTML Code

Sidebar Toggle Button
<button type="button" class="burger" onclick="toggleSidebar()"></button>
  • <button>: This is an HTML button element used for user interaction.
  • type="button": Specifies that the button is a regular push button, with no default behavior.
  • class="burger": Assigns the CSS class burger to the button. This likely styles the button to resemble a hamburger menu icon.
  • onclick="toggleSidebar()": Specifies an inline event handler that calls the JavaScript function toggleSidebar() when the button is clicked. This function typically toggles the visibility of the sidebar.
Toolbar (<aside class="toolbar">)
<aside class="toolbar">
  <nav>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-home.svg" />
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-settings.svg" />
    </button>
    <button type="button">
      <img src="https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-4/assets/icon-folders.svg" />
    </button>
  </nav>
</aside>
  • <aside>: This is an HTML5 <aside> element, which is used for content that is tangentially related to the content around it, such as sidebars or pull quotes.
  • class="toolbar": Assigns the CSS class toolbar to the <aside> element, indicating it is a toolbar section.
  • <nav>: This HTML5 element represents a section of navigation links.
  • Buttons Inside <nav>:
    • Each <button> represents an actionable item within the toolbar.
    • Inside each button, there is an <img> element with a src attribute pointing to an SVG icon image. These icons likely represent different functions or links related to the application or website.
Sidebar (<aside class="sidebar">)
<aside class="sidebar">
  <nav>
    <!-- Several buttons with icons and corresponding text spans -->
  </nav>
</aside>
  • <aside>: Another <aside> element, likely serving as the main sidebar navigation container.
  • class="sidebar": Assigns the CSS class sidebar to the <aside> element, indicating it is the sidebar section.
  • <nav>: Another <nav> element, representing a section of navigation links specific to the sidebar.
  • Buttons Inside <nav>:
    • Each <button> represents a navigation item within the sidebar.
    • Inside each button, there is an <img> element with a src attribute pointing to an SVG icon image.
    • Following the <img> element, there is a <span> element containing text corresponding to the navigation item represented by the button.

CSS Code

Universal Box Sizing
* {
  box-sizing: border-box;
}
  • Sets the box-sizing property to border-box for all elements on the page.
  • This ensures that padding and border are included in the element's total width and height, simplifying layout calculations.
Body Styling
body {
  background: #202124;
}
  • Sets the background color of the <body> element.
Button Reset
button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
  • Buttons have transparent backgrounds, no borders, no padding, and a pointer cursor, making them visually clean and interactive.
Fixed Positioning for Elements
.toolbar,
.sidebar,
.burger {
  position: fixed;
  top: 0;
}
  • These elements remain fixed as the user scrolls the page, typically used for persistent navigation or control panels.
Toolbar Styling
.toolbar {
  z-index: 3;
  left: 0;
  width: 72px;
  height: 100%;
  background: #361d74;
  transition: 0.4s;
}
  • z-index: Places the toolbar above other elements (z-index: 3).
  • left: Positions the toolbar at the left edge of the viewport.
  • width: Sets the width of the toolbar to 72px.
  • height: Extends the toolbar to cover the full height of the viewport.
  • background: Sets a background color (#361d74).
  • transition: Applies a smooth transition effect over 0.4 seconds.
Sidebar Styling
.sidebar {
  z-index: 2;
  left: 72px;
  width: 200px;
  height: 100%;
  background: #442496;
  transition: 0.4s;
}
  • z-index: Positions the sidebar below the toolbar (z-index: 2).
  • left: Initially positions the sidebar 72px from the left edge of the viewport.
  • width: Sets the width of the sidebar to 200px.
  • height: Extends the sidebar to cover the full height of the viewport.
  • background: Sets a background color (#442496).
  • transition: Applies a smooth transition effect over 0.4 seconds.
Responsive Behavior for Sidebar
@media (width < 500px) {
  .sidebar {
    translate: -100% 0;
  }

  body.open .sidebar {
    translate: 0 0;
  }
}
  • @media (width < 500px): Media query for viewport width less than 500px.
  • `.sidebar { translate: -100% 0; }: Moves the sidebar completely off-screen to the left.
  • body.open .sidebar { translate: 0 0; }: Moves the sidebar back to its original position when the body has the class open.
Hamburger Menu Button Styling
.burger {
  z-index: 1;
  left: 72px;
  display: grid;
  place-items: center;
  width: 72px;
  height: 64px;
  background: url(https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-1/assets/icon-burger.svg) no-repeat center;
}

body.open .burger {
  left: auto;
  right: 0;
  background: url(https://raw.githubusercontent.com/frontend-joe/css-sidebars/e5f64f89b88c4d86e4939f22267d5fe8505b6714/sidebar-1/assets/icon-close.svg) no-repeat center;
}
  • z-index: Positions the burger button below both the toolbar and sidebar (z-index: 1).
  • left: Initially positions the burger button 72px from the left edge of the viewport.
  • display: Uses grid layout to center content vertically and horizontally.
  • width and height: Sets dimensions of the button.
  • background: Sets a background image (hamburger icon) centered within the button.
  • .burger transitions to a close icon (background changes) when .open is added to the body.
Media Query for Hiding Burger Button
@media (width >= 500px) {
  .burger {
    display: none;
  }
}
  • Hides the burger button when the viewport width is 500px or larger.
  • Ensures the burger button is not displayed on larger screens where space for a hamburger menu might not be necessary.
Button and Icon Styling
.sidebar > nav > button > span {
  border-radius: 4px;
  color: #f9f9f9;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 200;
  letter-spacing: 2px;
  line-height: 1;
  transition: 0.4s;
}

button > img {
  width: 20px;
  height: 20px;
}

.toolbar img {
  width: 28px;
  height: 28px;
}
  • Styles the text inside buttons in the sidebar navigation.
  • Sets styles for images inside buttons (width and height).
  • Adjusts styles for images inside the toolbar (width and height).

JavaScript Code

Function Declaration:
  • const toggleSidebar = () => { ... };
  • This declares a constant named toggleSidebar.
  • It assigns an arrow function (() => { ... }) to it.
Arrow Function Syntax:
  • () => { ... }
  • Arrow functions are a concise way to write functions in JavaScript.
  • They are anonymous functions (functions without a name) defined using the => syntax.
Function Body: document.body.classList.toggle("open");
  • document.body refers to the <body> element of the current HTML document.
  • .classList is a property of document.body that returns a collection of the class attributes of the element as a DOMTokenList object.
  • .toggle("open") is a method of classList that toggles the presence of the specified class ("open") on the <body> element.

How toggleSidebar Function Works:

  • When the toggleSidebar function is called (typically bound to an event like a button click), it toggles the presence of the class "open" on the <body> element.
  • If the <body> element already has the class "open", it will be removed.
  • If the <body> element does not have the class "open", it will be added.
  • This class toggle operation is useful for implementing UI behaviors like opening and closing a sidebar menu or modal without needing to directly manipulate inline styles or manage complex state variables in JavaScript.