feature: left-menu: refactor + cleaning

src/menu-left.pug

@@ -28,6 +28,9 @@ solid-widget(name='hubl-menu-fix-url-circle')
       solid-display(
         data-src='${value}'
         fields='status, name, jabberID, badge'
+        class-status='sub-menu-icon'
+        class-name='sub-menu-name ellipsis'
+        class-badge='sub-menu-badge'
         value-badge='${value}'
         widget-status='hubl-menu-publicprivate'
         widget-badge='hubl-counter'
@@ -42,8 +45,10 @@ solid-widget(name='hubl-menu-fix-url-project')
       solid-display(
         data-src='${value}'
         fields='status, project(customer.name, name, jabberID), badge'
+        class-status='sub-menu-icon'
         class-name='project-name'
         class-customer.name='project-customer'
+        class-badge='badge'
         value-badge='${value}'
         widget-status='hubl-menu-publicprivate'
         widget-jabberID='hubl-menu-jabberid'
@@ -95,13 +100,13 @@ solid-router#navbar-router(default-route='dashboard')
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
-      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
+      div.sub-menu.menu-notification
         div#loader-projects.loader.loader-menu
           div
           div
           div
           div
-        solid-display.project-tab(
+        solid-display.project-tab.segment.lg-full(
           bind-user
           nested-field='projects'
           fields='project'
@@ -124,13 +129,13 @@ solid-router#navbar-router(default-route='dashboard')
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
-      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
+      div.sub-menu.menu-notification
         div#loader-circles.loader.loader-menu
           div
           div
           div
           div
-        solid-display.circle-tab(
+        solid-display.circle-tab.segment.lg-full(
           bind-user
           nested-field='circles'
           fields='circle'
@@ -150,18 +155,21 @@ solid-router#navbar-router(default-route='dashboard')
         div.menu-chevron.segment.lg-auto.float-left
           div.menu-icon.icon-arrow-up
       solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
-      div.sub-menu.menu-notification.segment.margin-left-small.margin-right-small
+      div.sub-menu.menu-notification
         div#loader-messages.loader.loader-menu
           div
           div
           div
           div
-        solid-display.nosub.message-tab(
+        solid-display.nosub.message-tab.segment.lg-full(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
+          class-name='sub-menu-name'
+          class-badge='sub-menu-badge'
           loader-id='loader-messages'
           search-fields="name"
           search-label-name=""
+          search-class-name="search-field"
           data-trans="search-label-name=menuLeft.search"
           search-widget-name="hubl-search-users"
           widget-name='solid-display-div'
@@ -172,7 +180,6 @@ solid-router#navbar-router(default-route='dashboard')
           next='messages'
           paginate-by='10'
         )
-    div.divider
 
   solid-route(name='admin', hidden)
   solid-route.menu(name='profile', hidden)

src/styles/base/main.scss

@@ -247,6 +247,49 @@
   }
 }
 
+/* General styles for pagination */
+nav#main__menu solid-display.nosub>nav {
+  display: grid;
+  grid-template-areas: "left middle right";
+  grid-template-rows: auto;
+  text-align: center;
+  overflow: hidden;
+
+  >[data-id="prev"] {
+    grid-area: left;
+    line-height: 1;
+  }
+  >[data-id="next"] {
+    grid-area: right;
+    line-height: 1;
+  }
+  >span {
+    grid-area: middle;
+  }
+  button {
+    color: transparent;
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+  }
+}
+
+/* Styles for pagination in the left menu */
+nav#main__menu solid-display.nosub>nav {
+  grid-template-columns: auto 30% auto;
+
+  >span {
+    font-size: 18px;
+  }
+  button {
+    font-size: 15px;
+    color: white;
+  }
+}
+
+
+
 /* Fix for solid-dashboard fixture */
 solid-dashboard section {
   padding: 1rem !important;

src/styles/base/menu-left.scss

@@ -1,7 +1,4 @@
 #main__menu {
-  /*background-color: var(--color-menu-background);
-  color: var(--color-menu-text);*/
-  /*transition: flex-basis 0.5s ease-in-out;*/
   width: 256px;
 
   &.open {
@@ -13,11 +10,8 @@
   }
 
   solid-router {
+    /* Chevron visible on large screen + rotation */
     .menu-wrapper {
-
-      .menu {
-        border-bottom: none;
-      }
       .menu-icon.icon-arrow-up {
         visibility: hidden;
       }
@@ -29,25 +23,19 @@
           .sub-menu {
             display: none;
           }
-
           .menu-chevron {
             transform: rotateX(180deg);
           }
         }
       }
     }
+    /* end */
 
-    /*solid-link {
+    /* General styles for the main tabs */
-      width: 100%;
-    }*/
-
     .menu {
       cursor: pointer;
       display: flex;
       align-items: center;
-      /*flex-direction: row-reverse;*/
-      /*font-weight: bold;
-      padding: 1.2rem;*/
 
       &[active] {
         background-color: var(--color-third);
@@ -57,25 +45,11 @@
           background-color: var(--color-heading);
           color: white;
         }
-
-        /*.menu-notification>solid-display>div:first-child {
-          background-color: var(--color-menu-badge-background);
-        }*/
-
         &+.divider {
           display: none;
         }
       }
-
       .menu-icon {
-        /*align-items: center;
-        display: flex;
-        justify-content: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        font-size: 1.7rem;
-        width: 3.2em;*/
-
         &::before {
           border-radius: 100%;
           height: 1.9em;
@@ -83,37 +57,114 @@
           width: 1.9em;
         }
       }
-
-      /*.menu-label {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        flex-shrink: 0;
-        font-weight: 600;
-        justify-content: center;
-        letter-spacing: 0.017rem;
-        text-transform: uppercase;
-        width: 8em;
-      }*/
-
-      /*.menu-chevron {
-        align-items: center;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-      }*/
-
-      >solid-display {
-        display: block;
-      }
     }
+    /* End */
 
+
+    /* Styles for the submenus */
     .sub-menu {
 
-      /* Ellipsis for project tab */
+      .project-tab,
+      .circle-tab,
+      .message-tab {
 
+        /* Spaces and cursor */
+        hubl-menu-fix-url-project>solid-link>solid-display>div,
+        hubl-menu-fix-url-circle>solid-link>solid-display>div,
+        >div>solid-display>div>solid-display-div[name="name"] {
+          display: flex;
+          justify-content: space-between;
+          padding: 6px 10px 6px 23px;
+          cursor: pointer;
+        }
+
+        &>div>solid-display {
+          display: block;
+
+          &:last-child>div {
+            margin-bottom: 2.2rem;
+          }
+          &[fields="project(customer.name, name), badge"]>div {
+            padding: 0;
+          }
+        }
+
+        /* when a subtab is [active] */
+        solid-display[active]>div {
+          background-color: var(--color-third);
+          color: var(--color-heading);
+          font-weight: bold;
+        }
+
+        /* Styles for the search input */
+        .search-field>input {
+          margin-left: 30px;
+          margin-bottom: 10px;
+          width: calc(80vw - 71px);
+          display: block;
+          background-color: var(--color-heading);
+          color: white;
+          border: 1px solid white;
+          border-radius: 3px;
+          padding-left: 9.5px;
+          height: 27px;
+          opacity: 0.8;
+
+          @include breakpoint(lg) {
+            margin: auto;
+            margin-bottom: 10px;
+            width: auto;
+          }
+        }
+
+        /* Styles for the small icon */
+        .sub-menu-icon {
+          width: 16px;
+
+          div {
+            font-family: simple-line-icons;
+            padding-right: 2px;
+          }
+        }
+
+        /* Styles for the name */
+        .sub-menu-name {
+          flex: 3;
+
+            &>div {
+            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+              @include breakpoint(lg) {
+                width: 150px;
+              }
+            }
+
+          &.ellipsis>div {
+  
+            @include breakpoint(lg) {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+
+        /* Styles for the counter */
+        .sub-menu-badge div.counter:not([data-nb-unread="0"]) {
+          text-align: center;
+          display: block;
+          background-color: var(--color-third, gray);
+          border-radius: 50%;
+          font-size: 12px;
+          line-height: 20px;
+          width: 20px;
+          height: 20px;
+          padding-bottom: 0;
+          color: var(--color-heading);
+        }
+      }
+
+      /* Ellipsis for project tab */
       .project-tab>div>solid-display>div:nth-child(1) {
 
         solid-set-default[name='project'] {
@@ -123,7 +174,8 @@
           .project-name {
             box-sizing: border-box;
             display: block;
-            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+            width: calc(80vw - 96px);
+            /*96px = padding of the element + width and margin of counter */
 
             @include breakpoint(lg) {
               width: 150px;
@@ -142,200 +194,6 @@
           }
         }
       }
-
-      /* Ellipsis for circle tab */
-      .circle-tab>div {
-        width: 100%;
-
-        &>solid-display {
-          display: block;
-          margin-top: 15px;
-          margin-left: 15px;
-        }
-        &>solid-display:first-child {
-          margin-top: 0;
-        }
-        hubl-menu-publicprivate {
-          width: 16px;
-          background: black;
-
-        }
-      }
-
-      .circle-tab>div>solid-display>div {
-
-        solid-display-div[name='name'] {
-          flex: 3;
-          background: brown;
-
-          >div[name='name'] {
-            box-sizing: border-box;
-            padding-left: 0.2em;
-            width: calc(80vw - 96px);  /*96px = 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 {
-        width: 100%;
-
-        &>solid-display {
-          display: block;
-          margin-top: 15px;
-          margin-left: 15px;
-        }
-        &>solid-display:first-child {
-          margin-top: 0;
-        }
-      }
-
-      .message-tab>div>solid-display>div>solid-display-div>div {
-        box-sizing: border-box;
-        width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
-
-        @include breakpoint(lg) {
-          width: 150px;
-        }
-      }
-
-      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
-        margin-left: 30px;
-        margin-bottom: 10px;
-        width: calc(80vw - 71px);
-        display: block;
-        background-color: var(--color-heading);
-        color: white;
-        border: 1px solid white;
-        border-radius: 3px;
-        padding-left: 9.5px;
-        height: 27px;
-        opacity: 0.8;
-
-        @include breakpoint(lg) {
-          margin: auto;
-          width: auto;
-        }
-      }
-
-      solid-display.nosub>nav {
-        text-align: center;
-        overflow: hidden;
-        display: grid;
-        grid-template-columns: auto 50% auto;
-        grid-template-areas: "left middle right";
-
-        >* {
-          color: var(--color-white);
-        }
-
-        >[data-id="prev"] {
-          grid-area: left;
-        }
-
-        >[data-id="next"] {
-          grid-area: right;
-        }
-
-        >span {
-          grid-area: middle;
-        }
-      }
-
-      hubl-menu-publicprivate {
-        display: inline-block;
-        /*text-align: center;*/
-        width: auto;
-
-        div {
-          font-family: simple-line-icons;
-          /*width: 20px;
-          font-size: 0.8em;
-          padding-top: 0.1em;*/
-          padding-right: 2px;
-        }
-      }
-
-      /*>solid-display.nosub>div>solid-display>div {
-        padding: 1rem 1rem 1rem 3rem;
-      }*/
-
-      solid-display>div {
-
-        .create {
-          /*color: white;*/
-          /*margin: 1rem 1rem 2.2rem 3.2rem;*/
-        }
-
-        &>solid-display {
-          &:last-child>div {
-            margin-bottom: 2.2rem;
-          }
-
-          >div {
-            color: var(--color-white);
-            cursor: pointer;
-
-            /*>hubl-menu-fix-url-circle>solid-link>solid-display>div,*/
-            >hubl-menu-fix-url-project>solid-link>solid-display>div {
-              padding: 1rem 1rem 1rem 3rem;
-            }
-          }
-
-          &[fields="project(customer.name, name), badge"]>div {
-            padding: 0;
-          }
-        }
-
-        &>solid-display[active]>div,
-        &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
-        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
-          background-color: var(--color-third);
-          color: var(--color-heading);
-          font-weight: bold;
-        }
-      }
-
-      &.menu-notification {
-
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
-          flex: 1;
-        }
-
-        >solid-display>div>solid-display>div,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        hubl-counter {
-          /*height: 20px;
-          width: 20px;*/
-          /*margin-right: 1em;*/
-
-          div.counter:not([data-nb-unread="0"]) {
-            text-align: center;
-            display: block;
-            background-color: var(--color-third, gray);
-            border-radius: 50%;
-            font-size: 12px;
-            line-height: 20px;
-            width: 20px;
-            height: 20px;
-            padding-bottom: 0;
-            color: var(--color-heading);
-          }
-        }
-      }
     }
 
     .divider {
@@ -344,4 +202,4 @@
       opacity: 0.2;
     }
   }
-}
+}