Moved forward on member page

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";