Sidebar pure css sidebar with 4 position, animation and hide options

The sidebar has 4 modes of collapsing behavior (collapse, expand, hide, hide-expand), also can be pined in 4 directions ( left / right and also top/bottom - independency of header or footer )

Just add your mode class before aside tag to your input or just to div if you using React or other JS library.

Collapse is steering by input type checkbox tag or active class.

Collapse .side-collapse

On this mode, the sidebar will be expanded by default and collapse by checking input (first click of label or add .active class)

Expand .side-expand

On this mode, the sidebar will collapse by default and expand by checking input (first click of label or add .active class)

Hide .side-hide

On this mode, the sidebar will hide (width: 0) by default and expand by checking input (first click of label or add .active class)

Hide Expand .side-hide-expand

On this mode, the sidebar will expand by default and hide (width: 0) by checking input (first click of label or add .active class)

      
				@side: .side; // tag 'aside' or class or both
@side-top: top;
@side-bottom: bottom;
@side-left: left;
@side-right: right;
@side-collapse: side-collapse;  // sidebar will be collapsed - set expand on ready (unchecked)
@side-expand: side-expand;   // sidebar will be expand - set collapse on ready (unchecked)
@side-hide: side-hide; // sidebar will be hide - set expand on ready (unchecked)
@side-hide-expand: side-hide-expand; // sidebar will be expand - set hide on ready (unchecked)
@side-backdrop: side-backdrop;
@side-close: side-close;
@side-open: side-open; // element for open sidebar (label) when is collapse and not visible;
@side-animated: animated;
@side-hoverable: hoverable;
@side-hover-backdrop: hover-backdrop;
@side-focusable: focusable;
@side-focus-backdrop: focus-backdrop;
@side-cover: cover;
@side-uncover-hover: uncover-hover;
@side-uncover-focus: uncover-focus;
@side-overflow: overflow;
@side-absolute: absolute;
@side-relative: relative;
@side-static: static;
@side-float: float;
@side-full-height: side-full-height;
@side-expanded-hide: expanded-hide;
@side-expanded-show: expanded-show;
@side-collapsed-hide: collapsed-hide;
@side-collapsed-show: collapsed-show;
      
    

      
				@tabs-pages: 10;

@device-width-side-collapse: @tablet-portrait-max-width; // in that device width sidebar will be automatic collapsed, set 0 to off
@device-width-side-hide: @mobile-max-width; // in that device width sidebar (side-hide) will automatic hide, set 0 to off
@device-width-side-show-full: @device-width-side-hide;

@table-mobile-max-width: @tablet-portrait-max-width;
      
    

      
				@side-full-width: 90%;
@side-animate-time: 1s;
@side-hoverable-offset-width: 5px;
@side-hoverable-offset-height: 5px;
@side-backdrop-color: rgba(0, 0, 0, 1);
@side-backdrop-opacity: 0.5;
@side-width-default: 200px;
@side-height-default: 150px;
@side-collapse-width: 50px;
@side-collapse-height: @content-max-height/@base-steps;
      
    

      
				.side-collapsed() {
}

.side-expanded() {
}

.side-expanded-full() {
}

.side-hovered() {
}

.side-focused() {

}

.side-open-style() {
}

.side-open-left-style() {
}

.side-open-right-style() {
}

.side-open-top-style() {
}

.side-open-bottom-style() {
}