[update] adding a transition when closing the menu on mobile [update]…

… adding an opaque background to the menu on mobile
Animenosekai · Jun 6, 2022 · f961d80 · f961d80 · vercel · Jun 6, 2022
1 parent 3e3db01
commit f961d80
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/website/components/ui/modals/hamburger.tsx b/website/components/ui/modals/hamburger.tsx
@@ -1,5 +1,8 @@
+import { useEffect, useState } from "react";
+
 import { CloseIcon } from "components/icons/close";
 import Link from "next/link";
+import classNames from "classnames";
 import { useLanguage } from "contexts/language";
 
 export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
@@ -12,20 +15,45 @@ export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
 
 export const HamburgerModal = ({ onClose, ...props }) => {
     const { strings } = useLanguage();
-    return <div className="h-screen animate-enter-menu w-4/5 z-20 top-0 right-0 fixed bg-white shadow-xl flex flex-col space-y-5 items-center sm:hidden">
-        <CloseIcon className="absolute top-0 right-0 mx-10 my-5 cursor-pointer opacity-60 hover:opacity-100 transition" onClick={() => { onClose(); }} />
-        {/* <span className="text-xl justify-center">Menu</span> */}
-        <div className="h-12"></div>
-        <div className="w-full">
-            <hr />
-            <HamburgerMenuElement onClick={onClose} href="/translate" name={strings.pages.translate} />
-            <hr />
-            <HamburgerMenuElement onClick={onClose} href="/documentation" name={strings.pages.documentation} />
-            <hr />
-            <HamburgerMenuElement onClick={onClose} href="/stats" name={strings.pages.stats} />
-            <hr />
+    const [exit, setExit] = useState(true);
+
+    useEffect(() => {
+        setExit(false);
+    }, [])
+
+    const clickHandler = () => { setExit(true); setTimeout(onClose, 300); }
+    return <div onClick={clickHandler} className={classNames(
+        "h-screen transition-all duration-300 w-screen fixed bg-white z-10 sm:hidden",
+        {
+            "bg-opacity-40": !exit,
+            "bg-opacity-0": exit
+        }
+    )}>
+        <div onClick={(ev) => ev.stopPropagation()} className={classNames(
+            "h-screen transition-all duration-300 w-4/5 z-20 top-0 right-0 fixed bg-white shadow-xl flex flex-col space-y-5 items-center sm:hidden",
+            {
+                "opacity-100": !exit,
+                "opacity-0": exit,
+                "translate-x-0": !exit,
+                "translate-x-full": exit,
+                // "animate-exit-menu": exit,
+                // "animate-enter-menu": !exit
+            }
+        )} >
+            <CloseIcon className="absolute top-0 right-0 mx-10 my-5 cursor-pointer opacity-60 hover:opacity-100 transition" onClick={clickHandler} />
+            {/* <span className="text-xl justify-center">Menu</span> */}
+            <div className="h-12"></div>
+            <div className="w-full">
+                <hr />
+                <HamburgerMenuElement onClick={clickHandler} href="/translate" name={strings.pages.translate} />
+                <hr />
+                <HamburgerMenuElement onClick={clickHandler} href="/documentation" name={strings.pages.documentation} />
+                <hr />
+                <HamburgerMenuElement onClick={clickHandler} href="/stats" name={strings.pages.stats} />
+                <hr />
+            </div>
+            <div></div>
+            <span>🧃 Anime no Sekai, 2022</span>
         </div>
-        <div></div>
-        <span>🧃 Anime no Sekai, 2022</span>
     </div>
 }
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
@@ -7,8 +7,6 @@ module.exports = {
     extend: {
       animation: {
         'enter-modal': 'enter-modal 300ms ease 1',
-        'enter-menu': 'enter-menu 300ms ease 1',
-        'exit-menu': 'enter-menu 300ms ease 1 reverse',
       },
       keyframes: {
         'enter-modal': {
@@ -21,16 +19,6 @@ module.exports = {
             backgroundColor: 'rgba(255, 255, 255, 0.8)',
           }
         },
-        'enter-menu': {
-          '0%': {
-            opacity: 0,
-            transform: "translateX(100%)"
-          },
-          '100%': {
-            opacity: 1,
-            transform: "translateX(0%)"
-          }
-        }
       },
     },
     plugins: [],