Moved forward on member page

src/html/member.html

@@ -1,21 +1,34 @@
-<div id="member" style="display: none">
+<div id="member" class="view-with-vertical-menu" style="display: none">
+  <ldp-router id="member-page-router" class="vertical-menu border-left" default-route="member-chat">
+    <ldp-route name="member-chat">
+      <i class="fa fa-comment-o" aria-hidden="true"></i>
+    </ldp-route>
+    <ldp-route name="member-profile">
+      <i class="fa fa-user" aria-hidden="true"></i>
+    </ldp-route>
+  </ldp-router>
+
   <hd-chat-window
+    id="member-chat" 
     data-authentication="anonymous"
     data-auto-login="true"
     data-bosh-service-url="https://conversejs.org/http-bind/"
-    data-debug="true"
+    data-debug="false"
     data-jid="nomnom.im"
     data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
     data-room-jid="anonymous@conference.nomnom.im">
   </hd-chat-window>
+
   <ldp-display 
-    id="profile" 
+    id="member-profile" 
     set-name="firstname, name-separator, lastname"
     value-name-separator="&nbsp;"
     set-location="city, city-separator, country"
     value-city-separator=",&nbsp;"
-    data-fields="avatar, name, location"
+    data-fields="avatar, name, location, email, number"
     widget-avatar="ldp-display-img"
+    widget-email="ldp-display-mailto"
+    widget-number="ldp-display-tel"
     bind-resources
   ></ldp-display>
 </div>

src/html/members.html

@@ -1,6 +1,6 @@
 <div id="members" class="view" style="display: none">
   <ldp-display 
-    id="profilesList" 
+    id="profiles-list" 
     data-src="http://localhost:8000/members/" 
     set-name="firstname, name-separator, lastname"
     value-name-separator="&nbsp;"

src/html/menu.html

@@ -1,9 +1,9 @@
 <nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex" id="navbar">
   <div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div>
 
-  <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" root="ldp-root" default-route="members">
-    <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="home">
-      <i class="fa fa-home" aria-hidden="true"></i>
+  <ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" default-route="members">
+    <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="search">
+      <i class="fa fa-search" aria-hidden="true"></i>
       <span class="d-none d-md-inline"> Home</span>
     </ldp-route>
     <ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch w-25 text-center text-md-left" name="members">

src/scss/_member.scss

@@ -0,0 +1,58 @@
+#member-chat {
+  #conversejs {
+    margin:   none;
+  }
+}
+
+#profiles-list,
+#member-profile {
+  img {
+    display:  block;
+  }
+
+  &, img {
+    width:      100%;
+    max-width:  320px;
+    min-width:  100%;
+  }
+
+  div[name="name"] {
+    padding-top:  10px;
+    font-weight:  bold;
+    font-size:    18px;
+  }
+
+  div[name="name"], 
+  div[name="location"] {
+    display:  flex;
+  }
+}
+
+#member-profile {
+  ldp-display-mailto,
+  ldp-display-tel {
+    display:    block;
+  }
+
+  a[name="email"],
+  a[name="number"] {
+    &::before {
+      font-family:      FontAwesome;
+      padding-right:    4px;
+      color:            black;
+    }
+  }
+  a[name="email"] {
+    &::before {
+      content:          "\f0e0";
+    }
+  }
+  a[name="number"] {
+    &::before {
+      content:          "\f10b";
+      font-size:        22px;
+      padding-left:     3px;
+      padding-right:    7px;
+    }
+  }
+}

src/scss/_members.scss

@@ -1,19 +1,6 @@
-#profilesList {
-  ldp-display {
-    img {
-      display:  block;
-    }
-
-    &, img {
-      width:      100%;
-      max-width:  320px;
-      min-width:  100%;
-    }
-
-    div[name="name"], 
-    div[name="location"] {
-      display:  flex;
-    }
+#profiles-list {
+  ldp-form {
+    background-color: #F3F3F3;
   }
 }
 

src/scss/_menu.scss

@@ -4,7 +4,7 @@
   #menu-title {
     font-family:  bebas;
     color:        $hd-color;
-    font-size:    17px;
+    font-size:    $menu-font-size;
   }
 
 
@@ -19,9 +19,38 @@
       text-decoration:  underline;
     }
     ldp-route[active] {
-      font-weight:    bold;
       border-bottom:  2px solid $hd-color;
       color:          $hd-color;
     }
   }
 }
+
+.vertical-menu {
+  position:             fixed;
+  z-index:              9998;
+  top:                  0px;
+  bottom:               0px;
+  right:                0px;
+  margin:               auto;
+  background-color:     white;
+  width:                $vertical-menu-width;
+  padding-top:          $menu-height;
+  display:              flex;
+  flex-direction:       column;
+  color:                $twitter-color;
+  font-size:            $menu-font-size;
+
+  ldp-route {
+    text-align:     center;
+    padding:        6px 0px;
+
+    &[active] {
+      border-left:  2px solid $hd-color;
+      color:          $hd-color;
+    }
+  }
+}
+
+.view-with-vertical-menu {
+  padding-right:    $vertical-menu-width;
+}

src/scss/_variables.scss

@@ -1,4 +1,6 @@
 $hd-color: rgb(253, 200, 21);
 $twitter-color: #1DA1F2;
 
-$menu-height : 50px;
+$menu-height:           50px;
+$menu-font-size:        17px;
+$vertical-menu-width:   50px;

src/scss/main.scss

@@ -4,6 +4,7 @@
 @import "home";
 @import "menu";
 @import "members";
+@import "member";
 @import "groupsList";
 @import "project";
 @import "projectsList";