more commits..

app/static/js/mobile-menu.js

@@ -0,0 +1,40 @@
+// Mobile Menu Functionality
+document.addEventListener('DOMContentLoaded', function () {
+    const mobileFab = document.getElementById('mobile-fab');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (mobileFab && mobileMenu) {
+        // Toggle menu on FAB click
+        mobileFab.addEventListener('click', function () {
+            this.classList.toggle('active');
+            mobileMenu.classList.toggle('active');
+        });
+
+        // Add staggered animation to menu items
+        const menuItems = document.querySelectorAll('.mobile-menu-item');
+        menuItems.forEach((item, index) => {
+            item.style.transitionDelay = `${index * 0.05}s`;
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function (e) {
+            if (mobileMenu.classList.contains('active') &&
+                !mobileFab.contains(e.target) &&
+                !mobileMenu.contains(e.target)) {
+                mobileFab.classList.remove('active');
+                mobileMenu.classList.remove('active');
+            }
+        });
+
+        // Add hover effect to menu items
+        menuItems.forEach(item => {
+            item.addEventListener('mouseenter', function () {
+                this.style.transform = 'translateX(-5px)';
+            });
+
+            item.addEventListener('mouseleave', function () {
+                this.style.transform = '';
+            });
+        });
+    }
+});