Better approach to generic list templates + other deduplication

users/templates/partials/navbar_user.html

@@ -3,7 +3,7 @@
     <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Hi {{ user.first_name }}
     </a>
-    <ul class="dropdown-menu p-3" id="userdropdown">
+    <ul class="dropdown-menu p-3 clearfix" id="userdropdown">
         <li class="media">
             <a href="{% url 'profile_detail' %}">
                 <img src="{{ request.user.profile_picture }}" class="media-object"/>
@@ -13,15 +13,13 @@
                 </div>
             </a>
         </li>
-        <li>
+        <li class="mb-2">
             <div class="custom-control custom-switch">
                 <input type="checkbox" class="custom-control-input" id="darkSwitch" />
                 <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
             </div>
         </li>
-        <li>
-            <a href="{% url 'logout' %}" class="btn btn-primary align"><i class="fas fa-sign-out-alt"></i> Logout</a>
-        </li>
+        <li class="float-right"><a href="{% url 'logout' %}" class="btn btn-primary"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
     </ul>
 {% else %}
 <a class="nav-link" href="{% url 'login' %}">