feature/Add user image and name to sidebar

Author: LewisYoul

app/assets/stylesheets/_sidebar.scss

@@ -2,43 +2,39 @@
 
 .sidebar {
   &--wrapper {
-    // background-color: snow;
-    // height: 400px;
-    // border: 1px solid lightgrey;
-    // margin: 16px;
-    position: sticky;
-    position: -webkit-sticky;
-    top: 16px;
-    // display: flex;
-    // flex-direction: column;
-    // background-color: white;
-    border-radius: 2px;
-    // box-shadow: 0 4px 9px lightgrey;
-    // padding: 16px 0px 16px 0px;
-    // margin-top: 15px;
+    position: fixed;
+    top: 52px;
     margin-right: 15px;
   }
+
+  &--new-snippet {
+    color: $color-primary;
+  }
 }
 
 .menu-button {
   &--wrapper {
     display: flex;
-    height: 90px;
     width: 180px;
   }
 
+  &--icon {
+    
+  }
+
+  &--name {
+    margin-left: 18px;
+  }
+
   &--item {
     flex: 1;
+    display: flex;
+    align-items: center;
     text-align: center;
     color: $color-black;
     font-weight: 100;
     font-size: 15px;
-    // border: 1px solid lightgrey;
-    // border-radius: 4px;
-    // background-color: white;
-    // box-shadow: 0 4px 9px lightgrey;
-    // margin-right: 8px;
-    padding: 16px 0px;
+    padding:8px;
     text-decoration: none;
 
     &:hover {

app/assets/stylesheets/base.scss

@@ -14,7 +14,7 @@ pre {
   margin: 16px 18px;
 }
 
-h2, span, p { font-weight: 100; }
+h2, h3, span, p { font-weight: 100; }
 
 a {
   text-decoration: none;
@@ -44,12 +44,12 @@ input[type=text] {
   height: 52px;
   max-height: 52px;
   background-color: $color-white;
-  border-bottom: 1px solid $color-light;
   position: relative;
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
   z-index: 2;
+  box-shadow: 0 1px 4px lightgrey;
 }
 
 #header-wrapper {

app/assets/stylesheets/card.scss

@@ -4,9 +4,10 @@
   &--container {
     background-color: $color-white;
     border-radius: 2px;
-    border: 1px solid $color-light;
+    // border: 1px solid $color-light;
     margin: 16px 0px;
     padding: 16px 8px;
+    box-shadow: 0 1px 4px lightgrey;
 
     &-padding {
       padding: 16px;

app/views/layouts/application.html.erb

@@ -23,9 +23,11 @@
       <alert></alert>
       <popover></popover>
 
+      <%= render partial: 'shared/topbar' %>
+
       <div id="app">
         <div style="display: flex;">
-          <div style="flex: 1">
+          <div style="flex: 1; margin-right: 16px;">
             <%= render 'shared/sidebar' %>
           </div>
           <div style="flex: 4;">

app/views/shared/_sidebar.html.erb

@@ -1,32 +1,34 @@
 <div class="sidebar--wrapper">
-  <card style="text-align: center;">
-    <span>SNIPPET.IO</span>
-  </card>
   <% if user_signed_in? %>
     <card>
+      <div style="text-align: center;">
+        <img src="https://media-exp1.licdn.com/dms/image/C4E03AQG0MUNjxFvBTw/profile-displayphoto-shrink_200_200/0?e=1593648000&v=beta&t=WnnJ_Q6MpQFur5Uev2iqeLAnoX6Rdb1Bv6RoAijK3tA" style="border-radius: 50%; display: block; margin: 0 auto;" width=80">
+        <h3 style="margin: 8px 0px 0px 0px;"><%= current_user.name %></h2>
+      </div>
+      <div class="horizontal-line"></div>
       <div class="menu-button--wrapper">
         <%= link_to root_path, class: request.fullpath == root_path ? 'menu-button--item-active' : 'menu-button--item' do %>
-          <img src="/icons/home.svg" width="28">
-          <span style="display: block;  margin-top: 8px;">Home</span>
-        <% end %>
-        <%= link_to new_snippet_path, class: request.fullpath == new_snippet_path ? 'menu-button--item-active' : 'menu-button--item' do %>
-          <img src="/icons/edit.svg" width="28">
-          <span style="display: block; margin-top: 8px;">New Snippet</span>
+          <img class="menu-button--icon" src="/icons/home.svg" width="20">
+          <span class="menu-button--name">Home</span>
         <% end %>
       </div>
       <div class="menu-button--wrapper">
         <%= link_to folders_path, class: request.fullpath == folders_path ? 'menu-button--item-active' : 'menu-button--item' do %>
-          <img src="/icons/folder-1.svg" width="28">
-          <span style="display: block; margin-top: 8px;">Folders</span>
+          <img class="menu-button--icon" src="/icons/folder-1.svg" width="20">
+          <span class="menu-button--name">Folders</span>
         <% end %>
+      </div>
+      <div class="menu-button--wrapper">
         <%= link_to edit_user_registration_path, class: request.fullpath == edit_user_registration_path ? 'menu-button--item-active' : 'menu-button--item' do %>
-          <img src="/icons/settings.svg" width="28">
-          <span style="display: block; margin-top: 8px;">Settings</span>
+          <img class="menu-button--icon" src="/icons/settings.svg" width="20">
+          <span class="menu-button--name">Settings</span>
         <% end %>
       </div>
     </card>
     <card style="text-align: center;">
-      <%= link_to('NEW SNIPPET', new_snippet_path, class: "button--cta-new") %>  
+      <%= link_to(new_snippet_path, class: 'sidebar--new-snippet') do %>
+        <span>NEW SNIPPET</span>
+      <% end %>
     </card>
   <% else %>
     <%# temp fix for when user not signed in %>

app/views/shared/_topbar.html.erb

@@ -1,5 +1,5 @@
 <div id="header">
-  <div id="header-wrapper">
+  <div id="header-wrapper" style="position: relative;">
     <div style="display: flex; align-items: center;">
       <a class="button--cta-transparent" href="/">SNIPPET.IO</a>
     </div>