Скрытие сайдбара на маленьких экранах?

Question

[Денис]

Суть такова:

• большие экраны - резиновый контент и широкий (фиксированный) сайдбар
  
• средние экраны - резиновый контент и узкий (фиксированный) сайдбар
  
• маленькие экраны - резиновый контент и кнопка показа сайдбара
  

С контентом всё понятно а с сайдбаром запутался. На первых двух экранах сайдбар фиксирован и находится справа, меняется только ширина. На самых маленьких он скрыт, но по нажатии кнопки разворачивается и занимает ширину 100%.
Мой код правильный? visibility и opacity использую для плавного раскрытия.

.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

[Cyber_bober]

Хз, а в чем суть? что-то не работает?

Comments

[Денис]

Суть в том, это правильно?) Так то как бы работает.