How to fix sidebar collapse?

Question

I've make a sidebar on dashboard to handle the included items, succeed to build sidebar toggle, and sidebar collapse to show only icons without texts.

The error is menu icon is out of navigation bar and sidebar not working when minimize the screen after collapse like an empty space the screen like screenshot provided.

document.addEventListener("DOMContentLoaded", function() {
    const sidebar = document.querySelector(".dashboard-sidebar");
    const spacer = document.querySelector(".sidebar-spacer");
    const chevronIcon = document.querySelector("ion-icon[name='chevron-back-outline']");
    const sidebarLinks = document.querySelectorAll(".sidebar-link");
    const sidebarLinkTexts = document.querySelectorAll(".sidebar-link-text");
    const sidebarLogo = document.querySelector(".dashboard-logo");
    // Event listener for clicking on the chevron icon to toggle sidebar
    chevronIcon.addEventListener("click", function() {
        sidebar.classList.toggle("collapsed");
        if (sidebar.classList.contains("collapsed")) {
          spacer.style.width = "75px";
          sidebar.style.width = "75px";
          // Hide text labels
          sidebarLinkTexts.forEach(function(linkText) {
              linkText.style.display = "none";
          });
          // Hide sidebar logo when collapsed
          sidebarLogo.style.visibility = "hidden";
          chevronIcon.setAttribute("name", "chevron-forward-outline");
        } else {
          spacer.style.width = "220px";
          sidebar.style.width = "220px";
          // Show text labels
          sidebarLinkTexts.forEach(function(linkText) {
              linkText.style.display = "inline-block";
          });
          // Show sidebar logo when expanded
          sidebarLogo.style.visibility = "visible";
          // Change chevron icon to back when sidebar is expanded
          chevronIcon.setAttribute("name", "chevron-back-outline");
        }
    });
});

:root {
  --ff-inter: Inter, sans-serif;
  --background-color: hsl(0, 0%, 98%);  /* #f9f9f9 */
  --sec-color: hsl(240, 3%, 93%); /* #ededee */
  --input-background: hsl(0, 0%, 98%); /* #f9f9f9 */
  --default-color: hsl(240, 13%, 13%); /* #1d1d26 */
  --white-color:  hsl(0, 0%, 100%); /* WHITE */
  --gray-color: hsl(0, 0%, 50%); /* GRAY */
  --hover-color: hsl(240, 2%, 89%); /* #e3e3e4 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  color: var(--default-color);
  font-family: var(--ff-inter);
  background-color: var(--background-color);
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  letter-spacing: -0.28px;
  font-weight: 500;
  line-height: 140%;
  font-size: 14px;
}

.link:actie {
  outline: 0;
}

<nav role="navigation" class="dashboard-sidebar w-nav-menu">
  <div class="sidebar-logo-section">
    <a href="/" class="dashboard-logo w-nav-brand w--current">
      <img src="logo.png" alt="" class="sidebar-logo">
    </a>
    <div class="sidebar-collapse">
      <ion-icon name="chevron-back-outline" role="img" class="md hydrated"></ion-icon>
    </div>
  </div>
  <div class="sidebar-menu">
    <div class="sidebar-menu-section bottom-divider">
      <a href="/" aria-current="page" class="sidebar-link w-inline-block w--current">
        <ion-icon name="home-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Dashboard</div>
      </a>
    </div>
    <!-- Legal Documents -->
    <div class="sidebar-menu-section">
      <!-- Terms of Service -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="document-text-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Terms of Service</div>
      </a>
      <!-- Privacy Policy -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="layers-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Privacy Policy</div>
      </a>
      <!-- Cookies Policy -->
      <a href="/" class="sidebar-link w-inline-block">
        <ion-icon name="swap-vertical-outline" class="sidebar-icon md hydrated" role="img"></ion-icon>
        <div class="sidebar-link-text">Cookies Policy</div>
      </a>
    </div>
  </div>
</nav>