update: left-menu - responsive ok

src/menu-left.pug

@@ -100,7 +100,7 @@ sib-router#navbar-router(default-route='dashboard')
           div.menu-icon.icon-folder-alt
       sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
-        sib-display(
+        sib-display.circle-tab(
           bind-user
           nested-field='circles'
           fields='circle'
@@ -120,7 +120,7 @@ sib-router#navbar-router(default-route='dashboard')
         div.menu-icon.icon-envelope-letter
       sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
-        sib-display.nosub(
+        sib-display.nosub.message-tab(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
           search-fields="name"

src/styles/base/menu-left.scss

@@ -12,12 +12,12 @@
   }
 
   sib-router {
-  
     .menu-wrapper {
       &.is-closed {
         .sub-menu {
           display: none;
         }
+
         .menu-chevron {
           transform: rotate(180deg);
         }
@@ -92,48 +92,74 @@
 
     .sub-menu {
 
-      /* Specific styles for the "Projects" tab */
+      /* Ellipsis for project tab */
 
       .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
+          flex: 3;
+          
+          .project-customer,
+          .project-name {
+            box-sizing: border-box;
+            display: block;
+            width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              width: 150px;
+            }
+          }
 
           .project-customer,
           .project-name>div {
+
+            @include breakpoint(lg) {
               display: block;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
             }
+          }
+        }
+      }
 
-          .project-customer {
+      /* Ellipsis for circle tab */
-            width: 100%;
+
+      .circle-tab>div>sib-display>div {
+
+        sib-display-div[name='name'] {
+          flex: 3;
+
+          >div[name='name'] {
+            box-sizing: border-box;
+            padding-left: 0.2em;
+            width: calc(80vw - 76px);  /*76px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 150px;
+            }
+          }
+        }
+      }
+
+      /* Ellipsis for message tab */
+
+      .message-tab>div>sib-display>div>sib-display-div>div {
+        box-sizing: border-box;
+        width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
         
         @include breakpoint(lg) {
           width: 150px;
         }
       }
 
-          .project-name {
-            display: block;
-            width: calc(80vw - 50px);
-
-            @include breakpoint(lg) {
-              width: 150px;
-            }
-          }
-        }
-
-        hubl-counter {
-          margin-top: 16px;
-        }
-      }
-      /* End of specific styles of "Projects" tab */
-
       sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
         margin-left: 30px;
-        max-width: 87%;
+        max-width: 82%;
-        width: 87%;
+        width: 82%;
         display: block;
         background-color: var(--color-secondary);
         color: var(--color-grey-6);
@@ -153,15 +179,19 @@
         display: grid;
         grid-template-columns: auto 50% auto;
         grid-template-areas: "left middle right";
+
         >* {
           color: var(--color-grey-6);
         }
+
         >[data-id="prev"] {
           grid-area: left;
         }
+
         >[data-id="next"] {
           grid-area: right;
         }
+
         >span {
           grid-area: middle;
         }
@@ -170,6 +200,7 @@
       hubl-menu-publicprivate {
         display: inline-block;
         text-align: center;
+
         div {
           font-family: simple-line-icons;
           width: 20px;
@@ -190,7 +221,6 @@
         }
 
         &>sib-display {
-          
           &:last-child>div {
             margin-bottom: 2.2rem;
           }
@@ -198,6 +228,7 @@
           >div {
             color: var(--color-grey-6);
             cursor: pointer;
+
             >hubl-menu-fix-url-circle>sib-display>div,
             >hubl-menu-fix-url-project>sib-display>div {
               padding: 1rem 1rem 1rem 3rem;
@@ -219,25 +250,25 @@
       }
 
       &.menu-notification {
+
         >sib-display>div>sib-display>div>hubl-menu-fix-url-circle,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-project {
           flex: 1;
         }
+
         >sib-display>div>sib-display>div,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div,
         >sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div {
           display: flex;
-            sib-display-div {
+          justify-content: space-between;
-              flex: 3;
+        }
 
-              @include breakpoint(lg) {
-                max-width: 150px;
-              }
-            }
         hubl-counter {
+          background-color: turquoise;
           height: 20px;
           width: 20px;
           margin-right: 1em;
+
           div.counter:not([data-nb-unread="0"]) {
             text-align: center;
             display: block;
@@ -251,20 +282,6 @@
             color: var(--color-secondary);
           }
         }
-
-            sib-display-div {
-
-              @include breakpoint(lg) {
-                max-width: 150px;
-
-                >div[name='name'] {
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              }
-            }
-          }
       }
     }
 
@@ -278,9 +295,7 @@
 
 /* Styles for hovering (only on large screens) */
 #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div:hover,
-#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover,
+#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover {
-#main__menu sib-router .sub-menu.menu-notification>sib-display.nosub>div>sib-display>div:hover {
-  
   @include breakpoint(lg) {
     background-color: var(--color-secondary);
     color: var(--color-white);
@@ -291,7 +306,6 @@
     box-sizing: border-box;
     font-weight: normal;
 
-
     >hubl-menu-publicprivate {
       display: none;
     }
@@ -302,14 +316,15 @@
 
     /* Hover for projects */
     >sib-set-default[name='project']>.project-customer {
-      width: 250px;
-      white-space: break-spaces;
-      text-align: left;
       font-weight: normal;
+      padding-left: 1rem;
+      text-align: left;
+      width: 150px;
+      white-space: break-spaces;
     }
 
     sib-set-default[name='project']>.project-name {
-      padding-left: 0;
+      padding-left: 1rem;
       width: 100%;
 
       &>div {
@@ -320,14 +335,10 @@
 
     /* Hover for circles */
     >sib-display-div[name="name"] {
-      padding-left: 0;
       width: 100%;
-    }
 
-    /* Hover for private messages */
+      &>div {
-    sib-display-div {
+        padding-left: 1rem;
-
-      >div[name="name"] {
         white-space: normal;
       }
     }