From 5a13a75b2fc067a1f0bd9a89dadfce7726d56269 Mon Sep 17 00:00:00 2001
From: Felix Eckhofer <felix@eckhofer.com>
Date: Sun, 22 Dec 2024 00:18:09 +0100
Subject: [PATCH] Animate hamburger menu
---
.../controllers/navigation_controller.js | 14 ++++++++++++--
app/views/layouts/application.html.erb | 6 +++---
config/tailwind.config.js | 14 ++++++++++++++
3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/app/javascript/controllers/navigation_controller.js b/app/javascript/controllers/navigation_controller.js
index 12fd258..7a1fc41 100644
--- a/app/javascript/controllers/navigation_controller.js
+++ b/app/javascript/controllers/navigation_controller.js
@@ -4,7 +4,17 @@ export default class extends Controller {
static targets = [ "mobileMenu" ];
toggleMenu() {
- this.mobileMenuTarget.classList.toggle("hidden");
+ const menu = this.mobileMenuTarget;
+ if (menu.classList.contains('hidden')) {
+ menu.classList.remove('hidden');
+ menu.classList.remove('motion-safe:animate-slideOut');
+ menu.classList.add('motion-safe:animate-slideIn');
+ } else {
+ menu.classList.remove('motion-safe:animate-slideIn');
+ menu.classList.add('motion-safe:animate-slideOut');
+ setTimeout(() => { menu.classList.add('hidden'); },
+ window.matchMedia("(prefers-reduced-motion: reduce)").matches ?
+ 0 : 300); // Should match the duration in tailwind.config.js
+ }
}
}
-
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 703f96f..b7f7313 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -12,8 +12,8 @@
</head>
<body <%= tag.attributes(body_data_attributes) %>>
- <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">
+ <nav class="bg-slate-100 text-gray-700 shadow relative" data-controller="navigation">
+ <div class="relative bg-slate-100 z-50 container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold text-black"><%= link_to 're:scheduled', '/', class: "!no-underline" %></h1>
<div class="hidden md:flex space-x-4">
@@ -42,7 +42,7 @@
</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">
+ <div id="mobile-menu" class="absolute top-18 bg-slate-100 z-20 container mx-auto hidden md:hidden space-y-4 px-8 pb-4 shadow" 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>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index d6ad82c..06dd449 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -9,6 +9,20 @@ module.exports = {
],
theme: {
extend: {
+ keyframes: {
+ slideIn: {
+ '0%': { transform: 'translateY(-105%)' },
+ '100%': { transform: 'translateY(0)' },
+ },
+ slideOut: {
+ '0%': { transform: 'translateY(0)' },
+ '100%': { transform: 'translateY(-105%)' },
+ },
+ },
+ animation: {
+ slideIn: 'slideIn 0.3s ease-in forwards',
+ slideOut: 'slideOut 0.3s ease-in forwards',
+ },
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
--
GitLab