Add environment label to navbar (#1206)

* Add environment label in secondary navbar

* Move environment label to primary nav and fix its design

* Use a globe and ensure visible regardless of viewport

---------

Co-authored-by: Ben Sheldon [he/him] <bensheldon@gmail.com>

app/helpers/good_job/application_helper.rb

@@ -53,10 +53,11 @@ def status_icon(status, **options)
       content_tag :span, icon, **options
     end
 
-    def render_icon(name)
+    def render_icon(name, **options)
       # workaround to render svg icons without all of the log messages
       partial = lookup_context.find_template("good_job/shared/icons/#{name}", [], true)
-      partial.render(self, {})
+      options[:class] = Array(options[:class]).join(" ")
+      partial.render(self, { class: options[:class] })
     end
 
     def translate_hash(key, **options)

app/views/good_job/shared/_navbar.erb

@@ -1,7 +1,15 @@
 <nav class="navbar navbar-expand-lg border-bottom bg-body sticky-top">
   <div class="container-fluid">
     <%= link_to t(".name"), root_path, class: "navbar-brand mb-0 h1" %>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
+    <div class="d-lg-none d-flex flex-fill justify-content-end me-2">
+      <span class="navbar-text">
+        <%= render_icon "globe", class: "align-text-bottom" %>
+        <small><%= Rails.env.capitalize %></small>
+      </span>
+    </div>
+
+    <button class="navbar-toggler position-relative" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 
@@ -37,9 +45,19 @@
         </li>
       </ul>
 
-      <hr class="d-lg-none text-secondary">
-
       <ul class="navbar-nav">
+        <li class="nav-item d-none d-lg-flex align-items-center">
+          <span class="navbar-text">
+            <%= render_icon "globe", class: "align-text-bottom" %>
+            <small><%= Rails.env.capitalize %></small>
+          </span>
+        </li>
+
+        <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+          <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-secondary"></div>
+          <hr class="d-lg-none my-2 text-secondary">
+        </li>
+
         <li class="nav-item d-flex flex-column justify-content-center">
           <div class="form-check form-switch m-0">
             <%= check_box_tag "live_poll", params.fetch("poll", 30), params[:poll].present?, role: "switch", class: "form-check-input" %>

app/views/good_job/shared/icons/_globe.html.erb

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe <%= local_assigns[:class] %>" viewBox="0 0 16 16">
+  <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z" />
+</svg>