fixed animation for mobile nav

.gitignore

@@ -29,4 +29,5 @@ Thumbs.db
 # Uncomment the ones you're not using
 # yarn.lock
 # package-lock.json
-# pnpm-lock.yamlw
+# pnpm-lock.yamlw
+

src/components/Navbar.tsx

@@ -71,8 +71,10 @@ export function Navbar({ onNav }: { onNav: (id: string) => void }) {
       </div>
 
       <div
-        className={`md:hidden transition-[max-height] duration-300 ${
+        className={`md:hidden overflow-hidden transition-[max-height,opacity,transform] duration-300 ease-out ${
-          open ? "max-h-96 overflow-visible" : "max-h-0 overflow-hidden"
+          open
+            ? "max-h-96 opacity-100 translate-y-0"
+            : "max-h-0 opacity-0 -translate-y-2 pointer-events-none"
         }`}
       >
         <div className="space-y-2 border-t border-secondary bg-bg px-4 py-3">