From ea45c72a8b89e3889673ce574a1fe8f5b53624e0 Mon Sep 17 00:00:00 2001
From: sksmagr23 <sakshamag34@gmail.com>
Date: Sun, 30 Jun 2024 10:36:00 +0530
Subject: [PATCH] frontend: Implemented fading in & out effect on opening and
 closing of sidebar and modal objects

Added tailwind transition and transform properties
with state change of sidebar and modal ,giving
fading effect on opening and closing.

fixes #131
---
 frontend/src/Navbar.tsx                     | 156 ++++++++++----------
 frontend/src/index.css                      |  22 +++
 frontend/src/library/modal/Modal.tsx        |  10 +-
 frontend/src/library/modal/ModalContext.tsx |   7 +-
 4 files changed, 113 insertions(+), 82 deletions(-)

diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index 9b75351a..0550fb5e 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -129,7 +129,6 @@ const rules = (
 );
 const Navbar: React.FC = () => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
-
     const auth = useAuth();
     const modal = useModal();
     const navigate = useNavigate();
@@ -194,96 +193,99 @@ const Navbar: React.FC = () => {
                     </>
                 )}
             </div>
-            {sidebarOpen && (
-                <div className="fixed inset-0 flex z-20">
-                    <div className="bg-gray-300 text-black border-gray-600 w-64 p-4 shadow-lg pl-10 rounded-r-lg relative z-30">
-                        <button
-                            onClick={toggleMenu}
-                            className="absolute top-3 right-3"
-                        >
-                            <img
-                                src="/close.png"
-                                alt="Close menu"
-                                className="w-7 h-7 sm:w-8 sm:h-8 md:w-8 md:h-8 lg:w-10 lg:h-10"
-                            />
-                        </button>
-                        {auth.isLoggedIn() ? (
-                            <>
-                                <div className="mb-2 mt-20 text-2xl font-kavoon align-center text-stroke-2 text-white font-bold">
-                                    {auth.getUser()?.name}
-                                </div>
-                                <Button
-                                    variant="accept"
-                                    size="medium"
-                                    fontSize="text-2xl"
-                                    onClick={auth.logout}
-                                    className="mb-2 mt-5"
-                                >
-                                    Logout
-                                </Button>
-                            </>
-                        ) : (
-                            <>
-                                <Button
-                                    variant="accept"
-                                    size="medium"
-                                    fontSize="text-2xl"
-                                    onClick={() => navigate('/login')}
-                                    className="mb-2 mt-20"
-                                >
-                                    Login
-                                </Button>
-                            </>
-                        )}
-                        <div className="mt-4">
+            <div
+                className={`fixed inset-0 flex z-20 transition-opacity duration-300 ${sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+            >
+                <div
+                    className={`bg-gray-300 text-black border-gray-600 ${sidebarOpen ? 'w-64' : 'w-0'} p-4 shadow-lg pl-10 rounded-r-lg relative z-30 transform transition-width duration-300 `}
+                    style={{
+                        boxShadow: sidebarOpen
+                            ? '0px 0px 20px rgba(0, 0, 0, 0.3)'
+                            : 'none',
+                    }}
+                >
+                    <button
+                        onClick={toggleMenu}
+                        className="absolute top-3 right-3"
+                    >
+                        <img
+                            src="/close.png"
+                            alt="Close menu"
+                            className="w-7 h-7 sm:w-8 sm:h-8 md:w-8 md:h-8 lg:w-10 lg:h-10"
+                        />
+                    </button>
+                    {auth.isLoggedIn() ? (
+                        <>
+                            <div className="mb-2 mt-20 text-2xl font-kavoon align-center text-stroke-2 text-white font-bold">
+                                {auth.getUser()?.name}
+                            </div>
                             <Button
                                 variant="accept"
                                 size="medium"
                                 fontSize="text-2xl"
-                                onClick={() => {
-                                    modal.show(
-                                        'aboutUsModal',
-                                        aboutUs,
-                                        'large',
-                                        [
-                                            {
-                                                text: 'Close',
-                                                type: 'submit',
-                                            },
-                                        ]
-                                    );
-                                    setSidebarOpen(false);
-                                }}
-                                className="mb-2"
+                                onClick={auth.logout}
+                                className={`mb-2 mt-5 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
                             >
-                                About Us
+                                Logout
                             </Button>
-                        </div>
-                        <div className="mt-4">
+                        </>
+                    ) : (
+                        <>
                             <Button
                                 variant="accept"
                                 size="medium"
                                 fontSize="text-2xl"
-                                onClick={() => {
-                                    modal.show('rulesModal', rules, 'large', [
-                                        {
-                                            text: 'Close',
-                                            type: 'submit',
-                                        },
-                                    ]);
-                                    setSidebarOpen(false);
-                                }}
+                                onClick={() => navigate('/login')}
+                                className={`mb-2 mt-20 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
                             >
-                                Rules
+                                Login
                             </Button>
-                        </div>
+                        </>
+                    )}
+                    <div className="mt-4">
+                        <Button
+                            variant="accept"
+                            size="medium"
+                            fontSize="text-2xl"
+                            onClick={() => {
+                                modal.show('aboutUsModal', aboutUs, 'large', [
+                                    {
+                                        text: 'Close',
+                                        type: 'submit',
+                                    },
+                                ]);
+                                toggleMenu();
+                            }}
+                            className={`mb-2 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
+                        >
+                            About Us
+                        </Button>
+                    </div>
+                    <div className="mt-4">
+                        <Button
+                            variant="accept"
+                            size="medium"
+                            fontSize="text-2xl"
+                            onClick={() => {
+                                modal.show('rulesModal', rules, 'large', [
+                                    {
+                                        text: 'Close',
+                                        type: 'submit',
+                                    },
+                                ]);
+                                toggleMenu();
+                            }}
+                            className={`${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
+                        >
+                            Rules
+                        </Button>
                     </div>
-                    <div
-                        className="flex-grow bg-black bg-opacity-50"
-                        onClick={toggleMenu}
-                    ></div>
                 </div>
-            )}
+                <div
+                    className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700"
+                    onClick={toggleMenu}
+                ></div>
+            </div>
         </div>
     );
 };
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9d5282c3..c7224e15 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -52,3 +52,25 @@ body {
         -1.35px 1.35px 0 black,
         1.35px 1.35px 0 black;
 }
+
+.fade-enter {
+    display: none;
+    opacity: 0;
+}
+
+.fade-enter-active {
+    display: block;
+    opacity: 1;
+    transition: opacity 500ms;
+}
+
+.fade-exit {
+    display: block;
+    opacity: 1;
+}
+
+.fade-exit-active {
+    opacity: 0;
+    transition: opacity 500ms;
+    display: none;
+}
diff --git a/frontend/src/library/modal/Modal.tsx b/frontend/src/library/modal/Modal.tsx
index 659eff02..f8d196a9 100644
--- a/frontend/src/library/modal/Modal.tsx
+++ b/frontend/src/library/modal/Modal.tsx
@@ -7,6 +7,7 @@ type ModalContainerProps = {
     buttons: ModalButtonArgs[];
     size: 'small' | 'large';
     closeOnBlurClick?: boolean; // Add close prop
+    isVisible: boolean;
 };
 
 const Modal: React.FC<ModalContainerProps> = ({
@@ -14,6 +15,7 @@ const Modal: React.FC<ModalContainerProps> = ({
     buttons,
     size,
     closeOnBlurClick = true,
+    isVisible,
 }) => {
     const { hide } = useModal();
     const modalRef = useRef<HTMLDivElement>(null);
@@ -35,7 +37,7 @@ const Modal: React.FC<ModalContainerProps> = ({
         return () => document.removeEventListener('keydown', handleEscape);
     }, [hide, closeOnBlurClick]);
     let modalClass =
-        'bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-10 items-center justify-center';
+        'bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-10 items-center justify-center transition-all duration-500 transform';
 
     if (size === 'small') {
         modalClass += ' w-11/12 h-1/2 sm:w-1/2 sm:h-1/2 md:w-1/3 md:h-1/3';
@@ -47,9 +49,11 @@ const Modal: React.FC<ModalContainerProps> = ({
             <div
                 ref={modalRef}
                 onClick={closeModal}
-                className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto z-30 "
+                className={`fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto z-30 transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'}`}
             >
-                <div className={modalClass}>
+                <div
+                    className={`${modalClass} ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'}`}
+                >
                     {content}
                     {buttons.map((button) => {
                         return (
diff --git a/frontend/src/library/modal/ModalContext.tsx b/frontend/src/library/modal/ModalContext.tsx
index a15d9c4c..96c587c9 100644
--- a/frontend/src/library/modal/ModalContext.tsx
+++ b/frontend/src/library/modal/ModalContext.tsx
@@ -73,7 +73,9 @@ export const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
     function hide() {
         setcurrentlyActiveModalId(null);
         setIsVisible(false);
-        setModalContent(null);
+        setTimeout(() => {
+            setModalContent(null);
+        }, 500);
     }
     function updateContent(id: string, content: ReactNode) {
         if (id === currentlyActiveModalId) {
@@ -84,12 +86,13 @@ export const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
     return (
         <ModalContext.Provider value={{ show, hide, updateContent }}>
             {children}
-            {isVisible && (
+            {modalContent && (
                 <Modal
                     content={modalContent}
                     buttons={modalButtons}
                     size={modalSize}
                     closeOnBlurClick={modalCloseOnBlurClick}
+                    isVisible={isVisible}
                 />
             )}
         </ModalContext.Provider>