refactor of menus

begin work on settings

src/scss/menu.scss

@@ -41,12 +41,40 @@
       display: block;
     }
   }
+
+  .side-menu-opener {
+    margin-top: 1px !important;
+  }
+
+  &.side-menu-big {
+    max-width: 100%;
+    height: auto;
+  }
+
+  &.side-menu-with-categories {
+    max-width: 290px;
+    height: 100vh;
+
+    .side-menu-categories {
+      display: block;
+      padding: 0;
+      width: 100%;
+    }
+
+    .side-menu-category {
+      padding: 10px 0;
+    }
+  }
+
+  &.side-menu-big, &.side-menu-with-categories {
+    height: auto;
+  }
 }
 
 #header {
   .side-menu-opener {
     margin-left: 0px;
-    margin-top: -1px;
+    margin-top: 0px;
   }
 }
 
@@ -111,20 +139,19 @@
   display: none;
 }
 
-#side-menu.hide-opener .side-menu-opener,
-.side-menu-opener.hide,
-#side-menu.hide {
-  display: none !important;
-}
-
 .side-menu-apps-list {
-  height: calc(100vh - 150px);
+  height: calc(100vh - 49px);
+  top: 49px;
   z-index: 2200;
   position: fixed;
-  top: 150px;
   width: 100%;
   max-width: 290px;
   overflow: auto;
+
+  &.side-menu-apps-list--with-logo {
+    height: calc(100vh - 160px);
+    top: 160px;
+  }
 }
 
 .side-menu-app-icon {
@@ -149,7 +176,8 @@
 
   a:hover,
   a:focus,
-  &:active {
+  &:active,
+  &.active {
     background: var(--side-menu-current-app-background-color, #444);
   }
 }
@@ -165,7 +193,6 @@
 }
 
 .side-menu-header {
-  height: 150px;
   width: 100%;
   z-index: 2300;
   max-width: 290px;
@@ -183,10 +210,6 @@
   max-width: 295px;
 }
 
-#side-menu.hide-opener .side-menu-logo {
-  margin-top: 10px;
-}
-
 #side-menu-loader {
   position: fixed;
   top: 0;
@@ -202,28 +225,24 @@
   }
 }
 
-#side-menu.side-menu-big,
-#side-menu.side-menu-with-categories {
-  max-width: 100%;
-  height: auto;
-}
+.side-menu-big, .side-menu-with-categories {
+  .side-menu-apps-list {
+    height: auto;
+    position: static;
+    max-width: 100vw;
+    overflow: auto;
+  }
 
-.side-menu-big .side-menu-header,
-.side-menu-with-categories .side-menu-header {
-  height: auto;
-}
+  .side-menu-app {
+    a {
+      padding: 7px 0 7px 7px;
+    }
+  }
 
-.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-with-categories .side-menu-app a {
-  padding: 7px 0 7px 7px;
+  .side-menu-app-icon {
+    vertical-align: middle;
+    margin-top: -2px;
+  }
 }
 
 .side-menu-categories-wrapper {
@@ -265,11 +284,6 @@
   stroke: var(--side-menu-text-color, #fff);
 }
 
-.side-menu-with-categories .side-menu-app-icon,
-.side-menu-big .side-menu-app-icon {
-  vertical-align: middle;
-  margin-top: -2px;
-}
 
 .side-menu-always-displayed {
   body {
@@ -287,12 +301,6 @@
   }
 
   .side-menu-apps-list {
-    height: 100vh;
-    top: 0;
-    overflow: hidden;
-  }
-
-  .side-menu-apps-list--with-settings {
     height: calc(100vh - 49px);
     top: 49px;
   }
@@ -331,32 +339,6 @@
     right: 0 !important;
     margin-left: 0 !important;
   }
-
-  .side-menu-search {
-    display: none;
-  }
-
-  #body-settings,
-  #body-settings.body-settings-side-menu {
-    overflow-x: visible;
-  }
-}
-
-#side-menu.side-menu-with-categories {
-  max-width: 290px;
-  height: 100vh;
-}
-
-.side-menu-with-categories {
-  .side-menu-categories {
-    display: block;
-    padding: 0;
-    width: 100%;
-  }
-
-  .side-menu-category {
-    padding: 10px 0;
-  }
 }
 
 .app-menu {
@@ -390,10 +372,6 @@
     height: 100vh;
   }
 
-  #side-menu.hide-opener.side-menu-big .side-menu-search {
-    float: none;
-  }
-
   .side-menu-categories {
     display: block;
     padding: 0;