Soverein/sanasto-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shared header, responsive

Browse Source
This commit is contained in:
Runar Ingebrigtsen
2026-01-30 10:09:38 +01:00
parent 32a4ffa70e
commit c407ee3530
5 changed files with 206 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/shared/_header.html.erb
+122
View File
@@ -0,0 +1,122 @@
<header class="bg-white border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4">
<div class="h-16 flex items-center justify-between">
<%= link_to root_path, class: "flex items-center gap-2" do %>
<span class="text-xl font-bold tracking-tight text-indigo-600">Sanasto</span>
<span class="text-xl font-light text-slate-400">Wiki</span>
<% end %>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center gap-3">
<% if local_assigns[:show_request_button] != false %>
<%= link_to "Request Entry", new_request_path,
class: "text-xs font-bold text-emerald-700 px-3 py-2 rounded-md border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 transition" %>
<% end %>
<% if local_assigns[:show_download_button] != false %>
<%= link_to "Download XLSX", download_entries_path(format: :xlsx),
class: "text-xs font-bold text-indigo-700 px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition" %>
<% end %>
<% if local_assigns[:show_browse_button] %>
<%= link_to "Browse", entries_path, class: "text-sm font-medium text-slate-600 hover:text-indigo-600 transition" %>
<% end %>
<% if logged_in? %>
<div class="flex items-center gap-3 ml-2 pl-3 border-l border-slate-200">
<span class="text-sm text-slate-600">
<%= current_user.name %>
</span>
<% if admin? %>
<%= link_to "Admin", admin_root_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
<% end %>
<%= link_to "Sign Out", logout_path, data: { turbo_method: :delete, turbo: false },
class: "text-sm font-medium text-slate-600 hover:text-red-600 transition" %>
</div>
<% else %>
<%= link_to "Sign In", login_path, class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
<% end %>
</div>
<!-- Mobile Navigation -->
<div class="flex md:hidden items-center gap-3">
<% if logged_in? %>
<span class="text-sm text-slate-600">
<%= current_user.name.split.first %>
</span>
<% end %>
<button type="button" id="mobile-menu-button" class="p-2 text-slate-600 hover:text-indigo-600 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 py-3">
<% if logged_in? %>
<div class="py-2 px-2 border-b border-slate-200 mb-2">
<span class="text-sm font-medium text-slate-900">
<%= current_user.name %>
</span>
</div>
<% end %>
<nav class="flex flex-col space-y-1">
<% if local_assigns[:show_request_button] != false %>
<%= link_to "Request Entry", new_request_path,
class: "px-2 py-2 text-sm font-medium text-emerald-700 hover:bg-emerald-50 rounded transition" %>
<% end %>
<% if local_assigns[:show_browse_button] %>
<%= link_to "Browse", entries_path, class: "px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded transition" %>
<% end %>
<% if logged_in? %>
<% if admin? %>
<%= link_to "Admin", admin_root_path, class: "px-2 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50 rounded transition" %>
<% end %>
<%= link_to "Sign Out", logout_path, data: { turbo_method: :delete, turbo: false },
class: "px-2 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded transition" %>
<% else %>
<%= link_to "Sign In", login_path, class: "px-2 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50 rounded transition" %>
<% end %>
</nav>
</div>
</div>
</header>
<script>
function setupMobileMenu() {
const menuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (menuButton && mobileMenu) {
// Remove existing listeners to avoid duplicates
const newMenuButton = menuButton.cloneNode(true);
menuButton.parentNode.replaceChild(newMenuButton, menuButton);
newMenuButton.addEventListener('click', function(e) {
e.stopPropagation();
mobileMenu.classList.toggle('hidden');
});
// Close menu when clicking outside
document.addEventListener('click', function(event) {
const isClickInside = newMenuButton.contains(event.target) || mobileMenu.contains(event.target);
if (!isClickInside && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
// Close menu when navigating with Turbo
document.addEventListener('turbo:click', function() {
if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
}
}
// Run on initial load and on Turbo navigation
document.addEventListener('DOMContentLoaded', setupMobileMenu);
document.addEventListener('turbo:load', setupMobileMenu);
</script>