How to left justify content displayed next to a sidebar

Question

I am attempting to use code from a Bootstrap 5.2 sidebar example I really like, but there's a small issue with it. When the sidebar is minimized, it displays a list of FontAwesome icons for each item in the sidebar menu, and when expanded, it shows a text description next to the icons. Here is what it looks like in collapsed mode:

And here is how it looks when it is expanded:

Here is the HTML and CSS code I'm using:

$(document).ready(function() {
  toggleSidebar();
});

function toggleSidebar() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('collapsed');
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: #34495e;
  transition: all 0.3s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
}

.sidebar-link {
  color: #ffffff;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
}

.sidebar-link:hover {
  color: #f7dc6f;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.logo-text {
  background: #d4e6f1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.3s ease;
}

.notification-badge {
  background: #ff6b6b;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
}

.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: 20px;
  transition: all 0.3s ease;
}

.collapsed~.main-content {
  margin-left: var(--sidebar-width-collapsed);
}

.toggle-btn {
  position: absolute;
  right: -15px;
  top: 20px;
  background: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.collapsed .toggle-btn {
  transform: rotate(180deg);
}

.collapsed .hide-on-collapse {
  opacity: 0;
  visibility: hidden;
}

.collapsed .logo-text {
  opacity: 0;
}

.collapsed .sidebar-link {
  text-align: center;
  padding: 1rem !important;
  margin: 4px 8px;
}

.collapsed .sidebar-link i {
  margin: 0 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="d-flex">
  <nav class="sidebar d-flex flex-column flex-shrink-0 position-fixed">
    <button class="toggle-btn" onclick="toggleSidebar()">
                <i class="fas fa-chevron-left"></i>
            </button>

    <div class="p-4">
      <h4 class="fw-bold mb-0 logo-text">ACME Widgets</h4>
    </div>

    <div class="nav flex-column">
      <a href="../default.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-home"></i>
                    <span class="hide-on-collapse">Site Home</span>
                </a>
      <a href="../producthome.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-box"></i>
                    <span class="hide-on-collapse">Products</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-chart-bar me-2"></i>
                    <span class="hide-on-collapse">Analytics</span>
                </a>
      <a href="#" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-users"></i>
                    <span class="hide-on-collapse">Customers</span>
                </a>
      <a href="../members/myaccount.aspx" class="d-flex justify-space-between sidebar-link text-decoration-none p-3">
                    <i class="fas fa-gear"></i>
                    <span class="hide-on-collapse">My Account</span>
                </a>
    </div>
  </nav>
</div>
<main class="main-content container-fluid">
  <h2>Welcome to ACME Widgets</h2>
  <p class="text-muted">
    Your trusted source for savings!
  </p>
</main>

There is still a bit of cleanup to do to make sure the icons and text in the menu options line up, but right now the issue is this. You can see where the content is set to account for the space the sidebar would occupy when expanded, but it leaves ugly unused whitespace when the sidebar is collapsed.

My question is, how can I modify this code so the content shifts right when the sidebar is toggled to expand but is left justified when the navbar is collapsed? The IDEAL answer to me would be to find a way to display the collapsed sidebar as it shows, but then change it to an overlay (offcanvas) menu when expanded so the rest of the page does not have to change at all.

Thanks all for any help on this!

Answer 1

Better approach: Try adding .collapsed class to the parent div with class d-flex so that width can be globalized which can also be used for other purposes and update your css like this:

:root{
--sidebar-width:250px; /* set width */
}
.collapsed {
--sidebar-width:100px; /* set width */
}

/* Things to remove */
.collapsed ~ .main-content {
    margin-left: var(--sidebar-width-collapsed);
}
.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

Also we don't need --sidebar-width-collapsed now.