refactor/Use inline svgs for topbar

Author: LewisYoul

app/assets/stylesheets/_sidebar.scss

@@ -31,8 +31,8 @@
   &--notification {
     text-align: center;
     position: absolute;
-    top: 4px;
-    left: 30px;
+    top: 0px;
+    right: 10px;
     width: 14px;
     height: 14px;
     background-color: $color-red;

app/views/shared/_folder.html.erb

@@ -5,7 +5,7 @@
     data-folders-target="folder"
     data-folder-id="<%= folder.id %>"
   >
-    <svg class="m-auto w-10 h-10 text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
+    <%= render partial: 'shared/icons/folder', locals: { color: 'text-gray-200', width: 10, height: 10 } %>
     <div>
       <h5 class="text-center"><%= folder.name %></h5>
       <%= render partial: 'folders/counts', locals: { folder: folder } %>

app/views/shared/_nav_item.html.erb

@@ -1,10 +1,10 @@
 <% active = path == request.path %>
 
-<% color = active ? 'primary' : 'black' %>
+<% color = active ? 'text-cyan' : 'text-gray-400 hover:text-cyan transition' %>
 <% css_class = active ? 'active' : 'inactive' %>
 
-<%= link_to(path, class: 'position-relative') do %>
-  <%= image_tag("/icons/#{color}/#{icon}.svg", class: "w-10 nav-item--#{css_class}") %>
+<%= link_to(path, class: 'relative px-3') do %>
+  <%= render partial: "shared/icons/#{icon}", locals: { width: 7, height: 7, color: color } %>
   <% if path == notifications_path %>
     <%= notification_counter(current_user) %>
   <% end %>

app/views/shared/icons/_bell.html.erb

@@ -0,0 +1,3 @@
+<svg class="w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
+</svg>

app/views/shared/icons/_connect.html.erb

@@ -0,0 +1,3 @@
+<svg class="w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"></path>
+</svg>

app/views/shared/icons/_folder.html.erb

@@ -0,0 +1,3 @@
+<svg class="m-auto w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
+</svg>

app/views/shared/icons/_home.html.erb

@@ -0,0 +1,3 @@
+<svg class="w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
+</svg>

app/views/shared/icons/_snippet.html.erb

@@ -0,0 +1,3 @@
+<svg class="w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
+</svg>