Improve mobile menu

Author: escherlies

src/components/MobileMenu.tsx

@@ -20,18 +20,9 @@ export default function MobileMenu(): JSX.Element {
 
   return (
     <div class="fixed top-2 right-4 z-50 md:hidden">
-      {/* Burger Button */}
-      <button
-        onClick={toggleMenu}
-        class="p-2 rounded-full transition-colors text-white"
-        aria-label="Toggle menu"
-      >
-        {isOpen() ? <BsX size={35} /> : <BsList size={35} />}
-      </button>
-
       {/* Mobile Menu Dropdown */}
       {isOpen() && (
-        <div class="absolute top-12 right-0 w-56 burger-menu">
+        <div class="absolute top-5 right-5 w-56 burger-menu">
           <div class="glass p-4 rounded-lg">
             <nav class="flex flex-col space-y-4">
               {/* Home */}
@@ -83,6 +74,15 @@ export default function MobileMenu(): JSX.Element {
           </div>
         </div>
       )}
+
+      {/* Burger Button */}
+      <button
+        onClick={toggleMenu}
+        class="text-white glass !p-2 !rounded-full"
+        aria-label="Toggle menu"
+      >
+        {isOpen() ? <BsX size={35} /> : <BsList size={35} />}
+      </button>
     </div>
   );
 }

src/index.css

@@ -64,22 +64,7 @@ body {
   z-index: 2;
 }
 
-/* Burger Menu Animation */
-.burger-menu {
-  animation: slideIn 0.3s ease-out forwards;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 
 .debug {
   border: 2px dashed blue;