Skip to content
Snippets Groups Projects
Unverified Commit d4965cee authored by tribut's avatar tribut :man_dancing:
Browse files

Rework navigation to better react to screen changes 

Includes hamburger menu :sparkles:
parent bae75412
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/javascript/controllers/navigation_controller.js 0 → 100644
+ 10
− 0
View file @ d4965cee
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "mobileMenu" ];
toggleMenu() {
this.mobileMenuTarget.classList.toggle("hidden");
}
}
app/views/layouts/application.html.erb
+ 48
− 19
View file @ d4965cee
...@@ -12,27 +12,56 @@ ...@@ -12,27 +12,56 @@
</head> </head>
<body <%= tag.attributes(body_data_attributes) %>> <body <%= tag.attributes(body_data_attributes) %>>
<nav class="main-nav bg-slate-100 border-b border-slate-200 shadow"> <nav class="bg-slate-100 text-gray-700 shadow" data-controller="navigation">
<div class="container mx-auto p-5 flex flex-row justify-between"> <div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="main-nav-left flex flex-row gap-4 items-center"> <div class="flex items-center space-x-4">
<h1 class="text-xl font-bold"><%= link_to 're:scheduled', '/', class: "!no-underline" %></h1> <span class="text-xl font-bold text-black">re:scheduled</span>
<div><%= link_to 'Conferences', conferences_path %></div> <div class="hidden md:flex space-x-4">
<div><%= link_to 'Assignments', assignments_path %></div> <%= link_to 'Conferences', conferences_path, class: 'hover:text-gray-900' %>
</div> <%= link_to 'Assignments', assignments_path, class: 'hover:text-gray-900' %>
<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 %>
</div> </div>
</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' %> <%= render partial: 'shared/flash' %>
<main class="container mx-auto mt-8 px-5 flex"> <main class="container mx-auto mt-8 px-5 flex">
<%= yield %> <%= yield %>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Impressum - Datenschutzerklärung