Hiding the sidebar on small screens?

Question

css

The gist is this:

• big screens - rubber content and wide (fixed) sidebar
  
• medium screens - rubber content and narrow (fixed) sidebar
  
• small screens - rubber content and sidebar show button
  

Everything is clear with the content, but I got confused with the sidebar. On the first two screens, the sidebar is fixed and located on the right, only the width changes. On the smallest ones, it is hidden, but when the button is pressed, it expands and takes up a width of 100%.
Is my code correct? visibility and opacity I use for smooth disclosure.

.cd-side-nav {
  position: absolute;
  width: 100%;
  background-color: #4f5a6e;
  visibility: hidden;
  opacity: 0;
    
  &.cd-side-nav-visible {
    opacity: 1;
    visibility: visible;
  }
    
  @include MQ(S) { //экраны до 768px
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    width: $sidebar-width-M;//100px
    visibility: visible;
    opacity: 1;
  }
        
  @include MQ(M) { //экраны до 992px
    width: $sidebar-width-L; //250px
    //наследование свойств от @include MQ(S)
  }
}

Answer 1

Huh, what's the point? something doesn't work?