--- /dev/null
+%menu-toggle {
+ position: relative;
+ padding: 0;
+ &:before {
+ content: "";
+ position: absolute;
+ top: 8px;
+ height: 5px;
+ border-top: 15px double #ddd;
+ border-bottom: 5px solid #ddd;
+ }
+}
+
+#no-menu {
+ @include size(width, $W_NONUMBERS_TINY);
+
+ @include min-screen($S_NONUMBERS_TINY_MAX) {
+ @include size(width, $W_NONUMBERS);
+ }
+
+ @include min-screen($S_NUMBERS) {
+ @include size(width, 44px);
+ }
+
+ /* Button for showing menu */
+ #menu-toggle-on {
+ @extend %menu-toggle;
+ display: block;
+ background: #191919;
+ color: #ddd;
+ text-align: center;
+ z-index: 100;
+ @include size(height, 44px);
+ padding: 0;
+
+ &:before {
+ left: 5px;
+ right: 5px;
+ @include min-screen(240px) {
+ left: 8px;
+ right: 8px;
+ }
+ }
+ }
+}
+
+#menu-toggle-off {
+ @extend %menu-toggle;
+ height: 24px;
+ &:before {
+ left: 25px;
+ right: 25px;
+ }
+}
+
+
+#menu {
+ display: none;
+ width: 80px;
+ height: 100%;
+}
+
+#menu, #no-menu {
+ z-index: 101;
+ position: fixed;
+ top: 0;
+ left: 0;
+ text-align: center;
+ line-height: 1.1em;
+ background: #191919;
+ color: #ddd;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+
+ a {
+ padding: 10px 0;
+ color: white;
+ display: block;
+ text-decoration: none;
+
+ &.active {
+ background: white;
+ color: black;
+ }
+
+ .label {
+ display: block;
+ font-size: 12px;
+ }
+ }
+ }
+
+ }
+}
+
+/* body class for showing menu */
+.menu-showed {
+ #menu {
+ display: block;
+ }
+ #no-menu {
+ display: none;
+ }
+}
+
+/* menu showing by default */
+@include min-screen($S_MENU) {
+ #menu {
+ display: block;
+ }
+ #no-menu {
+ display: none;
+ }
+ /* body class for hiding menu */
+ .menu-hidden {
+ #menu {
+ display: none;
+ }
+ #no-menu {
+ display: block;
+ }
+ }
+}