Skip to content

Commit

Permalink
navbar: Implemented fading in & out effect (#176)
Browse files Browse the repository at this point in the history 
Added tailwind transition and transform properties
with state change of sidebar and modal ,giving
fading effect on opening and closing.

fixes #131
  • Loading branch information
@sksmagr23
sksmagr23 authored Jun 30, 2024
1 parent 5460f7f commit 50ddab2
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 82 deletions.
156 changes: 79 additions & 77 deletions frontend/src/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ const rules = (
);
const Navbar: React.FC = () => {
const [sidebarOpen, setSidebarOpen] = useState(false);

const auth = useAuth();
const modal = useModal();
const navigate = useNavigate();
Expand Down Expand Up @@ -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>
);
};
Expand Down
22 changes: 22 additions & 0 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
10 changes: 7 additions & 3 deletions frontend/src/library/modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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';
Expand All @@ -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 (
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/library/modal/ModalContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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>
Expand Down

0 comments on commit 50ddab2

Please sign in to comment.