working on modal

src/components/Footer.js

@@ -2,8 +2,16 @@ import React from "react";
 import styles from "./Footer.module.css"; // assuming you have a CSS module for Footer
 import { useNavigationHelpers } from "../helpers/navigationHelpers";
 
-export default function Footer({ shopId, cartItemsLength, selectedPage }) {
-  const { goToShop, goToSearch, goToCart } = useNavigationHelpers(shopId);
+export default function Footer({
+  shopId,
+  tableId,
+  cartItemsLength,
+  selectedPage,
+}) {
+  const { goToShop, goToSearch, goToCart } = useNavigationHelpers(
+    shopId,
+    tableId,
+  );
 
   return (
     <div className={styles.item}>

src/components/Header.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
+import { useLocation } from "react-router-dom";
 import { useNavigationHelpers } from "../helpers/navigationHelpers";
 
 const HeaderBar = styled.div`
@@ -225,6 +226,7 @@ const Header = ({
   const [animate, setAnimate] = useState("");
   const rectangleRef = useRef(null);
   const [guestSideOf, setGuestSideOf] = useState(null);
+  const location = useLocation();
 
   const handleImageClick = () => {
     if (showRectangle) {
@@ -251,7 +253,10 @@ const Header = ({
   };
 
   useEffect(() => {
-    if (showRectangle) {
+    const queryParams = new URLSearchParams(location.search);
+    const hasModalParam = queryParams.has("modal");
+
+    if (showRectangle && !hasModalParam) {
       document.addEventListener("mousedown", handleClickOutside);
       window.addEventListener("scroll", handleScroll);
     } else {
@@ -263,7 +268,7 @@ const Header = ({
       document.removeEventListener("mousedown", handleClickOutside);
       window.removeEventListener("scroll", handleScroll);
     };
-  }, [showRectangle]);
+  }, [showRectangle, location.search]);
 
   useEffect(() => {
     setGuestSideOf(guestSideOfClerk);

src/components/Modal.js

@@ -1,15 +1,28 @@
-// src/components/Modal.js
-import React from 'react';
-import styles from './Modal.module.css';
+import React from "react";
+import styles from "./Modal.module.css";
 
 const Modal = ({ isOpen, onClose, children }) => {
   if (!isOpen) return null;
 
+  // Function to handle clicks on the overlay
+  const handleOverlayClick = (event) => {
+    // Close the modal only if the overlay is clicked
+    onClose();
+  };
+
+  // Function to handle clicks on the modal content
+  const handleContentClick = (event) => {
+    // Prevent click event from propagating to the overlay
+    event.stopPropagation();
+  };
+
   return (
-    <div className={styles.modalOverlay}>
-      <div className={styles.modalContent}>
+    <div onClick={handleOverlayClick} className={styles.modalOverlay}>
+      <div className={styles.modalContent} onClick={handleContentClick}>
         {children}
-        <button onClick={onClose} className={styles.closeButton}>Close</button>
+        <button onClick={onClose} className={styles.closeButton}>
+          Close
+        </button>
       </div>
     </div>
   );

src/components/Modal.module.css

@@ -1,34 +1,33 @@
 /* src/components/Modal.module.css */
 .modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-  
-  .modalContent {
-    background: white;
-    padding: 20px;
-    border-radius: 5px;
-    width: 500px;
-    max-width: 100%;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative;
-  }
-  
-  .closeButton {
-    margin-top: 20px;
-    background: #f44336;
-    color: white;
-    border: none;
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-  }
-  
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 80%;
+  height: 80%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.closeButton {
+  margin-top: 20px;
+  background: #f44336;
+  color: white;
+  border: none;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 5px;
+}