From a663e684c3504194e9d1586f89cafa1ccea5561d Mon Sep 17 00:00:00 2001
From: Michael Nichols <mumptastic@gmail.com>
Date: Fri, 6 Nov 2020 10:20:03 -0600
Subject: [PATCH] Added covid update button to header

---
 src/app/tl-header/tl-header.component.html |  7 ++
 src/app/tl-header/tl-header.component.scss | 83 +++++++++++++---------
 2 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/src/app/tl-header/tl-header.component.html b/src/app/tl-header/tl-header.component.html
index 04166c3c9..0af275ae4 100644
--- a/src/app/tl-header/tl-header.component.html
+++ b/src/app/tl-header/tl-header.component.html
@@ -246,6 +246,13 @@
       </wvre-dropdown-menu>
     </wvr-dropdown-component>
   </wvr-nav-li-component>
+
+  <wvr-nav-li-component class="covidUpdate">
+    <a href="https://library.tamu.edu/covid-microsite/">
+      <wvr-text-component value="Coronavirus Libraries Updates"></wvr-text-component>
+    </a>
+  </wvr-nav-li-component>
+
 </ng-template>
 
 <ng-template #bottomNavContent>
diff --git a/src/app/tl-header/tl-header.component.scss b/src/app/tl-header/tl-header.component.scss
index f158358c4..4dbbf92e4 100644
--- a/src/app/tl-header/tl-header.component.scss
+++ b/src/app/tl-header/tl-header.component.scss
@@ -15,15 +15,31 @@
     --title-row-height: 85px;
     --bottom-nav-height: 65px;
 
-    wvr-nav-list-component[top-navigation-mobile] > ul > wvr-nav-li-component > li > a,
-    wvr-nav-list-component[top-navigation] > ul > wvr-nav-li-component > li > a {
+    wvr-nav-list-component[top-navigation-mobile]
+      > ul
+      > wvr-nav-li-component
+      > li
+      > a,
+    wvr-nav-list-component[top-navigation]
+      > ul
+      > wvr-nav-li-component
+      > li
+      > a {
       padding: 12px;
       text-decoration: none;
       color: var(--tl-white);
     }
 
-    wvr-nav-list-component[top-navigation-mobile] > ul > wvr-nav-li-component > li > a:hover,
-    wvr-nav-list-component[top-navigation] > ul > wvr-nav-li-component > li > a:hover {
+    wvr-nav-list-component[top-navigation-mobile]
+      > ul
+      > wvr-nav-li-component
+      > li
+      > a:hover,
+    wvr-nav-list-component[top-navigation]
+      > ul
+      > wvr-nav-li-component
+      > li
+      > a:hover {
       color: var(--tl-black);
     }
 
@@ -69,9 +85,8 @@
       }
 
       .libraries {
-
         .libraries-link {
-          margin-bottom:18px;
+          margin-bottom: 18px;
           a {
             color: #500000;
             text-decoration: underline;
@@ -93,7 +108,6 @@
       }
 
       .information-for {
-
         a {
           color: #2b5d7d;
           text-decoration: none;
@@ -113,7 +127,7 @@
           color: var(--tl-black);
         }
 
-          wvre-dropdown-menu > wvre-dropdown-menu-item {
+        wvre-dropdown-menu > wvre-dropdown-menu-item {
           border-bottom: 1px solid #e0e0e0;
           padding: 10px 0px;
           display: flex;
@@ -144,6 +158,13 @@
       }
     }
 
+    wvr-nav-list-component[top-navigation] wvr-nav-li-component.covidUpdate {
+      background: var(--tl-deep-yellow);
+      a {
+        color: var(--tl-black);
+      }
+    }
+
     wvr-nav-list-component[top-navigation] .dropdown:hover {
       .wvr-button {
         color: var(--tl-black);
@@ -172,12 +193,11 @@
         color: white;
       }
 
-
       :hover wvre-dropdown-btn {
+        color: white;
+        svg {
           color: white;
-          svg {
-            color: white;
-          }
+        }
       }
 
       tl-mega-menu {
@@ -212,7 +232,6 @@
             }
           }
         }
-
       }
     }
 
@@ -277,7 +296,6 @@
       }
 
       wvr-nav-list-component[top-navigation-mobile] {
-
         .dropdown,
         wvr-nav-li-component,
         wvre-nav-li {
@@ -287,12 +305,12 @@
 
         ul {
           justify-content: space-evenly;
-          flex-wrap: nowrap!important;
-          flex-direction: column!important;
+          flex-wrap: nowrap !important;
+          flex-direction: column !important;
         }
 
         li {
-          justify-content: left!important;
+          justify-content: left !important;
 
           wvr-dropdown-component,
           wvre-dropdown {
@@ -303,10 +321,9 @@
             display: flex !important;
           }
 
-
           wvr-button-component {
             display: flex;
-            width:100%;
+            width: 100%;
             button-wrapper {
               width: 100%;
               .btn {
@@ -384,7 +401,6 @@
         width: 0px;
         opacity: 0;
       }
-
     }
   }
   .mobile-menu-button {
@@ -405,19 +421,22 @@
     z-index: 1100;
     transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
     div.mobile-menu-content {
-        wvre-nav-li > li.nav-item {
-          a {
-            white-space: nowrap;
-          }
-          .mobile-display tl-mega-menu-section-component,
-            .mobile-display tl-mega-menu-section {
-              white-space: nowrap;
-            }
-          tl-mega-menu > wvr-dropdown-component > .wvr-dropdown .dropdown wvr-button-component {
-            white-space: nowrap;
-          }
+      wvre-nav-li > li.nav-item {
+        a {
+          white-space: nowrap;
+        }
+        .mobile-display tl-mega-menu-section-component,
+        .mobile-display tl-mega-menu-section {
+          white-space: nowrap;
+        }
+        tl-mega-menu
+          > wvr-dropdown-component
+          > .wvr-dropdown
+          .dropdown
+          wvr-button-component {
+          white-space: nowrap;
         }
+      }
     }
   }
-
 }