feature: add search bar

src/menu-left.pug

@@ -115,12 +115,16 @@ nav#main__menu.jsLeftMenu
           sib-display.nosub(
             data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
             fields='name, chatProfile.jabberID, badge'
+            search-fields="name"
+            search-label-name="Rechercher..."
+            search-widget-name="sib-form-placeholder-text"
             widget-name='sib-display-div'
             widget-badge='hubl-counter'
             widget-chatProfile.jabberID='hubl-menu-jabberid'
             action-badge='badge'
             order-by='username'
             next='messages'
+            paginate-by='10'
           )
       div.divider
 

src/styles/base/menu-left.scss

@@ -125,6 +125,35 @@
       }
       /* End of specific styles of "Projects" tab */
 
+      sib-display.nosub>sib-form[fields="name"]>sib-form-placeholder-text>input {
+        margin: auto;
+        display: block;
+        background-color: var(--color-secondary);
+        color: var(--color-grey-6);
+        border: 1px solid var(--color-grey-4);
+        border-radius: 3px;
+        padding: 4px;
+      }
+
+      sib-display.nosub>nav {
+        text-align: center;
+        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;
+        }
+      }
+
       >sib-display.nosub>div>sib-display>div {
         padding: 1rem 1rem 1rem 3rem;
       }