menu {

height: 100vh;

}

@include media-breakpoint-down(lg) {

#menu {
  width: 200px;
  left: -200px;
  position: fixed;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;

  -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
          transition: all .3s ease-in;
}
body.open #menu {
  left: 0;
}
/* MAIN PAGE */
.page-wrap {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

body.open .page-wrap {
  margin-left:  200px;
}

}

.menu-toggle–btn-container {

position: absolute;
left: 15px;
z-index: 1;
background: transparent;
margin: 0;
padding: 0;

.open {
  display: none;

  @include media-breakpoint-down(lg) {
    display: block;
  }
}

.close {
  display: none;
}

}

.open .menu-toggle {

position: fixed !important;

&.open {
  display: none;
}

&.close {
  display: block;
}

}

.menu-separator {

width: 60%;
opacity: 0.1;

}

light, dark {

display: block;
cursor: pointer;

&:hover {
  color: inherit;
}

}

light {

display: none;

}

data-theme=“dark”

{

#light {
  display: block;
}

#dark {
  display: none;
}

}