Welcome to this tutorial on Create a Collapsible Sidebar Navigation with JavaScript. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

<div class="app-wrapper">
  <nav class="js-sidebar">
    <div class="sidebar-top">
      <span class="logo-text">DevMenu</span>
      <button id="collapse-btn"><i class="fas fa-chevron-left"></i></button>
    </div>
    <div class="menu-items">
      <a href="#" class="menu-item">
        <i class="fas fa-compass"></i>
        <span>Explore</span>
      </a>
      <a href="#" class="menu-item">
        <i class="fas fa-star"></i>
        <span>Favorites</span>
      </a>
      <a href="#" class="menu-item">
        <i class="fas fa-history"></i>
        <span>History</span>
      </a>
      <a href="#" class="menu-item">
        <i class="fas fa-cog"></i>
        <span>Settings</span>
      </a>
    </div>
  </nav>
  <main class="app-main">
    <h1>Welcome Back!</h1>
    <p>Toggle the sidebar using the button.</p>
  </main>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

CSS Styling

Style your component using the following CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #fafafa;
}

.app-wrapper {
  display: flex;
  min-height: 100vh;
}

.js-sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid #eaeaea;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 2px 0 10px rgba(0,0,0,0.02);
}

.js-sidebar.is-collapsed {
  width: 70px;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eaeaea;
  height: 70px;
  box-sizing: border-box;
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.js-sidebar.is-collapsed .logo-text {
  opacity: 0;
}

#collapse-btn {
  background: #f0f0f0;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: transform 0.3s;
}

.js-sidebar.is-collapsed #collapse-btn {
  transform: rotate(180deg);
}

.menu-items {
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #666;
  padding: 12px;
  border-radius: 8px;
  transition: 0.2s;
  white-space: nowrap;
}

.menu-item:hover {
  background: #f5f5f5;
  color: #000;
}

.menu-item i {
  font-size: 20px;
  min-width: 30px;
  text-align: center;
  margin-right: 10px;
}

.js-sidebar.is-collapsed .menu-item span {
  display: none;
}

.app-main {
  flex: 1;
  padding: 50px;
}

h1 { margin-top: 0; color: #222; }
p { color: #777; }

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

document.addEventListener('DOMContentLoaded', () => {
  const sidebar = document.querySelector('.js-sidebar');
  const collapseBtn = document.getElementById('collapse-btn');

  if(sidebar && collapseBtn) {
    collapseBtn.addEventListener('click', () => {
      sidebar.classList.toggle('is-collapsed');
    });
  }
});

Feel free to customize this code for your own projects!