Problems in creating a sidebar through toggle

user_19171988 0
Viewed 40

well i was trying to create a sidebar through toggle and it is not opening the sidebar. Is it possible to create the sidebar with simple javascript that i applied. Please check the javascript and let me know if this is possible in this way. Link of the work is https://codepen.io/TA0011/pen/WNJQEmW. Kindly see the work and rectify it.

CODE:

function toggleSidebar(menu) {
  menu.classList.toggle('open');
}
header {
  padding: 0 20px;
  background: coral;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  height: 50px;
  display: flex;
  justify-content: space-between;
  z-index: 1001;
}

#sidebar-toggle .toggle-circle {
  margin: 0;
  cursor: grab;
  background: rgba(0, 136, 169, 1);
  border-radius: 50%;
  margin-top: 5px;
}

#sidebar-toggle .toggle-circle div {
  width: 18px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  transition: all 0.3s ease 0s;
}

.open .bar4 {
  -webkit-transform: rotate(-45deg) translate(-4.5px, 5.5px);
  transform: rotate(-45deg) translate(-4.5px, 5.5px);
}

.open .bar5 {
  opacity: 0;
}

.open .bar6 {
  -webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
  transform: rotate(45deg) translate(-5.5px, -5.5px);
}

.open .sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
}

.sidebar {
  display: flex;
  position: fixed;
  height: 100vh;
  top: 58px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}

.sidebar-header {
  display: flex;
  padding: 5px;
}

.sidebar-header img {
  flex-wrap: wrap;
  pointer-events: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
}

.sidebar-header h6 {
  display: flex;
  justify-content: flex-end;
}


/*--Media-queries--*/

@media(max-width: 768px) {
  #sidebar-toggle .toggle-circle {
    margin-top: 2px;
    margin-right: -15px;
  }
  #sidebar-toggle .toggle-circle div {
    height: 2px;
  }
  #sidebar-toggle .toggle-circle .bar4 {
    height: 2.5px;
  }
  .sidebar {
    top: 41px;
    width: 70%;
  }
}
<header>
  <div id="sidebar-toggle" onclick="toggleSidebar(this)">
    <div class="toggle-circle">
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
    </div>
  </div>
</header>
<div class="sidebar" id='mySidebar' onclick="toggleSidebar(this)">
  <div class="sidebar-container">
    <div class="sidebar-header">
      <img src="images/4.jpeg">
      <h6>Umann goswami</h6>
    </div>
  </div>
</div>
<div id="main">
  hello world
</div>
</section>

css html javascript
1 Answers

Problem

  1. Your toggle was getting the open class, but your sidebar didn't
  2. If you want to select an element with both classes it has to be .open.sidebar and not .open .sidebar. .open .sidebar will search for an element that has a parent with class .open.

I changed your js to this:

// grab elements
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')

// listen for click on the toggle
toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  // toggle classes in both sidebar and toggle
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}

And your css to this:

.open.sidebar {
  display: flex;
}
.sidebar {
  display: none;
}


const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
header {
  padding: 0 20px;
  background: coral;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  height: 50px;
  display: flex;
  justify-content: space-between;
  z-index: 1001;
}

#sidebar-toggle .toggle-circle {
  margin: 0;
  cursor: grab;
  background: rgba(0, 136, 169, 1);
  border-radius: 50%;
  margin-top: 5px;
}

#sidebar-toggle .toggle-circle div {
  width: 18px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  transition: all 0.3s ease 0s;
}

.open .bar4 {
  -webkit-transform: rotate(-45deg) translate(-4.5px, 5.5px);
  transform: rotate(-45deg) translate(-4.5px, 5.5px);
}

.open .bar5 {
  opacity: 0;
}

.open .bar6 {
  -webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
  transform: rotate(45deg) translate(-5.5px, -5.5px);
}

.open.sidebar {
  display: flex;
}

.sidebar {
  display: none;
  position: fixed;
  height: 100vh;
  top: 58px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}

.sidebar-header {
  display: flex;
  padding: 5px;
}

.sidebar-header img {
  flex-wrap: wrap;
  pointer-events: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
  width: 40px;
  float: none;
  display: block;
  object-fit: fill;
  height: 40px;
}

.sidebar-header h6 {
  display: flex;
  justify-content: flex-end;
}


/*--Media-queries--*/

@media(max-width: 768px) {
  #sidebar-toggle .toggle-circle {
    margin-top: 2px;
    margin-right: -15px;
  }
  #sidebar-toggle .toggle-circle div {
    height: 2px;
  }
  #sidebar-toggle .toggle-circle .bar4 {
    height: 2.5px;
  }
  .sidebar {
    top: 41px;
    width: 70%;
  }
}
<header>
  <div id="sidebar-toggle">
    <div class="toggle-circle">
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
    </div>
  </div>
</header>
<div class="sidebar" id='mySidebar'>
  <div class="sidebar-container">
    <div class="sidebar-header">
      <img src="images/4.jpeg">
      <h6>Umann goswami</h6>
    </div>
  </div>
</div>
<div id="main">
  hello world
</div>
</section>

user_50895670
Related