v4.1

index.html

@@ -331,18 +331,17 @@
         
         /* Mobile menu animation */
         .mobile-menu {
-            transform-origin: top;
-            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s ease-out, opacity 0.4s ease-out, transform 0.4s ease-out;
+            opacity: 0;
+            transform: translateY(-20px);
         }
         
         .mobile-menu.show {
-            transform: scaleY(1);
+            max-height: 500px;
             opacity: 1;
-        }
-        
-        .mobile-menu.hide {
-            transform: scaleY(0);
-            opacity: 0;
+            transform: translateY(0);
         }
     </style>
 </head>
@@ -386,7 +385,7 @@
             </div>
             
             <!-- Mobile menu -->
-            <div class="mobile-menu hide md:hidden">
+            <div class="mobile-menu">
                 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                     <a href="#home" class="text-gray-900 block px-3 py-2 text-base font-medium color-transition">Home</a>
                     <a href="#about" class="text-gray-600 hover:text-gray-900 block px-3 py-2 text-base font-medium color-transition">About</a>
@@ -510,7 +509,7 @@
                             </div>
                             <div class="p-4 border border-orange-200 rounded-lg color-transition hover:bg-orange-50">
                                 <p class="text-sm text-gray-600 mb-2">Why this assignee was suggested:</p>
-                                <p class="text-sm text-gray-900">This person was the assignee on previous issues related to similar performance problems.</p>
+                                <p class="text-sm text-gray-900">This person was assignee on previous issues related to similar performance problems.</p>
                             </div>
                         </div>
                     </div>
@@ -762,14 +761,8 @@
             
             if (mobileMenuButton && mobileMenu) {
                 mobileMenuButton.addEventListener('click', function() {
-                    // Toggle the menu visibility with slide down animation
-                    if (mobileMenu.classList.contains('hide')) {
-                        mobileMenu.classList.remove('hide');
-                        mobileMenu.classList.add('show');
-                    } else {
-                        mobileMenu.classList.remove('show');
-                        mobileMenu.classList.add('hide');
-                    }
+                    // Toggle the show class
+                    mobileMenu.classList.toggle('show');
                 });
             }
             
@@ -778,10 +771,16 @@
             mobileMenuLinks.forEach(link => {
                 link.addEventListener('click', function() {
                     mobileMenu.classList.remove('show');
-                    mobileMenu.classList.add('hide');
                 });
             });
             
+            // Close mobile menu when clicking outside
+            document.addEventListener('click', function(event) {
+                if (mobileMenu && !mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
+                    mobileMenu.classList.remove('show');
+                }
+            });
+            
             // Smooth scrolling for anchor links
             document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                 anchor.addEventListener('click', function (e) {