fix #63: add a new side menu with categories

css/sideMenu.css

@@ -162,23 +162,23 @@
     transition-property: width;
 }
 
-#side-menu.side-menu-big {
+#side-menu.side-menu-big, #side-menu.side-menu-with-categories {
     max-width: 100%;
     height: auto;
 }
 
-.side-menu-big .side-menu-header {
+.side-menu-big .side-menu-header, .side-menu-with-categories .side-menu-header {
     height: auto;
 }
 
-.side-menu-big .side-menu-apps-list {
+.side-menu-big .side-menu-apps-list, .side-menu-with-categories .side-menu-apps-list {
     height: auto;
     position: static;
     max-width: 100vw;
     overflow: auto;
 }
 
-.side-menu-big .side-menu-app a {
+.side-menu-big .side-menu-app a, .side-menu-with-categories .side-menu-app a {
     padding: 7px 0 7px 7px;
 }
 
@@ -217,7 +217,7 @@
     stroke: var(--side-menu-text-color, #fff);
 }
 
-.side-menu-big .side-menu-app-icon {
+.side-menu-with-categories .side-menu-app-icon, .side-menu-big .side-menu-app-icon {
     vertical-align: middle;
     margin-top: -2px;
 }
@@ -271,6 +271,20 @@
     transform: translateX(calc(-100% + 50px)) !important;
 }
 
+#side-menu.side-menu-with-categories {
+    max-width: 290px;
+    height: 100vh;
+}
+
+.side-menu-with-categories .side-menu-categories {
+    display: block;
+    padding: 0;
+}
+
+.side-menu-with-categories .side-menu-category {
+    padding: 10px 0;
+}
+
 @media screen and (max-width: 1024px) {
     #side-menu.side-menu-big {
         max-width: 290px;