Refactored header and fixed tests (#1036)

app/assets/stylesheets/_header.scss

@@ -1,22 +1,23 @@
+@import "variables";
+@import "typography";
+@import "bootstrap";
+
 #header {
     padding: 0px;
-    background-color: #000000;
-    .body{
-        color: #ffffff;
-        margin: auto;
-        padding: 50px 25px 25px 25px;
-        float: right;
-        display: -webkit-inline-box;
-    }
+    background-color: $black;
+
     .navbar-brand {
-        color: #ffffff;
+        color: $white;
         margin: auto;
         padding: 10px;
     }
     .btn.btn-warning.btn-sm {
-        --bs-btn-bg: #ffc107;
+        --bs-btn-bg: #FBC129;
         padding-left: 10px;
         margin-left: 10px;
+        font-family: "Libre Franklin";
+        font-size: 16px;
+        color: $black;
     }
 }
 .container-fluid {
@@ -36,4 +37,56 @@
   .gutter {
     width: 20px;
     // border: 1px solid #00FF00;
+  }
+
+  .header-row {
+    width: 100% !important;
+  }
+
+  .header-logo {
+    padding-left: 20px;
+  }
+
+  #header-navigation {
+    color: $white;
+    margin: auto;
+    padding: 50px 25px 25px 25px;
+    float: right;
+    display: -webkit-inline-box;
+    font-family: "Libre Franklin";
+    .navbar-item { 
+      color: $white;
+      font-family: "Libre Franklin";
+      font-size: 16px;
+      font-style: normal;
+      line-height: 24px;
+      font-weight: 600;
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+    .navbar-item a {
+      color: $white;
+      font-family: "Libre Franklin";
+      font-size: 16px;
+      font-style: normal;
+      line-height: 24px;
+      font-weight: 600;
+      margin-left: 12px;
+      margin-right: 12px;
+      text-decoration: none;
+    }
+    .navbar-item a:hover {
+      text-decoration: underline;
+    }
+    .dropdown-menu { 
+      left: -45px;
+    }
+
+    .dropdown-menu a {
+      color: $black;
+      font-weight: 400;
+    }
+    .dropdown-menu a:hover {
+      width: 85%;
+    }
   }

app/views/layouts/application.html.erb

@@ -66,6 +66,12 @@
 </div>
 
 <%= render partial: 'shared/footer' %>
-
+<script>
+  $(document).ready(function (){
+    $('#dropdownMenuButton').click(function () {
+      $('.dropdown-toggle').dropdown('toggle');
+    });
+  });
+</script>
   </body>
 </html>

app/views/shared/_header.html.erb

@@ -1,23 +1,37 @@
-<nav>
-  <div class="lux">
-    <% if current_user %>
-      <lux-library-header abbr-name="TD" theme="dark">
-        <template v-slot:logo> <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a> </template>
-        <lux-menu-bar type="main-menu" :menu-items="[
-          {name: 'Contact US', component: 'Home', href: 'mailto:[email protected]'},
-          {name: 'FAQ', component: 'Home', href: 'https://tigerdata.princeton.edu/frequently-asked-questions'},
-          {name: '<%= current_user.display_name %>', component: 'Account', href: '/account/', children: [
-            {name: 'Account Settings', component: 'Account', href: '/'},
-            {name: 'Logout', component: 'Logout', href: '<%= main_app.destroy_user_session_path %> '}
-            ]}
-          ]"
-        ></lux-menu-bar>
-      </lux-library-header>
-    <% else %>
-      <lux-library-header abbr-name="TD" theme="dark">
-        <template v-slot:logo><a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a> </template>
-        <%= button_to "Log In", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm" %>
-      </lux-library-header>
-    <% end %>
+<header>
+<div id="header">
+  <nav class="navbar navbar-expand-lg">
+
+<div class="row header-row">
+
+  <div class="col-lg-3 header-logo">
+    <a href="/"><%= image_tag("TigerData-LOGO-KO_wide2.svg", alt: "TigerData logo", size: "150x100", id: "logo") %></a>
   </div>
-</nav>
+
+  <div class="col-lg-9">
+  <div id="header-navigation">
+  <ul class="navbar-nav">
+  <li class="navbar-item"><%= link_to "Contact Us", "mailto:[email protected]", class: "navbar-contact-us" %></li>
+  <li class="navbar-item"><%= link_to "FAQ", "https://tigerdata.princeton.edu/frequently-asked-questions", class: "navbar-faq" %></li>
+  <% if current_user %>
+    <li class="navbar-item dropdown">
+        <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <%= current_user.uid%>
+        </a>
+        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+          <%= link_to "Log out", main_app.destroy_user_session_path, class: "dropdown-item" %>
+        </div>
+      </li>
+  <% else %>
+    <li class="navbar-item"><%= button_to "Log in", user_cas_omniauth_authorize_path, class: "btn btn-warning btn-sm" %></li>
+  <% end %>
+  </ul>
+  </div>
+  </div>
+
+
+</div>
+
+  </nav>
+</div>
+</header>