Merge pull request #2809 from sul-dlss/2772-header-navigation

have all navigation links appear in mobile menu, move mobile menu to …
sul-dlss · Feb 4, 2025 · cf5fe99 · cf5fe99
2 parents b76de57 + 51ed2ee
commit cf5fe99
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 51 deletions.
diff --git a/app/assets/stylesheets/component_library_overrides.css b/app/assets/stylesheets/component_library_overrides.css
@@ -21,3 +21,8 @@
 .navbar-nav {
   --bs-nav-link-color: black;
 }
+
+/* makes the hr span the length of the screen */
+.navbar-collapse hr {
+  margin-right: -100vw;
+}
diff --git a/app/components/exhibit_navigation_component.html.erb b/app/components/exhibit_navigation_component.html.erb
@@ -2,7 +2,7 @@
   <%= link_to(helpers.current_exhibit.title, helpers.spotlight.exhibit_path(helpers.current_exhibit), class: 'navbar-brand') %>
 <% end %>
 
-<ul class="masthead-navigation d-flex flex-row flex-wrap justify-content-end list-unstyled mb-0 align-self-end">
+<ul class="masthead-navigation d-md-flex flex-md-row flex-md-wrap justify-content-md-end list-unstyled mb-0 align-self-end">
   <li class="<%= "active" if helpers.current_page?([helpers.spotlight, helpers.current_exhibit]) %>"><%= link_to t(:'spotlight.curation.nav.home'), [helpers.spotlight, helpers.current_exhibit], class: 'd-block' %></li>
   <% helpers.current_exhibit.main_navigations.displayable.each do |navigation| %>
     <%= render partial: "shared/#{navigation.nav_type}_navbar", locals: { navigation: navigation } %>

diff --git a/app/components/header_component.html.erb b/app/components/header_component.html.erb
@@ -1,40 +1,38 @@
-    <header>
-      <div class="identity-bar bg-cardinal">
-        <div class="container">
-          <a class="su-brand-bar__logo" href="https://www.stanford.edu">Stanford University</a>
-        </div>
-      </div>
-      <nav
-        class="navbar navbar-expand-md bg-light"
+<header>
+  <div class="identity-bar bg-cardinal">
+    <div class="container">
+      <a class="su-brand-bar__logo" href="https://www.stanford.edu"
+        >Stanford University</a
       >
-        <div class="container">
-          <a
-            class="mb-0 navbar-brand navbar-logo"
-            href="https://library.stanford.edu"
-            >Stanford University Libraries</a
-          >
-          <button
-            class="navbar-toggler navbar-toggler-right"
-            type="button"
-            data-toggle="collapse"
-            data-bs-toggle="collapse"
-            data-target="#user-util-collapse"
-            data-bs-target="#user-util-collapse"
-            aria-controls="user-util-collapse"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
-
-          <div
-            class="collapse navbar-collapse justify-content-md-end"
-            id="user-util-collapse"
-          >
-            <%= render 'shared/user_util_links' %>
-          </div>
-        </div>
-      </nav>
+    </div>
+  </div>
+  <nav class="navbar navbar-expand-md bg-light">
+    <div class="container">
+      <a
+        class="mb-0 navbar-brand navbar-logo"
+        href="https://library.stanford.edu"
+        >Stanford University Libraries</a
+      >
+      <button
+        class="navbar-toggler navbar-toggler-right collapsed"
+        type="button"
+        data-toggle="collapse"
+        data-bs-toggle="collapse"
+        data-target="#user-util-collapse"
+        data-bs-target="#user-util-collapse"
+        aria-controls="user-util-collapse"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-      <%= render 'shared/masthead' %>
-    </header>
+      <div
+        class="d-md-block d-none"
+      >
+        <%= render 'shared/user_util_links' %>
+      </div>
+    </div>
+  </nav>
+  <%= render 'shared/masthead' %>
+</header>
diff --git a/app/components/masthead_navigation_component.html.erb b/app/components/masthead_navigation_component.html.erb
@@ -1,9 +1,9 @@
-<ul class="masthead-navigation d-flex flex-row justify-content-end list-unstyled mb-0">
+<ul class="masthead-navigation d-md-flex flex-md-row justify-content-md-end list-unstyled mb-0">
   <li class="dropdown">
     <a class="d-block dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       About
     </a>
-    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
+    <div class="dropdown-menu dropdown-menu-md-end" aria-labelledby="navbarDropdownMenuLink">
       <%= link_to "How does Stanford use Spotlight?",
       "https://exhibits.stanford.edu/exhibits-documentation/about/how-does-stanford-use-spotlight", class: 'dropdown-item' %>
       <%= link_to "Exhibit documentation & marketing",
@@ -17,7 +17,7 @@
     <a class="d-block dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <span class="d-md-none d-lg-inline">More</span> at Stanford
     </a>
-    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
+    <div class="dropdown-menu dropdown-menu-md-end" aria-labelledby="navbarDropdownMenuLink">
       <%= link_to "Explore library collections at Stanford",
                   "https://library.stanford.edu/explore-collections", class: 'dropdown-item' %>
       <%= link_to "Special Collections & University Archives",
@@ -31,7 +31,7 @@
       <a class="d-block dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Admin
       </a>
-      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
+      <div class="dropdown-menu dropdown-menu-md-end" aria-labelledby="navbarDropdownMenuLink">
         <% if helpers.can?(:create, Spotlight::Exhibit) %>
           <%= link_to "Create a new exhibit", helpers.spotlight.new_exhibit_path, class: 'dropdown-item' %>
         <% end %>

diff --git a/app/views/layouts/spotlight/base.html.erb b/app/views/layouts/spotlight/base.html.erb
@@ -20,7 +20,7 @@
     <% else %>
       <%= stylesheet_link_tag "application" %>
     <% end %>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-12-18/styles/sul.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-02-03/styles/sul.css" />
     <%= stylesheet_link_tag "component_library_overrides" %>
     <%= javascript_include_tag "application", async: Settings.async_javascript %>
     <script type="text/javascript">

diff --git a/app/views/shared/_masthead.html.erb b/app/views/shared/_masthead.html.erb
@@ -5,7 +5,7 @@
 <% end %>
 
 <div class="masthead bg-light mb-0 pb-2">
-  <div class="container d-flex flex-wrap justify-content-between">
+  <div class="container d-flex flex-wrap flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
     <div class="">
       <h1 class="site-title h2">
         <% if content_for? :masthead %>
@@ -20,12 +20,21 @@
       <% end %>
     </div>
 
-    <div class="align-self-end">
-      <% if current_exhibit %>
-        <%= render ExhibitNavigationComponent.new %>
-      <% else %>
-        <%= render MastheadNavigationComponent.new %>
-      <% end %>
+    <div class="align-self-md-end align-self-start">
+      <div class="navbar collapse navbar-collapse d-md-flex me-md-2"
+        aria-label="browse" id="user-util-collapse">
+          <div>
+            <% if current_exhibit %>
+              <%= render ExhibitNavigationComponent.new %>
+            <% else %>
+              <%= render MastheadNavigationComponent.new %>
+            <% end %>
+            <div class="d-md-none">
+              <hr>
+              <%= render 'shared/user_util_links' %>
+            </div>
+          </div>
+      </div>
     </div>
   </div>
 </div>