fix: navbar bootstrap5 upgrades

ddunne6 · May 14, 2023 · 1950f3b · 1950f3b
1 parent 59be022
commit 1950f3b
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/app_ratings/templates/app_ratings/base.html b/app_ratings/templates/app_ratings/base.html
@@ -20,12 +20,12 @@
 <body>
     <header>
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <div class="container">
+            <div class="container-fluid">
             <a class="navbar-brand" href="{% url 'my_ratings' %}">EuroVote</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="{% url 'my_ratings' %}">Vote</a>
@@ -34,21 +34,21 @@
                   <a class="nav-link" href="{% url 'all_ratings' %}">Results</a>
                 </li>
             {% if user.is_authenticated %}
-            <div class="btn-group">
-                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    {{ user }}
-                </button>
-                <div class="dropdown-menu dropdown-menu-right">
-                  <a class="dropdown-item" href="{% url 'logout' %}" type="button">Log Out</a>
-                </div>
-            </div>
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <b>{{ user }}</b>
+                </a>
+                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li><a class="dropdown-item" href="{% url 'logout' %}">Log Out</a></li>
+                </ul>
+              </li>
             {% else %}
             <li class="nav-item">
                 <a class="nav-link" href="{% url 'login' %}">Register/Login</a>
             </li>
             {% endif %}
             </div>
-        </ul>
+                </ul>
             </div>
         </nav>
     </header>