Menu structure cleaned up

boxes/static/css/base.css

@@ -140,8 +140,11 @@ body {
         border-radius: 8px 8px 0 0;
     }
 
-    .navbar-nav a:last-child,
-    .navbar-nav form:last-child {
+    .navbar-nav > a:last-child {
+        border-radius: 0 0 8px 8px;
+    }
+
+    .dropdown-content a:last-child {
         border-radius: 0 0 8px 8px;
     }
 
@@ -316,6 +319,8 @@ body {
 .dropdown-content a:hover {
     background: #667eea;
     color: white;
+    transform: none;
+    box-shadow: none;
 }
 
 .dropdown-content a:first-child {
@@ -326,9 +331,8 @@ body {
     border-radius: 0 0 10px 10px;
 }
 
-.dropdown-content button:hover {
-    background: #667eea;
-    color: white;
+#logout-form {
+    display: none;
 }
 
 .dropdown:hover .dropdown-content,
@@ -357,12 +361,18 @@ body {
 }
 
 @media (max-width: 768px) {
-    .dropdown-content {
-        position: static;
-        box-shadow: none;
-        border-radius: 0;
-        margin-top: 0;
-        padding: 0;
+    .dropdown {
+        display: contents;
+    }
+
+    .dropdown-btn {
+        display: none;
+    }
+
+    .dropdown-content,
+    .dropdown:hover .dropdown-content,
+    .dropdown:focus-within .dropdown-content {
+        display: contents;
     }
 
     .dropdown-content a {
@@ -370,9 +380,4 @@ body {
         padding: 12px 16px;
         border-radius: 0;
     }
-
-    .dropdown-btn {
-        width: 100%;
-        justify-content: flex-start;
-    }
 }

labhelper/templates/base.html

@@ -33,12 +33,12 @@
                     <a href="/resources/"><i class="fas fa-folder-open"></i> Resources</a>
                     <a href="/fixme/"><i class="fas fa-exclamation-triangle"></i> Fixme</a>
                     <a href="/admin/"><i class="fas fa-cog"></i> Admin</a>
-                    <form method="post" action="{% url 'logout' %}" style="padding: 0; margin: 0; background: none; border: none;">
+                    <form method="post" action="{% url 'logout' %}" id="logout-form">
                         {% csrf_token %}
-                        <button type="submit" style="width: 100%; text-align: left; padding: 12px 20px; background: none; border: none; color: #555; font: inherit; cursor: pointer; display: block; transition: all 0.2s ease;">
-                            <i class="fas fa-sign-out-alt"></i> Logout
-                        </button>
                     </form>
+                    <a href="#" onclick="document.getElementById('logout-form').submit(); return false;">
+                        <i class="fas fa-sign-out-alt"></i> Logout
+                    </a>
                 </div>
             </div>
             {% else %}