CODEWITHSUNDEEP
javascripthtmlcss
theFrontEndDev
theFrontEndDev

Reputation: 973

Sidebar Toggling - Main content does not stretch to full width when sidebar toggled

I have a layout with sidebar and main content inside a parent element called wrapper and a button to toggle sidebar which is absolute positioned, relative to sidebar. But the main-content is not staying in full width when the sidebar closed. I was able to find out that giving the sidebar as fixed would solve the problem, But I don't want it to be fixed, Is there a way to achieve this without giving position fixed for sidebar. I have used translate for toggling the sidebar.

Jsfiddle - https://jsfiddle.net/wu1zfg35/

Here is the css. working code can be found in js fiddle link

body {
  margin: 0;
}

.wrapper{
  display: flex;
  height: 100vh;
}

.sidebar {
  position: relative;
  /* position: fixed;  */
  width: 350px;
  height: 100%;
  background-color: red;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -webkit-transform: translate3d(-100%, 0px, 0px);
  transform: translate3d(-100%, 0px, 0px);
}

.main-content {
  width: 100%;
  background-color: yellow;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
}

.hide-customize-tab {
  position: absolute;
  display: flex;
  top: 50%;
  right: -25px;
  align-items: center;
  justify-content: center;
  height: 25px;
  width: 25px;
  background-color: black;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  cursor: pointer;
}

.hide-customize-tab .close-button {
  display: none;
  height: 10px;
  width: 7px;
}
.hide-customize-tab .open-button {
  height: 10px;
  width: 7px;
}

.wrapper.sidebar-opened .sidebar {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);

}

.wrapper.sidebar-opened .sidebar .hide-customize-tab {
  right: -15px;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .open-button {
  display: none;
}

.wrapper.sidebar-opened .sidebar .hide-customize-tab .close-button {
  display: block;
}

.wrapper.sidebar-opened .main-content {
  /* margin-left: 350px; */
  width: calc(100% - 350px);
}

Upvotes: 0

Views: 784

Answers (1)

Nico Shultz
Nico Shultz

Reputation: 1872

Remove the width: 350px; from .sidebar and add it to .wrapper.sidebar-opened .sidebar

So the code wil be

.sidebar {
    width: 0;
}

.wrapper.sidebar-opened .sidebar {
    width: 350px;
}

Upvotes: 1

Related Questions