I am trying to create a left side-bar that toggles state(show/hide)

States

1. Hidden - Sidebar is hidden. Content fills the page width.
2. Showing - Sidebar pushes content to the right.
3. Shown - Sidebar has a width x and content has a width calc(100vw - x)
4. Hiding - Content pushes sidebar to the left

This is what I have done, but that transition seems a bit off and it feels like margin-left is not the way to go with the transition.

document.addEventListener('DOMContentLoaded', function () {

  const WIDTH = '250px';
  let opened = false;

  const button = document.querySelector('#toggleSidebar');
  const sidebar = document.querySelector('.sidebar__container .sidebar');
  const sidebarContent = document
                         .querySelector('.sidebar__container .sidebar__content');

  button.addEventListener('click', function () {
    opened = !opened;

    if (opened) {
      sidebar.style.width = WIDTH;
      sidebarContent.style.marginLeft = WIDTH;
      sidebar.classList.add('sidebar--open');
    } else {
      sidebar.style.width = '0px';
      sidebarContent.style.marginLeft = '0px';
      sidebar.classList.remove('sidebar--open');
    }

  });
  
});

.sidebar__container {
  display: flex;
  height: 150px;
  position: relative;
}

.sidebar__container .sidebar {
  position: absolute;
  left: -100px;
  height: 100%;
  background: lightblue;
  transition: 0.6s;
}

.sidebar__container .sidebar--open {
  transition: 0.6s;
  left: 0;
}

.sidebar__container .sidebar__content {
  background-color: lightcoral;
  flex: 1;
  transition: 0.6s;
}

<button id="toggleSidebar">Toggle</button>
<div >
    <aside >
        Side Bar Menu
    </aside>
    <section >
        Main Content
    </section>
</div>

Any pointers on how to do it will be helpful.

P.S: I cannot set the width on CSS as I am trying to make it a shareable component

CodePudding user response：

Fiddled a little bit, and this seems more smooth (Chrome):

document.addEventListener('DOMContentLoaded', function () {

  const WIDTH = '250px';
  let opened = false;

  const button = document.querySelector('#toggleSidebar');
  const sidebar = document.querySelector('.sidebar__container .sidebar');

  button.addEventListener('click', function () {
    opened = !opened;
    sidebar.style.flexBasis = opened ? WIDTH : '0px';
  });
  
});

.sidebar__container {
  display: flex;
  height: 150px;
  position: relative;
}

.sidebar__container .sidebar {
  flex: 0;
  height: 100%;
  background: lightblue;
  overflow:hidden;
  transition: 0.6s;
}

.sidebar__container .sidebar__content {
  background-color: lightcoral;
  flex: 1;
  transition: 0.6s;
}

<button id="toggleSidebar">Toggle</button>
<div >
    <aside >
        Side Bar Menu
    </aside>
    <section >
        Main Content
    </section>
</div>

The key is to use flex-basis instead of left/margin-left, since your container is already flex.