Work with navbar overlay flow

client/src/components/About.jsx

@@ -3,8 +3,41 @@ import React from "react";
 function About() {
   return (
     <div className="wrapper">
-      <div className="text-container">
-        <h1>About</h1>
+      <div className="text-container" style={{ justifyContent: "center" }}>
+        <h4>
+          Welcome to the Council of Foods! Here you can listen to Foods
+          <br /> discussing the broken food system and even take part in the
+          <br /> conversation. You will hear, from the foods themselves, what
+          <br /> their eco-social influence and guiding ethical principles are
+          and
+          <br /> discuss together what actions need to be taken to form a
+          locally
+          <br /> and globally sustainable food system.
+        </h4>
+        <h4>
+          Each food has different backgrounds, the mass produced, the
+          <br /> locally grown, the genetically modified, the processed, the
+          fair
+          <br /> trade, the affordable and the biological. All the foods are
+          <br /> assigned an AI language model, each prompted on different
+          <br /> knowledges and ethical guidelines. Therefore, the members have
+          <br /> divergent ethical positions and agendas, voicing a variety of
+          <br /> perspectives in the Council of Foods.
+        </h4>
+        <h4>
+          Some more information about the AI LLM, the idea behind the
+          <br /> project, the process of talking with food system experts and
+          how
+          <br /> their opinions and perspectives got turned into prompts for
+          food
+          <br /> AIs. Some more information about the AI LLM, the idea behind
+          the
+          <br /> project, the process of talking with food system experts and
+          how
+          <br /> their opinions and perspectives got turned into prompts for
+          food
+          <br /> AIs.
+        </h4>
       </div>
     </div>
   );

client/src/components/Contact.jsx

@@ -1,7 +1,23 @@
 import React from "react";
 
 function Contact() {
-  return <div></div>;
+  return (
+    <div className="wrapper">
+      <div className="text-container" style={{ justifyContent: "center" }}>
+        <h3>
+          The project is an initiative by art & design
+          <br /> collective Nonhuman Nonsense developed in
+          <br /> collaboration with Studio Other Spaces,
+          <br /> In4Art, Elliot, Albin and others.
+        </h3>
+        <h3>
+          @nonhuman-nonsense
+          <br /> nonhuman-nonsense.com
+          <br /> hello@nonhuman-nonsense.com
+        </h3>
+      </div>
+    </div>
+  );
 }
 
 export default Contact;

client/src/components/Council.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import FoodItem from "./FoodItem";
 import Overlay from "./Overlay";
 import About from "./About";
-import Settings from "./Settings";
+import Topics from "./Topics";
 import Contact from "./Contact";
 import Share from "./Share";
 import Navbar from "./Navbar"; // Assuming you have this import
@@ -35,7 +35,7 @@ function Council({ options }) {
       case "about":
         return <About />;
       case "settings":
-        return <Settings />;
+        return <Topics currentTopic={options.topic} />;
       case "contact":
         return <Contact />;
       case "share":
@@ -48,16 +48,17 @@ function Council({ options }) {
   return (
     <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>
+        (
+        {activeOverlay === "" && (
+          <div className="text-container" style={{ justifyContent: "end" }}>
+            <h2>
+              Lorem ipsum dolor sit.
+              <br />
+              Lorem ipsum dolor sit amet.
+            </h2>
+          </div>
+        )}
+        )
         <div style={foodsContainerStyle}>
           {foods.map((food, index) => (
             <FoodItem
@@ -69,10 +70,14 @@ function Council({ options }) {
             />
           ))}
         </div>
-        <Navbar topic={options.topic} onDisplayOverlay={displayOverlay} />
         <Overlay isActive={activeOverlay !== ""}>
           {renderOverlayContent()}
         </Overlay>
+        <Navbar
+          topic={options.topic}
+          activeOverlay={activeOverlay}
+          onDisplayOverlay={displayOverlay}
+        />
       </div>
     </div>
   );

client/src/components/FoodButton.jsx

@@ -26,7 +26,6 @@ function FoodButton({
   const buttonStyle = {
     marginLeft: "5px",
     marginRight: "5px",
-    backgroundColor: "black",
     width: "75px",
     height: "75px",
     borderRadius: "50%",
@@ -38,8 +37,8 @@ function FoodButton({
       : isSelected
       ? "2px solid white"
       : selectLimitReached
-      ? "2px solid transparent"
-      : "2px solid transparent",
+      ? "2px solid rgb(255,255,255,0.5)"
+      : "2px solid rgb(255,255,255,0.5)",
   };
 
   const imageStyle = {

client/src/components/NavItem.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+function NavItem({ name, onDisplayOverlay, isActive }) {
+  const navItemStyle = {
+    marginLeft: "25px",
+    cursor: "pointer",
+  };
+
+  return (
+    <h3 style={{ margin: "0", padding: "0" }}>
+      <a
+        className="link"
+        href="#"
+        onClick={(e) => {
+          e.preventDefault(); // Prevent default anchor action
+          onDisplayOverlay(name); // Trigger overlay display
+        }}
+        style={{
+          ...navItemStyle,
+          textDecoration: isActive ? "underline" : "none", // Underline if active
+        }}
+      >
+        {name.toUpperCase()}
+      </a>
+    </h3>
+  );
+}
+
+export default NavItem;

client/src/components/Navbar.jsx

@@ -1,7 +1,8 @@
 import React from "react";
+import NavItem from "./NavItem";
 import { capitalizeFirstLetter } from "../utils";
 
-function Navbar({ topic, onDisplayOverlay }) {
+function Navbar({ topic, activeOverlay, onDisplayOverlay }) {
   const navbarStyle = {
     paddingTop: "10px",
     display: "flex",
@@ -13,72 +14,33 @@ function Navbar({ topic, onDisplayOverlay }) {
     left: 0,
     right: 0,
     margin: "0 auto",
-    width: "calc(90% + 40px)", // Adjusted width
+    width: "calc(90% + 40px)",
     pointerEvents: "auto",
   };
 
-  const navbarItemStyle = {
-    margin: "0",
-    padding: "0",
-  };
-
-  const linkItemStyle = {
-    marginLeft: "25px",
-  };
+  const navItems = ["about", "settings", "contact", "share"];
 
   return (
-    <div style={navbarStyle}>
+    <nav style={navbarStyle} role="navigation">
       <div>
-        <h3 style={navbarItemStyle}>
+        <h3 style={{ margin: "0", padding: "0" }}>
           <a className="link" href="/">
             COUNCIL OF FOODS
           </a>
         </h3>
         <h4>{capitalizeFirstLetter(topic)}</h4>
       </div>
       <div style={{ display: "flex" }}>
-        <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            onClick={() => onDisplayOverlay("about")}
-            style={linkItemStyle}
-          >
-            ABOUT
-          </a>
-        </h3>
-        <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            onClick={() => onDisplayOverlay("settings")}
-            style={linkItemStyle}
-          >
-            SETTINGS
-          </a>
-        </h3>
-        <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            onClick={() => onDisplayOverlay("contact")}
-            style={linkItemStyle}
-          >
-            CONTACT
-          </a>
-        </h3>
-        <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            onClick={() => onDisplayOverlay("share")}
-            style={linkItemStyle}
-          >
-            SHARE
-          </a>
-        </h3>
+        {navItems.map((item) => (
+          <NavItem
+            key={item}
+            name={item}
+            onDisplayOverlay={onDisplayOverlay}
+            isActive={activeOverlay === item} // Determine active state
+          />
+        ))}
       </div>
-    </div>
+    </nav>
   );
 }
 

client/src/components/Overlay.jsx

@@ -11,7 +11,7 @@ function Overlay({ isActive, children }) {
         left: 0,
         height: "100%",
         width: "100%",
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backgroundColor: "rgba(0, 0, 0, 0.7)",
         pointerEvents: "auto",
       });
     } else {

client/src/components/Topics.jsx

@@ -1,11 +1,12 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { capitalizeFirstLetter } from "../utils";
 
 function Topics(props) {
   const [selectedTopic, setSelectedTopic] = useState("");
   const [customTopic, setCustomTopic] = useState("");
   const topicTextareaRef = useRef(null);
 
+  // Topics array remains unchanged
   const topics = [
     "seed patents and ownership",
     "labour conditions & modern slavery",
@@ -15,21 +16,37 @@ function Topics(props) {
     "choose your own",
   ];
 
-  const shouldShowNextButton =
-    selectedTopic &&
-    !(selectedTopic.toLowerCase() === "choose your own" && !customTopic.trim());
+  // useEffect hook to listen for changes in props.currentTopic
+  useEffect(() => {
+    if (props.currentTopic) {
+      selectTopic(props.currentTopic);
+    }
+  }, [props.currentTopic]); // Dependency array includes only currentTopic
 
+  // Function to set selectedTopic and focus on textarea if needed
   function selectTopic(topic) {
-    setSelectedTopic(topic);
+    // Check if the topic is in the predefined list or not
+    const topicExists = topics.some(
+      (t) => t.toLowerCase() === topic.toLowerCase()
+    );
 
-    if (topic.toLowerCase() === "choose your own") {
-      // Set a slight delay before focusing to ensure the textarea is visible
+    if (topicExists) {
+      setSelectedTopic(topic);
+    } else {
+      // If the topic is not in the list, consider it a custom topic
+      setCustomTopic(topic); // Set the unrecognized topic as the custom topic
+      setSelectedTopic("choose your own"); // Automatically select "choose your own"
+    }
+
+    // Focus on the textarea if "choose your own" is selected
+    if (!topicExists || topic.toLowerCase() === "choose your own") {
       setTimeout(() => {
         topicTextareaRef.current && topicTextareaRef.current.focus();
       }, 0);
     }
   }
 
+  // Function to customize button style based on selected topic
   function topicButtonStyle(topic) {
     return {
       marginBottom: "15px",
@@ -38,22 +55,27 @@ function Topics(props) {
     };
   }
 
+  // Function to handle custom topic input changes
   function handleInputTopic(e) {
     const newTopic = e.target.value;
-
     const capitalizedTopic = capitalizeFirstLetter(newTopic);
-
     setCustomTopic(capitalizedTopic);
   }
 
+  // Function to proceed with the selected or custom topic
   function onContinueForward() {
-    if (selectedTopic.toLowerCase() === "choose your own") {
-      props.onContinueForward({ topic: customTopic });
-    } else {
-      props.onContinueForward({ topic: selectedTopic });
-    }
+    const topic =
+      selectedTopic.toLowerCase() === "choose your own"
+        ? customTopic
+        : selectedTopic;
+    props.onContinueForward({ topic });
   }
 
+  // Conditional rendering for showing the Next button
+  const shouldShowNextButton =
+    selectedTopic &&
+    !(selectedTopic.toLowerCase() === "choose your own" && !customTopic.trim());
+
   return (
     <div className="wrapper">
       <div className="text-container">