Show modal dynamically

Author: realstoman

src/components/AppHeader.js

@@ -5,13 +5,29 @@ import useThemeSwitcher from '../hooks/useThemeSwitcher';
 import logoLight from '../images/logo-light.svg';
 import logoDark from '../images/logo-dark.svg';
 import { useState } from 'react';
+import HireMeModal from './HireMeModal';
 
 const AppHeader = () => {
 	const [showMenu, setShowMenu] = useState(false);
+	const [showModal, setShowModal] = useState(false);
 	const [activeTheme, setTheme] = useThemeSwitcher();
 
 	const toggleMenu = showMenu === false ? true : false;
 
+	function showHireMeModal() {
+		if (!showModal) {
+			document
+				.getElementsByTagName('html')[0]
+				.classList.add('overflow-y-hidden');
+			setShowModal(true);
+		} else {
+			document
+				.getElementsByTagName('html')[0]
+				.classList.remove('overflow-y-hidden');
+			setShowModal(false);
+		}
+	}
+
 	return (
 		<div>
 			<nav id="nav" className="sm:container sm:mx-auto">
@@ -107,6 +123,7 @@ const AppHeader = () => {
 						</Link>
 						<div className="border-t-2 pt-3 sm:pt-0 sm:border-t-0 border-primary-light dark:border-secondary-dark">
 							<button
+								onClick={showHireMeModal}
 								className="sm:hidden block text-left text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-4 py-2 mt-2"
 								aria-label="Hire Me Button"
 							>
@@ -121,6 +138,7 @@ const AppHeader = () => {
 						{/* Hire me button start */}
 						<div>
 							<button
+								onClick={showHireMeModal}
 								className="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
 								aria-label="Hire Me Button"
 							>
@@ -144,6 +162,17 @@ const AppHeader = () => {
 						{/* Theme switcher large screen start */}
 					</div>
 				</div>
+				{/* Hire me modal start */}
+				<div>
+					{showModal ? (
+						<HireMeModal
+							onClose={showHireMeModal}
+							onRequest={showHireMeModal}
+						/>
+					) : null}
+					{showModal ? showHireMeModal : null}
+				</div>
+				{/* Hire me modal end */}
 			</nav>
 		</div>
 	);

src/components/HireMeModal.js

@@ -1,6 +1,8 @@
-const HireMeModal = () => {
+import { FiX } from 'react-icons/fi';
+
+const HireMeModal = ({ onClose, onRequest }) => {
 	return (
-		<div className="fixed inset-0 z-30">
+		<div className="fixed inset-0 z-30 transition-all duration-500">
 			{/* Modal Background */}
 			<div className="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"></div>
 
@@ -12,8 +14,11 @@ const HireMeModal = () => {
 							<h5 className=" text-primary-dark dark:text-primary-light text-2xl">
 								What project are you looking for?
 							</h5>
-							<button className="px-4 font-bold text-primary-dark dark:text-primary-light">
-								X
+							<button
+								onClick={onClose}
+								className="px-4 font-bold text-primary-dark dark:text-primary-light"
+							>
+								<FiX className="text-3xl" />
 							</button>
 						</div>
 						<div className="modal-body p-5 w-full h-full">
@@ -67,6 +72,7 @@ const HireMeModal = () => {
 
 								<div className="mt-6 pb-4 sm:pb-1">
 									<button
+										onClick={onRequest}
 										className="px-4
 											sm:px-6
 											py-2
@@ -79,7 +85,7 @@ const HireMeModal = () => {
 											rounded-md
 											sm:rounded-lg
 											focus:ring-1 focus:ring-indigo-900"
-										type="submit"
+										type="button"
 										aria-label="Submit Request"
 									>
 										Send Request
@@ -89,6 +95,8 @@ const HireMeModal = () => {
 						</div>
 						<div className="modal-footer mt-2 sm:mt-0 py-5 px-8 border0-t text-right">
 							<button
+								onClick={onClose}
+								type="button"
 								className=" px-4
 									sm:px-6
 									py-2