Redesign local nav for GDT

Why these changes are being introduced: The Geodata app requires links to GIS resources at MIT in the local nav. It also no longer requires the app name in the local nav, as GDT-125 moved this to the main header. Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/GDT-125 * https://mitlibraries.atlassian.net/browse/GDT-124 How this addresses that need: This restyle the local nav as specified, provided the GDT feature is enabled. Side effects of this change: We will likely want to remove the app name from the local nav in all our applications and use the new method provided by the theme gem instead. However, it is out of scope of this ticket (and project) to make that decision, so I've left it in for now.
MITLibraries · Feb 7, 2024 · 28288fe · 28288fe
1 parent 37c4122
commit 28288fe
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -8,6 +8,7 @@
 @import "partials/_alerts";
 @import "partials/_filters";
 @import "partials/_global_alerts";
+@import "partials/_local_nav";
 @import "partials/_pagination";
 @import "partials/_panels";
 @import "partials/_search";

diff --git a/app/assets/stylesheets/partials/_local_nav.scss b/app/assets/stylesheets/partials/_local_nav.scss
@@ -0,0 +1,33 @@
+.wrap-outer-header-local {
+  .local-identity {
+    padding: 1rem 0;
+  }
+
+  .wrap-header-local {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    .wrap-local-nav {
+      margin: 0;
+
+      .local-nav {
+        display: flex;
+
+        .wrap-gis-links {
+          text-align: right;
+          margin-left: auto;
+
+          :first-child:after {
+            margin: 0 5px;
+          }
+
+          .nav-item {
+            padding-left: 5px;
+            padding-right: 5px;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/views/layouts/_site_nav.html.erb b/app/views/layouts/_site_nav.html.erb
@@ -1,14 +1,21 @@
 <div class="wrap-outer-header-local layout-band">
   <div class="wrap-header-local">
-    <div class="local-identity">
-      <h2 class="title title-site"><a href="/">TIMDEX UI</a></h2>
-    </div>
-    <div class="wrap-local-nav">
-      <div class="wrap-bar">
-        <nav class="local-nav" aria-label="Main menu">
-          <%= nav_link_to("Home", root_path) %>
-        </nav>
+    <% unless Flipflop.enabled?(:gdt) %>
+      <div class="local-identity">
+        <h2 class="title title-site"><a href="/">TIMDEX UI</a></h2>
       </div>
+    <% end %>
+    <div class="wrap-local-nav">
+      <nav class="local-nav" aria-label="Main menu">
+        <%= nav_link_to("Home", root_path) %>
+        <% if Flipflop.enabled?(:gdt) %>
+          <div class="wrap-gis-links">
+            <%= nav_link_to("GIS at MIT", "https://libraries.mit.edu/gis") %>
+            <span class="nav-divider" aria-hidden="true">|</span>
+            <%= nav_link_to("Ask GIS", "https://libraries.mit.edu/ask-gis") %>
+          </div>
+        <% end %>
+      </nav>
     </div>
   </div>
 </div>