Fix bs4 navbar for logged in

Author: madprime

open_humans/templates/base-bs4.html

@@ -61,24 +61,23 @@
                 <a class="nav-link" href="{% url 'create' %}">Create</a>
               </li>
               {% if user.is_authenticated %}
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle"
-                    data-toggle="dropdown" role="button"
-                    aria-haspopup="true" aria-expanded="false">My account
-                    <span class="caret"></span></a>
-                <ul class="dropdown-menu">
-                  <li><a href="{% url 'my-member-dashboard' %}">Public profile</a></li>
-                  <li><a href="{% url 'my-member-joined' %}">Projects joined</a></li>
-                  <li><a href="{% url 'my-member-data' %}">My data</a></li>
-                  <li><a href="{% url 'my-member-settings' %}">Account settings</a></li>
-                  {% if user.member.datarequestproject_set.all %}
-                  <li class="divider"></li>
-                  <li><a href="{% url 'direct-sharing:manage-projects' %}">Manage projects</a></li>
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  My account
+                </a>
+                <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
+                  <a class="dropdown-item" href="{% url 'my-member-dashboard' %}">Public profile</a>
+                  <a class="dropdown-item" href="{% url 'my-member-joined' %}">Projects joined</a>
+                  <a class="dropdown-item" href="{% url 'my-member-data' %}">My data</a>
+                  <a class="dropdown-item" href="{% url 'my-member-settings' %}">Account settings</a>
+                  {% if user.member.datarequestproject_set.exists %}
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item" href="{% url 'direct-sharing:manage-projects' %}">Manage projects</a>
                   {% endif %}
-                  <li class="divider"></li>
-                  <li><a class="logout-link" href="{% url 'account_logout' %}">
-                    Log out</a></li>
-                </ul>
+                  <div class="dropdown-divider"></div>
+                  <a class="dropdown-item logout-link" href="{% url 'account_logout' %}">
+                      Log out</a>      
+                </div>
               </li>
               {% else %}
               <li class="nav-item {% active 'login' %} mr-md-4 mt-2 mt-md-1">

static/css/oh-proj-theming.css

@@ -182,6 +182,17 @@ body.oh-proj-template > main > div.container {
   .nav-link:hover {
     text-decoration: underline;
   }
+
+  a.dropdown-item {
+    font-size: 0.9rem;
+    color: $oh-teal-dark;
+
+    &:hover, &:focus, &:active {
+      color: $oh-teal-verydark;
+      text-decoration: underline;
+      background-color: $oh-teal-verylight;
+    }
+  }
 }
 
 /* Button styles */