sidebar animated toggler

by Alexandru Gatea

HTML

<div id="sidebar">
  <div class="sidebar-content">
    <div class="sidebar-content-inner">
      <form action="" id="form">
        <div class="form-content">
          <div class="form-category">
            <div class="form-category-title">
              Filter by region
            </div>
            <div class="form-category-content">
              <div class="checkbox">
                <input type="checkbox" id="europe">
                <label for="europe">Europe</label>
              </div>
              <div class="checkbox">
                <input type="checkbox" id="NA">
                <label for="NA">North America</label>
              </div>
              <div class="checkbox">
                <input type="checkbox" id="SA">
                <label for="SA">South America</label>
              </div>
              <div class="checkbox">
                <input type="checkbox" id="asia">
                <label for="asia">Asia</label>
              </div>
              <div class="checkbox">
                <input type="checkbox" id="Africa">
                <label for="Africa">Africa</label>
              </div>
              <div class="checkbox">
                <input type="checkbox" id="anz">
                <label for="anz">Australia and New Zealand</label>
              </div>
              <div class="search">
                <div class="search-custom">
                  <input type="text" id="custom-search" placeholder="Type desired region">
                  <input type="submit" value="⌕">
                </div>

                <p class="search-custom-area">Select custom area</p>
              </div>

            </div>
          </div>

          <div class="form-category">
            <div class="form-category-title">
              Filter by something else
            </div>
            <div class="form-category-content">
              <div class="radio">
                <input type="radio" name="something" id="smth">
                <label...

SCSS

* {
  box-sizing: border-box;
}

body {
  position: relative;
  height: 100vh;

} 

.bg {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  -webkit-transition : -webkit-filter 0.25 ease-in-out;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;

    background-image: url("https://miro.medium.com/max/1400/1*cX1Ve9_YQ2fQwjgA04yZ-g.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  
} 

#sidebar.opened + .bg {
  filter: blur(3px);
} 

 @import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway:wght@400;500;600;700;900&display=swap');


$brand-dark: #0e0727;
$brand-dark-medium: #221c3a;
$brand-light: #a59fb8;
$brand-accent: #42B98B;

$brand-title: 'Raleway',
sans-serif;
$brand-text: 'Lato',
sans-serif;

$sidebar-width: 400px;
$animation: cubic-bezier(.71, -0.26, .29, 1.27);
$sidebar-padding: 30px;

$toggler-width: 44px;
$toggler-right-offset: $toggler-width - 2;
$toggler-height: 400px;
$toggler-dot-size: 8px;
$dot-offset: $toggler-dot-size * 1.5;




 #sidebar {
  background: $brand-dark;
  width: 5px;
  height: 100vh;
  position: fixed;
  z-index: 999;
  transition: width 0.25s $animation;
  box-shadow: 5px 0px 25px 0px rgba(0, 0, 0, 0.3);

  &.opened {
    width: $sidebar-width;
  }
}


.sidebar-content {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;


  &-inner {
    min-width: $sidebar-width;
    height: 100%;
  }
}

#form {
  color: $brand-light;
  height: 100%;

  .form {
    display: flex;

    &-content {
      flex-direction: column;
      height: calc(100% - 100px);
      overflow-y: auto;
      width: calc(#{$sidebar-width} + 20px);
      padding: $sidebar-padding calc(#{$sidebar-padding} + 20px) $sidebar-padding $sidebar-padding;
    }

    &-category {

      padding-bottom: 30px;
      margin-bottom: 60px;

 ...