update: left-menu and header : ellipsis and alignment

src/header.pug

@@ -21,6 +21,14 @@ details#user-controls.notLoggedIn
   #user-controls__panel
     nav(role="user's functionalities menu")
       ul
+        li
+          sib-display#user-controls__profile(
+            fields='first_name, account.picture'
+            class-first_name='flex'
+            class-account.picture='avatar'
+            widget-account.picture='hubl-user-avatar'
+            bind-user
+          )
         if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
           li
             sib-link(next='profile') Mon profil

src/styles/base/header.scss

@@ -1,6 +1,6 @@
 #header {
-  max-height: 51px;
+  max-height: 50px;
-  height: 51px;
+  height: 50px;
   display: flex;
   align-items: center;
   background-color: var(--color-header-background);
@@ -76,7 +76,11 @@ sib-notifications {
   
     .sib-notifications__button {
       @include icon('bell');
-      font-size: 3rem;
+        font-size: 2.5rem;
+
+      @include breakpoint(lg) {
+        font-size: 3rem;
+      }
   
       &::before {
         margin-left: 0;
@@ -87,9 +91,14 @@ sib-notifications {
       }
   
       .sib-notifications__counter {
-        left: 2.1rem;
+        left: 2rem;
         position: absolute;
-        top: -3px;
+        top: 1px;
+
+        @include breakpoint(lg) {
+          left: 2.1rem;
+          top: -3px;
+        }
       }
     }
   
@@ -234,6 +243,7 @@ sib-notifications {
 }
 
 .mobile-menu-icon {
+
   display: none;
 
   @include breakpoint(sm) {

src/styles/base/menu-left.scss

@@ -116,7 +116,7 @@
 
           .project-name {
             display: block;
-            width: 100%;
+            width: calc(80vw - 50px);
 
             @include breakpoint(lg) {
               width: 150px;