fix: various menu fixes & improvements

src/styles/left-nav/_index.scss

@@ -1,10 +1,35 @@
 nav#main__menu {
   height: 100vh;
 
+  &.searching {
+    background-image: url('../images/magnify-white.svg');
+    background-color: var(--color-heading);
+    background-repeat: no-repeat;
+    background-position-x: 80px;
+    background-position-y: 150px;
+    background-size: 180px;
+  }
+
   @media (max-width: 768px) {
     min-height: calc(100vh - 50px);
   }
-  
+
+  .transparent-background {
+    background-color: transparent;
+
+    &.active[active] {
+      background-color: var(--color-third);
+    }
+
+    &.hover:hover:not([active]) {
+      background-color: #202B3C;
+    }
+
+    &.reverse {
+      background-color: var(--color-third);
+    }
+  }
+
   .unread {
     font-weight: bolder;
   }
@@ -35,18 +60,20 @@ nav#main__menu {
     }
 
     input {
-      background: var(--color-heading);
+      background: transparent;
       color: #D0D4DA;
       margin-top: 0;
       padding: 12px 13px;
       height: 50px;
 
       /* https://css-tricks.com/almanac/selectors/p/placeholder/ */
-      &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      &::-webkit-input-placeholder {
+        /* Chrome/Opera/Safari */
         color: #D0D4DA;
       }
 
-      &::-moz-placeholder { /* Firefox 19+ */
+      &::-moz-placeholder {
+        /* Firefox 19+ */
         color: #D0D4DA;
       }
 
@@ -102,7 +129,7 @@ nav#main__menu {
       top: 36px;
       text-align: end;
       width: 64%;
-  
+
       @media (max-width: 768px) {
         width: 100%;
         left: 0;
@@ -120,6 +147,7 @@ nav#main__menu {
       margin-left: 3px;
       opacity: 0.8;
       width: 12px;
+
       >div {
         line-height: 19px;
       }
@@ -177,6 +205,7 @@ nav#main__menu {
   .menu-header>div.transform-up~.badge {
     display: block;
   }
+
   /* End */
 
   /* The little cross icon on contacts' name appears or disapear + hover + styles */
@@ -188,36 +217,42 @@ nav#main__menu {
   }
 
   .sub-menu__contacts>div>solid-display {
+    height: 28px;
+    display: block;
 
     &:hover {
-      display: flex;
-
-      & *:not(button) {
-        background: #202B3C;
-      } 
 
       hubl-menu-fix-url-contact {
+        display: inline-block;
         width: 100%;
       }
 
+      hubl-counter {
+        padding-right: 25px;
+      }
+
+      solid-set-default[name="message"] {
+        margin-right: 9px;
+      }
+
       hubl-menu-contact-removed {
+        width: 38px;
+        height: 27.75px;
+        text-align: right;
+        position: relative;
+        top: -28px;
         display: block;
+        left: calc(100% - 47px);
         padding-top: 5px;
-        margin-left: auto;
-        padding-right: 10px;
-        padding-left: 10px;
 
-        .button-remove {
-          padding: 0;
-
-          button::before {
-            font-size: 18px;
-            color: white;
-          }
+        button::before {
+          font-size: 18px;
+          color: white;
         }
       }
     }
   }
+
   /* End */
 
   /* Modal to keep/remove a contact */
@@ -236,7 +271,8 @@ nav#main__menu {
       font-size: 16px;
     }
 
-    div, p {
+    div,
+    p {
       background: white !important;
     }
 
@@ -247,6 +283,7 @@ nav#main__menu {
       display: none;
     }
   }
+
   /* End */
 
   &.jsLeftMenu {
@@ -271,5 +308,4 @@ nav#main__menu {
       z-index: 3000;
     }
   }
-}
-
+}