Add overlay pages

client/src/App.css

@@ -56,8 +56,8 @@ h4 {
 }
 
 .wrapper {
-  min-height: 100vh;
-  min-width: 100vw;
+  height: 100%;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,7 +67,7 @@ h4 {
   z-index: 10;
   color: white;
   text-align: center;
-  min-height: 80vh;
+  height: 80%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

client/src/App.js

@@ -14,7 +14,7 @@ function App() {
   const [foods, setFoods] = useState([]);
   const pages = ["landing", "welcome", "topics", "foods", "council"];
   const [currentView, setCurrentView] = useState(pages[0]);
-  const [isOverlayActive, setIsOverlayActive] = useState(true);
+  const [isActiveOverlay, setIsActiveOverlay] = useState(true);
   const [backgroundImageURL, setBackgroundImageURL] = useState(
     "/images/backgrounds/zoomed-out.jpg"
   );
@@ -36,7 +36,6 @@ function App() {
   }, [currentView]);
 
   function continueForward(props) {
-    // Set properties
     if (props && props.hasOwnProperty("humanName")) {
       setHumanName(props.humanName);
     } else if (props && props.hasOwnProperty("topic")) {
@@ -45,30 +44,23 @@ function App() {
       setFoods(props.foods);
     }
 
-    // Update index
-
     const currentIndex = pages.indexOf(currentView);
-    const nextIndex = (currentIndex + 1) % pages.length; // Use modulus to cycle back to the start
-
-    // Set new view
+    const nextIndex = (currentIndex + 1) % pages.length;
 
-    if (pages[nextIndex] == "council") {
-      toggleOverlay();
+    if (pages[nextIndex] === "council") {
+      setIsActiveOverlay(false);
     }
 
     setCurrentView(pages[nextIndex]);
   }
 
-  // Placeholder for goBack function implementation
-  function goBack() {}
-
-  function toggleOverlay() {
-    setIsOverlayActive(!isOverlayActive);
+  function goBack() {
+    // Placeholder for goBack function implementation
   }
 
   return (
     <div className="App" style={backgroundStyle}>
-      <Overlay isActive={isOverlayActive && currentView !== "council"}>
+      <Overlay isActive={isActiveOverlay && currentView !== "council"}>
         {currentView === "landing" ? (
           <Landing onContinueForward={continueForward} />
         ) : currentView === "welcome" ? (
@@ -78,10 +70,7 @@ function App() {
         ) : currentView === "foods" ? (
           <Foods topic={topic} onContinueForward={continueForward} />
         ) : (
-          <div>
-            <Navbar topic={topic} onToggleOverlay={toggleOverlay} />
-            <Council options={{ humanName, topic, foods }} />
-          </div>
+          <Council options={{ humanName, topic, foods }} />
         )}
       </Overlay>
     </div>

client/src/components/Contact.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Contact() {
+  return <div></div>;
+}
+
+export default Contact;

client/src/components/Council.jsx

@@ -1,9 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 import FoodItem from "./FoodItem";
+import Overlay from "./Overlay";
+import About from "./About";
+import Settings from "./Settings";
+import Contact from "./Contact";
+import Share from "./Share";
+import Navbar from "./Navbar"; // Assuming you have this import
 import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
   const { foods } = options;
+  const [activeOverlay, setActiveOverlay] = useState(""); // Tracks which overlay to show
   const { width: screenWidth } = useWindowSize();
 
   const foodsContainerStyle = {
@@ -17,23 +24,55 @@ function Council({ options }) {
     alignItems: "center",
   };
 
+  // Function to handle overlay content based on navbar clicks
+  const displayOverlay = (section) => {
+    setActiveOverlay(section); // Update state to control overlay content
+  };
+
+  // Conditional rendering of overlay content based on activeOverlay state
+  const renderOverlayContent = () => {
+    switch (activeOverlay) {
+      case "about":
+        return <About />;
+      case "settings":
+        return <Settings />;
+      case "contact":
+        return <Contact />;
+      case "share":
+        return <Share />;
+      default:
+        return null; // No overlay content if no section is active
+    }
+  };
+
   return (
-    <div className="wrapper">
-      <div style={foodsContainerStyle}>
-        {foods.map((food, index) => (
-          <FoodItem
-            key={index}
-            food={food}
-            index={index}
-            total={foods.length}
-            screenWidth={screenWidth}
-          />
-        ))}
-      </div>
-      <div className="text-container" style={{ justifyContent: "end" }}>
-        <div>
-          <h1>Text goes here</h1>
+    <div style={{ height: "100%", width: "100%" }}>
+      <div className="wrapper">
+        <div
+          className="text-container"
+          style={{ justifyContent: "end", zIndex: -10 }}
+        >
+          <h2>
+            Lorem ipsum dolor sit.
+            <br />
+            Lorem ipsum dolor sit amet.
+          </h2>
+        </div>
+        <div style={foodsContainerStyle}>
+          {foods.map((food, index) => (
+            <FoodItem
+              key={index}
+              food={food}
+              index={index}
+              total={foods.length}
+              screenWidth={screenWidth}
+            />
+          ))}
         </div>
+        <Navbar topic={options.topic} onDisplayOverlay={displayOverlay} />
+        <Overlay isActive={activeOverlay !== ""}>
+          {renderOverlayContent()}
+        </Overlay>
       </div>
     </div>
   );

client/src/components/Navbar.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { capitalizeFirstLetter } from "../utils";
 
-function Navbar({ topic, onToggleOverlay }) {
+function Navbar({ topic, onDisplayOverlay }) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
@@ -14,6 +14,7 @@ function Navbar({ topic, onToggleOverlay }) {
     right: 0,
     margin: "0 auto",
     width: "calc(90% + 40px)", // Adjusted width
+    pointerEvents: "auto",
   };
 
   const navbarItemStyle = {
@@ -40,7 +41,7 @@ function Navbar({ topic, onToggleOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onToggleOverlay("about")}
+            onClick={() => onDisplayOverlay("about")}
             style={linkItemStyle}
           >
             ABOUT
@@ -50,7 +51,7 @@ function Navbar({ topic, onToggleOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onToggleOverlay("settings")}
+            onClick={() => onDisplayOverlay("settings")}
             style={linkItemStyle}
           >
             SETTINGS
@@ -60,7 +61,7 @@ function Navbar({ topic, onToggleOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onToggleOverlay("contact")}
+            onClick={() => onDisplayOverlay("contact")}
             style={linkItemStyle}
           >
             CONTACT
@@ -70,7 +71,7 @@ function Navbar({ topic, onToggleOverlay }) {
           <a
             className="link"
             href="#"
-            onClick={() => onToggleOverlay("share")}
+            onClick={() => onDisplayOverlay("share")}
             style={linkItemStyle}
           >
             SHARE

client/src/components/Overlay.jsx

@@ -6,20 +6,22 @@ function Overlay({ isActive, children }) {
   useEffect(() => {
     if (isActive) {
       setOverlayStyle({
-        position: "absolute",
+        position: "fixed",
         top: 0,
         left: 0,
         height: "100%",
         width: "100%",
         backgroundColor: "rgba(0, 0, 0, 0.5)",
+        pointerEvents: "auto",
       });
     } else {
       setOverlayStyle({
-        position: "relative",
+        position: "fixed",
         top: 0,
         left: 0,
         height: "100%",
         width: "100%",
+        pointerEvents: "none",
       });
     }
   }, [isActive]);

client/src/components/Settings.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Settings() {
+  return <div></div>;
+}
+
+export default Settings;

client/src/components/Share.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Share() {
+  return <div></div>;
+}
+
+export default Share;