From 50ddab2fa9d971963f347c7bc567e39ae3a708e2 Mon Sep 17 00:00:00 2001
From: Saksham Agrawal <153260291+sksmagr23@users.noreply.github.com>
Date: Sun, 30 Jun 2024 23:06:34 +0530
Subject: [PATCH] navbar: Implemented fading in & out effect (#176)

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>