Refactor navbar styles and improve dropdown accessibility for better mobile usability

templates/base.html

@@ -112,7 +112,7 @@
             }
 
 /* Improve navbar tap targets and mobile dropdown behaviour */
-@media (max-width: 991.98px) {
+            @media (max-width: 991.98px) {
     /* Make navbar links larger and easier to tap */
                 .navbar-nav .nav-link {
                     padding: .75rem 1rem;
@@ -179,7 +179,7 @@
             /* Make form controls and buttons a bit larger for touch */
                 .form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }
 
-}
+            }
 
         </style>
         {% block css %}
@@ -224,7 +224,10 @@
                                         <a class="dropdown-item" href="{% url 'sbas:index' %}">SBAs</a>
                                     </li>
                                     <li>
-                                        <a class="dropdown-item" href="{% url 'generic:examcollection_list' %}">Exam Collection</a>
+                                        <a class="dropdown-item d-flex justify-content-between align-items-center" href="{% url 'generic:examcollection_list' %}">
+                                            <span><i class="bi bi-collection me-1" aria-hidden="true"></i> Exam Collections</span>
+                                            <span class="badge bg-secondary ms-2">Manage</span>
+                                        </a>
                                     </li>
                                 </ul>
                             </li>
@@ -313,8 +316,8 @@
             });
 
         </script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
     // Wire up all row-selection control blocks to the nearest .js-row-selectable table.
                 function findTableForControl(elem) {
         // Walk up ancestors and look for a table that either has the
@@ -479,8 +482,8 @@ document.addEventListener('DOMContentLoaded', function() {
         // initial count
                     updateSelectedCount();
                 });
-});
-</script>
+            });
+        </script>
     </body>