Add dropdown and report-abuse for users (#3788)

* Add dropdown and report-abuse for users

* Move script to JS area

app/assets/javascripts/initializePage.js.erb

@@ -42,6 +42,7 @@ function callInitalizers(){
   initializeEllipsisMenu();
   initializeArchivedPostFilter();
   initializeCreditsPage();
+  initializeUserProfilePage();
 
   initializeDrawerSliders();
 

app/assets/javascripts/initializers/initializeUserProfilePage.js

@@ -0,0 +1,11 @@
+'use strict';
+
+function initializeUserProfilePage() {
+  if (document.getElementById('user-profile-dropdown')) {
+    document.getElementById('user-profile-dropdown').onclick = function() {
+      document
+        .getElementById('user-profile-dropdownmenu')
+        .classList.toggle('showing');
+    };
+  }
+}

app/assets/stylesheets/user-profile-header.scss

@@ -475,5 +475,41 @@
       }
     }
   }
-
+  .profile-dropdown {
+    position: absolute;
+    top: 0px;
+    right: 6px;
+    button {
+      border: 0px;
+      background: transparent;
+      padding: 8px;
+    }
+    img {
+      height: 22px;
+      width: 22px;
+    }
+    .profile-dropdownmenu {
+      display: none;
+      position: absolute;
+      top: 30px;
+      right: 3px;
+      width: 200px;
+      border: 1px solid $light-medium-gray;
+      border-radius: 3px;
+      background: white;
+      z-index: 20;
+      width: 130px;
+      box-shadow: $shadow;
+      a {
+        font-size: 0.75em;
+        color: $black;
+        display: block;
+        padding: 6px 10px;
+        font-weight: bold;
+      }
+      &.showing {
+        display: block;
+      }
+    }
+  }
 }

app/views/users/show.html.erb

@@ -145,6 +145,14 @@
       </div>
     </div>
     <%= render "articles/user_metadata", context: "profile" %>
+    <div class="profile-dropdown">
+      <button id="user-profile-dropdown">
+        <%= image_tag("three-dots.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>
+      </button>
+      <div id="user-profile-dropdownmenu" class="profile-dropdownmenu">
+        <a href="/report-abuse?url=https://dev.to/<%= @user.username %>">Report Abuse</a>
+      </div>
+    </div>
   </div>
 <% end %>