Add navbar

client/src/App.css

@@ -65,9 +65,13 @@ h4 {
   background-color: white;
   border-radius: 12px;
   border: none;
-  padding-left: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   font-size: 25px;
   font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.5;
 }
 
 .name-input {

client/src/App.js

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import Overlay from "./components/Overlay";
 import Welcome from "./components/Welcome";
 import Setup from "./components/Setup";
+import Navbar from "./components/Navbar";
 import Council from "./components/Council";
 
 function App() {
@@ -50,7 +51,10 @@ function App() {
         ) : currentView === "setup" ? (
           <Setup onEnterCouncil={enterCouncil} />
         ) : (
-          <Council options={{ name: name, topic: topic, foods: foods }} />
+          <div>
+            <Navbar />
+            <Council options={{ name: name, topic: topic, foods: foods }} />
+          </div>
         )}
       </Overlay>
     </div>

client/src/components/Council.jsx

@@ -69,7 +69,11 @@ function Council({ options }) {
   return (
     <div style={councilStyle}>
       <h1>Welcome to the council {name}</h1>
-      <h1>Topic: {topic}</h1>
+      <textarea
+        className="text-input"
+        rows="5"
+        style={{ width: "90%" }}
+      ></textarea>
       <div style={foodsContainerStyle}>
         {foods.map((food, index) => (
           <div

client/src/components/Navbar.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+function Navbar() {
+  const navbarStyle = {
+    paddingTop: "10px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    color: "white",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    margin: "0 auto",
+    width: "90%",
+  };
+
+  const navbarItemStyle = {
+    margin: "0",
+    padding: "0",
+  };
+
+  const linkItemStyle = {
+    marginLeft: "20px",
+  };
+
+  return (
+    <div style={navbarStyle}>
+      <h3 style={navbarItemStyle}>COUNCIL OF FOODS</h3>
+      <div style={{ display: "flex" }}>
+        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>ABOUT</h3>
+        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SETTINGS</h3>
+        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>CONTACT</h3>
+        <h3 style={{ ...navbarItemStyle, ...linkItemStyle }}>SHARE</h3>
+      </div>
+    </div>
+  );
+}
+
+export default Navbar;