Add navigation menu

app/assets/images/pictograms/account-multiple-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M13.07 10.41A5 5 0 0 0 13.07 4.59A3.39 3.39 0 0 1 15 4A3.5 3.5 0 0 1 15 11A3.39 3.39 0 0 1 13.07 10.41M5.5 7.5A3.5 3.5 0 1 1 9 11A3.5 3.5 0 0 1 5.5 7.5M7.5 7.5A1.5 1.5 0 1 0 9 6A1.5 1.5 0 0 0 7.5 7.5M16 17V19H2V17S2 13 9 13 16 17 16 17M14 17C13.86 16.22 12.67 15 9 15S4.07 16.31 4 17M15.95 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13Z" /></svg>

app/assets/images/pictograms/account-wrench-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M22.9 21.2L18.8 17.1C19.2 16.1 19 14.8 18.1 14C17.2 13.1 15.9 12.9 14.8 13.4L16.7 15.3L15.3 16.7L13.3 14.7C12.8 15.8 13 17.1 13.9 18.1C14.8 19 16 19.2 17 18.8L21.1 22.9C21.3 23.1 21.6 23.1 21.7 22.9L22.7 21.9C23 21.6 23 21.3 22.9 21.2M10 12C12.2 12 14 10.2 14 8S12.2 4 10 4 6 5.8 6 8 7.8 12 10 12M10 6C11.1 6 12 6.9 12 8S11.1 10 10 10 8 9.1 8 8 8.9 6 10 6M13 20H2V17C2 14.3 7.3 13 10 13C10.5 13 11.2 13.1 11.9 13.2C11.5 13.7 11.3 14.3 11.1 15C10.7 15 10.4 14.9 10 14.9C7 14.9 3.9 16.4 3.9 17V18.1H11.5C11.8 18.9 12.4 19.5 13 20Z" /></svg>

app/assets/stylesheets/application.css

@@ -57,23 +57,44 @@ input[type=checkbox]:checked {
   -webkit-appearance: checkbox;
 }
 
-.application-menu {
+.app-menu {
-  height: 2.1rem;
+  height: 2.2rem;
-  margin: 0.5rem 0;
+  margin: 0.4rem 0;
 }
-.application-menu .image-button {
+.app-menu .image-button {
   float: right;
   margin-left: 0.8rem;
 }
 
+.nav-menu {
+  height: 2.7rem;
+  margin: 0.4rem 0;
+}
+.nav-menu .image-button {
+  border: none;
+  border-radius: 0;
+  font-size: 0.9rem;
+  margin: 0 0.8rem;
+  padding: 0.6rem 1rem;
+}
+.nav-menu .right .image-button {
+  float: right;
+}
+.nav-menu .image-button.active {
+  border-bottom: solid 0.2rem;
+  color: #009ade;
+  fill: #009ade;
+}
+
 .image-button,
 input[type=submit] {
   align-items: center;
-  border: 1px solid;
   background-color: white;
+  border: 1px solid;
   border-color: #a0a0a0;
   border-radius: 0.2rem;
   color: #a0a0a0;
+  cursor: pointer;
   display: flex;
   fill: #a0a0a0;
   font-size: 0.8rem;
@@ -86,29 +107,29 @@ input[type=submit] {
   padding-right: 0.4rem;
   width: 1.3rem;
 }
-.image-button.active,
-.image-button:hover,
-.image-button:hover:focus-visible,
-input[type=submit]:hover,
-input[type=submit]:hover:focus-visible {
-  background-color: #009ade;
-  border-color: #009ade;
-  color: white;
-  cursor: pointer;
-  fill: white;
-}
-.image-button:focus-visible,
-input[type=submit]:focus-visible {
-  background-color: #f3f3f3;
-}
-.image-button.active:focus-visible {
-  background-color: #006c9b;
-  border-color: #006c9b;
-}
 .image-button.centered {
   margin: 0 auto;
   width: fit-content;
 }
+.image-button:hover,
+.image-button.active:hover,
+input[type=submit]:hover {
+  background-color: #009ade;
+  border-color: #009ade;
+  color: white;
+  fill: white;
+}
+.image-button:focus-visible,
+.image-button.active:focus-visible,
+input[type=submit]:focus-visible {
+  background-color: #f3f3f3;
+}
+.image-button:hover:focus-visible,
+.image-button.active:hover:focus-visible,
+input[type=submit]:hover:focus-visible {
+  background-color: #006c9b;
+  border-color: #006c9b;
+}
 
 .flashes {
   height: 2.1rem;

app/helpers/application_helper.rb

@@ -45,10 +45,12 @@ module ApplicationHelper
   end
 
   def image_link_to(name, image = nil, options = nil, html_options = {})
-    return "" if html_options.delete(:unless_current) && (url_for(options) == request.path)
+    current = html_options.delete(:current)
+    return "" if (current == :hide) && (url_for(options) == request.path)
 
+    classes = class_names(html_options[:class], "image-button", active: current == :active)
     name = svg_tag("pictograms/#{image}.svg#icon") + name if image
-    link_to name, options, html_options.merge!(class: "image-button") { |k, v1, v2| "#{v1} #{v2}" }
+    link_to name, options, class: classes
   end
 
   def svg_tag(source, options = {})

app/views/layouts/application.html.erb

@@ -11,14 +11,14 @@
   </head>
 
   <body>
-    <div class="application-menu">
+    <div class="app-menu">
       <% if user_signed_in? %>
         <%= image_link_to t(:sign_out), "logout", destroy_user_session_path,
               data: { turbo: true, turbo_method: :delete } %>
       <% else %>
         <%= image_link_to t(:register), "account-plus-outline", new_user_registration_path,
-              unless_current: true %>
+              current: :hide %>
-        <%= image_link_to t(:sign_in), "login", new_user_session_path, unless_current: true %>
+        <%= image_link_to t(:sign_in), "login", new_user_session_path, current: :hide %>
       <% end %>
     </div>
 
@@ -31,6 +31,14 @@
       <% end %>
     </div>
 
+    <div class="nav-menu">
+      <% if user_signed_in? %>
+        <div class="right">
+          <%= image_link_to t('.users'), "account-multiple-outline", users_path, current: :active %>
+        </div>
+      <% end %>
+    </div>
+
     <%= yield %>
   </body>
 </html>

app/views/users/index.html.erb

@@ -1,5 +1,3 @@
-<h1>Users</h1>
-
 <div id="users">
   <% @users.each do |user| %>
     <%= render user %>

config/locales/en.yml

@@ -16,6 +16,9 @@ en:
     sessions:
       new:
         remember_me: Remember me
+  layouts:
+    application:
+      users: Users
   or: or
   register: Register
   sign_in: Sign in