feat: improve menu animations to grow top-to-bottom

Main menu changes:
- Changed from translateX (left-to-right slide) to max-height animation
- Menu now grows from top to bottom with smooth transition
- Transition time: 0.4s ease-in-out for natural feel

Submenu changes:
- Removed display:none which prevented animation
- Now uses only max-height and opacity transitions
- Submenu smoothly expands downward with fade-in effect
- Transition time: 0.4s for height, 0.3s for opacity

Both animations now provide better visual feedback and follow the natural
top-to-bottom reading pattern.

static/css/main.css

@@ -2029,12 +2029,11 @@ a:focus {
     top: 50px; /* Height of action bar */
     left: 0;
     width: 280px;
-    max-height: calc(100vh - 50px);
+    max-height: 0;
     background: #ffffff;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
-    transform: translateX(-100%);
-    transition: transform 0.3s ease-in-out;
-    overflow-y: auto;
+    transition: max-height 0.4s ease-in-out;
+    overflow: hidden;
     z-index: 99;
     pointer-events: none; /* Disable pointer events when hidden */
 }
@@ -2042,13 +2041,15 @@ a:focus {
 /* Show menu when hovering menu itself OR when it has the hover class */
 .navigation-menu:hover,
 .navigation-menu.menu-hover {
-    transform: translateX(0);
+    max-height: calc(100vh - 50px);
+    overflow-y: auto;
     pointer-events: auto; /* Enable pointer events when visible */
 }
 
 /* Legacy class for JS compatibility - keep for backward compatibility */
 .navigation-menu.menu-open {
-    transform: translateX(0);
+    max-height: calc(100vh - 50px);
+    overflow-y: auto;
     pointer-events: auto;
 }
 
@@ -2114,17 +2115,15 @@ a:focus {
 }
 
 .submenu-content {
-    display: none;
     background-color: rgba(0, 0, 0, 0.02);
     max-height: 0;
     overflow: hidden;
     opacity: 0;
-    transition: max-height 0.3s ease, opacity 0.2s ease;
+    transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
 }
 
 /* Show submenu when hovering the submenu container */
 .menu-item-submenu:hover .submenu-content {
-    display: block;
     max-height: 600px;
     opacity: 1;
 }
@@ -2135,7 +2134,6 @@ a:focus {
 }
 
 .menu-item-submenu.submenu-open .submenu-content {
-    display: block;
     max-height: 600px;
     opacity: 1;
 }