From d4965ceeb4da1d824822ca07994c397fa829bd88 Mon Sep 17 00:00:00 2001
From: Felix Eckhofer <felix@eckhofer.com>
Date: Sat, 21 Dec 2024 17:35:23 +0100
Subject: [PATCH] Rework navigation to better react to screen changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Includes hamburger menu ✨
---
.../controllers/navigation_controller.js | 10 +++
app/views/layouts/application.html.erb | 67 +++++++++++++------
2 files changed, 58 insertions(+), 19 deletions(-)
create mode 100644 app/javascript/controllers/navigation_controller.js
diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js
new file mode 100644
index 0000000..12fd258
--- /dev/null
+++ b/app/javascript/controllers/navigation_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+ static targets = [ "mobileMenu" ];
+
+ toggleMenu() {
+ this.mobileMenuTarget.classList.toggle("hidden");
+ }
+}
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3ac6f9a..6162eb4 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -12,27 +12,56 @@
</head>
<body <%= tag.attributes(body_data_attributes) %>>
- <nav class="main-nav bg-slate-100 border-b border-slate-200 shadow">
- <div class="container mx-auto p-5 flex flex-row justify-between">
- <div class="main-nav-left flex flex-row gap-4 items-center">
- <h1 class="text-xl font-bold"><%= link_to 're:scheduled', '/', class: "!no-underline" %></h1>
- <div><%= link_to 'Conferences', conferences_path %></div>
- <div><%= link_to 'Assignments', assignments_path %></div>
- </div>
- <div class="main-nav-right flex-row">
- <% if user_signed_in? %>
- logged in as <%= render partial: 'application/user_avatar', locals: { user: current_user } %>
- <%= link_to 'My Profile', edit_user_registration_path %>
- <%= link_to 'My Assignments', user_assignments_path(current_user) %>
- <%= link_to 'Logout', destroy_user_session_path, data: { turbo_method: :delete } %>
- <% else %>
- not logged in
- <%= link_to 'Login', new_user_session_path %>
- <%= link_to 'Sign Up', new_user_registration_path %>
- <% end %>
+ <nav class="bg-slate-100 text-gray-700 shadow" data-controller="navigation">
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+ <div class="flex items-center space-x-4">
+ <span class="text-xl font-bold text-black">re:scheduled</span>
+ <div class="hidden md:flex space-x-4">
+ <%= link_to 'Conferences', conferences_path, class: 'hover:text-gray-900' %>
+ <%= link_to 'Assignments', assignments_path, class: 'hover:text-gray-900' %>
</div>
</div>
- </nav>
+ <div class="hidden md:flex items-center space-x-4 ml-0 lg:ml-8">
+ <% if user_signed_in? %>
+ <span class="-mr-2 hidden lg:inline">logged in as</span>
+ <%= render partial: 'application/user_avatar', locals: { user: current_user } %>
+ <%= link_to 'My Profile', edit_user_registration_path, class: 'hover:text-gray-900' %>
+ <%= link_to 'My Assignments', user_assignments_path(current_user), class: 'hover:text-gray-900' %>
+ <%= link_to 'Logout', destroy_user_session_path, data: { turbo_method: :delete }, class: 'hover:text-gray-900' %>
+ <% else %>
+ <span class="px-2">not logged in</span>
+ <%= link_to 'Login', new_user_session_path, class: 'hover:text-gray-900' %>
+ <%= link_to 'Sign Up', new_user_registration_path, class: 'hover:text-gray-900' %>
+ <% end %>
+ </div>
+ <div class="md:hidden">
+ <button id="menu-button" class="text-gray-700 hover:text-gray-900 focus:outline-none" data-action="click->navigation#toggleMenu">
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+ </svg>
+ </button>
+ </div>
+ </div>
+ <div id="mobile-menu" class="container mx-auto hidden md:hidden space-y-4 px-8 pb-4" data-navigation-target="mobileMenu">
+ <%= link_to 'Conferences', conferences_path, class: 'block hover:text-gray-900' %>
+ <%= link_to 'Assignments', assignments_path, class: 'block hover:text-gray-900' %>
+ <hr>
+ <% if user_signed_in? %>
+ <div>logged in as <%= render partial: 'application/user_avatar', locals: { user: current_user } %></div>
+ <%= link_to 'My Profile', edit_user_registration_path, class: 'block hover:text-gray-900' %>
+ <%= link_to 'My Assignments', user_assignments_path(current_user), class: 'block hover:text-gray-900' %>
+ <%= link_to 'Logout', destroy_user_session_path, data: { turbo_method: :delete }, class: 'block hover:text-gray-900' %>
+ <% else %>
+ <div>not logged in</div>
+ <%= link_to 'Login', new_user_session_path, class: 'block hover:text-gray-900' %>
+ <%= link_to 'Sign Up', new_user_registration_path, class: 'block hover:text-gray-900' %>
+ <% end %>
+ </div>
+ </nav>
+
+
+
+
<%= render partial: 'shared/flash' %>
<main class="container mx-auto mt-8 px-5 flex">
<%= yield %>
--
GitLab