From 1a5ba161218360809599c17a2e7bd8d245d883d5 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 9 Nov 2025 21:15:38 +0000
Subject: [PATCH] fix: add visible animation to hamburger menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes to make the menu animation clearly visible:
- Added opacity transition (0 → 1) with 0.3s ease
- Changed max-height to fixed 800px for consistent timing
- Used cubic-bezier(0.4, 0, 0.2, 1) easing for natural feel
- Increased transition duration to 0.5s
- Combined max-height and opacity creates smooth expand + fade effect

The menu now smoothly grows from top-to-bottom with a visible fade-in,
making the animation much more apparent when hovering the hamburger button.
---
 static/css/main.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 57ad4df..492b5b4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2032,23 +2032,26 @@ a:focus {
     max-height: 0;
     background: #ffffff;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
-    transition: max-height 0.4s ease-in-out;
+    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
     overflow-y: auto;
     z-index: 99;
     pointer-events: none; /* Disable pointer events when hidden */
+    opacity: 0;
 }
 
 /* Show menu when hovering menu itself OR when it has the hover class */
 .navigation-menu:hover,
 .navigation-menu.menu-hover {
-    max-height: calc(100vh - 50px);
+    max-height: 800px; /* Fixed height for consistent animation timing */
     pointer-events: auto; /* Enable pointer events when visible */
+    opacity: 1;
 }
 
 /* Legacy class for JS compatibility - keep for backward compatibility */
 .navigation-menu.menu-open {
-    max-height: calc(100vh - 50px);
+    max-height: 800px;
     pointer-events: auto;
+    opacity: 1;
 }
 
 .menu-content {