SideBar out of nothing

by NesterOne

HTML

<body>
    <header>-=Header=-</header>
    <main>
        <div class="paddings">
            <article>Main article text</article>
            <aside> 
                
                <a href="" class="toggler">+</a>

                <section class="about">About</section>
                <section class="contacts">Contacts</section>
                <section class="categories">Categories</section>
            </aside>
        </div>
    </main>
    <footer>*Footer*</footer>
</body>

SCSS

main .paddings {
  display: flex;

  article {
    flex: 1;
  }

  aside {
    width: 300px;
  }
    
}

main aside {
  a.toggler {
    display: none;
  }
}

/* @media (max-width: 768px) {
  main aside {    
    a.toggler {
      display:  block;
      width:    2em;
      height:   2em;
      position: absolute;
      left:    -4em;
      top:      1em;
      the rest of the styles
    }
  }
} */

@media (max-width: 768px) {
  main aside {
    position:   absolute;
    top:        0;
    right:      0;
    min-height: 100%;
    transform:  translateX(300px);
    transition: transform .4s ease-out;

    &.open {
        transform: translateX(0px);
        &:before {
            content:    " ";
            display:    block;
            background: rgba(0,0,0,0.4);
            position:   absolute;
            height:     100%;
            width:      100vw;
            top:        0;
            right:      100%;
      }
    }
    
    a.toggler {
      display:  block;
      width:    2em;
      height:   2em;
      position: absolute;
      left:    -4em;
      top:      1em;
      /* the rest of the styles */
    }
  }
}