Animate hamburger menu

5a13a75b · tribut · d2de4418 · 5a13a75b · 5a13a75b · 5a13a75b
Unverified Commit 5a13a75b authored 6 months ago by tribut
--- 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
+    }
  }
 }
-
--- 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>

--- 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],
      },