navbar authentication visual change

hawc/static/css/epa-bootstrap.css

@@ -47,13 +47,6 @@ a.btn-warning:visited, a.badge-warning:visited {
 .dropdown-menu a:visited{
   color: #212529;
 }
-.hawc-header a:visited,
-.breadcrumb-item a:visited{
-  color: var(--epa-primary);
-}
-.hawc-header .nav-link {
-  padding: 0 0 0 1em;
-}
 .dropdown-item.active,
 .dropdown-item:active, .logout-btn:active {
   color: #fff !important;

hawc/static/css/epa-hawc.css

@@ -31,18 +31,13 @@
     color: white !important;
 }
 
-/* Top nav */
-.hawc-header .navbar-toggler {
-    color: initial;
+/* HAWC navbar */
+.navbar .nav-link {
+    padding: 0 0 0 1em;
 }
-.hawc-header .navbar-toggler:focus {
-    outline: initial;
-}
-.hawc-header a {
-    text-decoration: none;
-}
-.unstyled-action-button {
-    color: var(--epa-primary);
+.navbar-dark > .nav > .nav-item > a.nav-link,
+.navbar-dark > h2 > a {
+    color: #e1e1e1;
 }
 
 /* Sidebar  */

hawc/static/css/hawc.css

@@ -48,6 +48,12 @@ input[type="submit"].btn, section button.btn, section input[type="button"].btn,
     padding-left: 2rem;
     font-weight: normal;
 }
+
+/* authenticated navbar */
+.navbar {
+    padding: 0.5rem 1rem;
+}
+
 /* end sidebar */
 .tny {
     font-size: 0.75rem !important;
@@ -966,11 +972,6 @@ div.udf-info-row>p, div.udf-info-row>div.card>p {
     background-color: #ec744c;
     border-color: #ec744c;
 }
-.unstyled-action-button {
-    background: none;
-    border: none;
-    padding: 0;
-}
 .smaller {
     font-size: .8em;
     font-weight: 400;

hawc/templates/base.html

@@ -69,7 +69,7 @@
         <div class="row no-gutters" style="min-height: 100vh;">
           {% block sidebar_outer %}{% endblock sidebar_outer %}
           <div class="col overflow-auto">
-            <div id="main-content-container" class="container-fluid">
+            <div id="main-content-container" class="container-fluid mt-2">
               {% block breadcrumbs_outer %}{% endblock breadcrumbs_outer %}
               {% include "includes/messages.html" %}
               {% include "includes/htmx_alert.html" %}

hawc/templates/includes/_navigation_links.html

@@ -15,10 +15,6 @@
       <a class="nav-link" href="{% url 'wagtail_serve' '' %}">Documentation</a>
     </li>
   {% endif %}
-  <li class="nav-item">
-    <a class="nav-link" href="{% url 'assessment:public_list' %}">Public Assessments</a>
-  </li>
-
   {% if user.is_authenticated %}
     <li class="nav-item dropdown">
       <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
@@ -35,13 +31,16 @@
           <a class="dropdown-item" href="{% url 'assessment:full_list' %}">View all assessments</a>
         {% endif %}
         <div class="dropdown-divider"></div>
-        <form class="dropdown-item" method="post" action="{% url 'user:logout' %}">
+        <form method="post" action="{% url 'user:logout' %}">
           {% csrf_token %}
-          <button class="unstyled-action-button logout-btn" type="submit">Logout</button>
+          <button class="dropdown-item logout-btn" type="submit">Logout</button>
         </form>
       </div>
     </li>
   {% else %}
+    <li class="nav-item">
+      <a class="nav-link" href="{% url 'assessment:public_list' %}">Public Assessments</a>
+    </li>
     <li class="nav-item">
       <a class="nav-link" href="{% url 'user:login' %}?next={{request.path}}">Login</a>
     </li>

hawc/templates/includes/navigation.html

@@ -2,11 +2,11 @@
 
 {% block navbar_outer %}
   {% if flavor == "EPA" %}
-    <nav class="navbar hawc-header justify-content-between">
-      <h2>
+    <nav class="navbar hawc-header justify-content-between d-flex align-items-center {% if user.is_authenticated %} navbar-dark bg-dark {% endif %}">
+      <h2 class="m-0">
         <a href="{% url 'home' %}">Health Assessment Workspace Collaborative (HAWC)</a>
       </h2>
-      <ul id="navbarSupportedContent" class="nav text-right">
+      <ul class="nav text-right m-0">
         {% if user.is_authenticated %}
           {% include "includes/_navigation_links.html" with contact_only=False %}
         {% else %}
@@ -15,15 +15,11 @@ <h2>
       </ul>
     </nav>
   {% else %}
-    <nav class="navbar navbar-expand-sm navbar-light bg-light">
+    <nav class="navbar navbar-expand-sm  {% if user.is_authenticated %} navbar-dark bg-dark {% else %} navbar-light bg-light {% endif %} ">
       <a class="ml-3 navbar-brand" href="{% url 'home' %}">
-        <img alt="The website logo" src="{% static 'img/HAWC-400.png' %}"  width="68" />
+        <img alt="The website logo" src="{% if user.is_authenticated %}{% static 'img/HAWC-dark.svg' %}{% else %}{% static 'img/HAWC.svg' %}{% endif %}"  width="80" />
       </a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <ul id="navbarSupportedContent" class="nav navbar-nav collapse navbar-collapse justify-content-end" >
+      <ul class="nav navbar-nav collapse navbar-collapse justify-content-end" >
         {% include "includes/_navigation_links.html" with contact_only=False %}
       </ul>
     </nav>

hawc/templates/includes/sidebar.html

@@ -1,9 +1,9 @@
 <ul class="{{ul_class}}">
   <li class="{{li_class}}">
-    <a class="{{a_class}}"  href="{% url 'home' %}">HAWC Home</a>
+    <a class="{{a_class}}"  href="{% url 'home' %}">Home</a>
   </li>
   <li class="{{li_class}}">
-    <a class="{{a_class}}" href="{% url 'assessment:public_list' %}">Public Assessments</a>
+    <a class="{{a_class}}" href="{% url 'assessment:public_list' %}">Assessments</a>
   </li>
   {% if assessment %}
     <li class="{{li_class}}">
@@ -63,11 +63,11 @@
       {% include 'docs/components/sidebar_docs_tree.html' %}
     {% else %}
       <li class="{{li_class}}">
-        <a class="{{a_class}}" href="{% url 'wagtail_serve' '' %}">HAWC Documentation</a>
+        <a class="{{a_class}}" href="{% url 'wagtail_serve' '' %}">Documentation</a>
       </li>
     {% endif %}
   {% endif %}
 
-  <li class="{{li_class}}"><a class="{{a_class}}" href="{% url 'about' %}">About HAWC</a></li>
-  <li class="{{li_class}}"><a class="{{a_class}}" href="{% url 'resources' %}">HAWC Resources</a></li>
+  <li class="{{li_class}}"><a class="{{a_class}}" href="{% url 'about' %}">About</a></li>
+  <li class="{{li_class}}"><a class="{{a_class}}" href="{% url 'resources' %}">Resources</a></li>
 </ul>