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
shivansh-bhatnagar18 · Jun 30, 2024 · de7f95a · de7f95a
1 parent 5460f7f
commit de7f95a
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 11 deletions.
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -129,7 +129,7 @@ const rules = (
 );
 const Navbar: React.FC = () => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
-
+    const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);
     const auth = useAuth();
     const modal = useModal();
     const navigate = useNavigate();
@@ -138,7 +138,13 @@ const Navbar: React.FC = () => {
         location.pathname !== '/login' && location.pathname !== '/signup';
 
     const toggleMenu = () => {
-        setSidebarOpen(!sidebarOpen);
+        if (!sidebarOpen) {
+            setShouldRenderSidebar(true);
+            setTimeout(() => setSidebarOpen(true), 20);
+        } else {
+            setSidebarOpen(false);
+            setTimeout(() => setShouldRenderSidebar(false), 500);
+        }
     };
 
     const goToLogin = () => {
@@ -194,9 +200,13 @@ 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">
+            {shouldRenderSidebar && (
+                <div
+                    className={`fixed inset-0 flex z-20 ${sidebarOpen ? 'opacity-100' : 'opacity-0'} transition-opacity duration-500`}
+                >
+                    <div
+                        className={`bg-gray-300 text-black border-gray-600 w-64 p-4 shadow-lg pl-10 rounded-r-lg relative z-30 transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-500`}
+                    >
                         <button
                             onClick={toggleMenu}
                             className="absolute top-3 right-3"
@@ -253,6 +263,10 @@ const Navbar: React.FC = () => {
                                         ]
                                     );
                                     setSidebarOpen(false);
+                                    setTimeout(
+                                        () => setShouldRenderSidebar(false),
+                                        500
+                                    );
                                 }}
                                 className="mb-2"
                             >
@@ -272,14 +286,18 @@ const Navbar: React.FC = () => {
                                         },
                                     ]);
                                     setSidebarOpen(false);
+                                    setTimeout(
+                                        () => setShouldRenderSidebar(false),
+                                        500
+                                    );
                                 }}
                             >
                                 Rules
                             </Button>
                         </div>
                     </div>
                     <div
-                        className="flex-grow bg-black bg-opacity-50"
+                        className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700"
                         onClick={toggleMenu}
                     ></div>
                 </div>

diff --git 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
@@ -7,13 +7,15 @@ type ModalContainerProps = {
     buttons: ModalButtonArgs[];
     size: 'small' | 'large';
     closeOnBlurClick?: boolean; // Add close prop
+    isVisible: boolean;
 };
 
 const Modal: React.FC<ModalContainerProps> = ({
     content,
     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
@@ -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>