From 120af5b3224527b88c027f6ddaabb66a41e66423 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 19 May 2020 19:09:59 +0200
Subject: [PATCH] feature: add search bar

---
 src/menu-left.pug              |  4 ++++
 src/styles/base/menu-left.scss | 29 +++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index 2d261c0..24165f3 100644
--- a/src/menu-left.pug
+++ b/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
 
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index e4699d6..282bc13 100644
--- a/src/styles/base/menu-left.scss
+++ b/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;
       }