feature: left-menu - main tabs and project sub-tab

src/styles/left-nav/_index.scss

@@ -1,3 +1,83 @@
 nav {
   height: calc(100vh - 72px);
-}
+
+  .unread {
+    font-weight: bolder;
+  }
+
+  solid-route.menu,
+  solid-link.menu,
+  div.menu {
+  
+    .icon {
+      padding: 8px;
+      border-radius: 50%;
+    }
+    &:hover .icon,
+    &[active] .icon {
+      color: white;
+      background: var(--color-heading);
+    }
+    &[active]+.divider {
+      display: none;
+    }
+  }
+
+
+  /* Styles for the small icon */
+  .sub-menu-icon {
+    margin-left: 3px;
+    margin-right: 3px;
+    opacity: 0.8;
+    vertical-align: top;
+
+    div {
+      font-family: simple-line-icons;
+      font-size: 12px;
+    }
+  }
+
+  .sub-menu-name {
+    margin-right: 14px;
+  }
+
+
+
+
+  /* Ellipsis for project tab */
+  .project-tab {
+
+    hubl-menu-fix-url-project {
+      display: block;
+    }
+
+    .project-customer,
+    .project-name {
+      display: block;
+      width: calc(80vw - 96px);
+
+      @media(min-width: 1024px) {
+        width: calc(100% - 10px);
+      }
+    }
+
+    .project-customer,
+    .project-name>div {
+
+      @media(min-width: 1024px) {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+
+  .divider {
+    height: 1px;
+    background-color: #D7DBE0;
+    opacity: 0.2;
+  }
+}
+