Merge pull request #21 from JumboCode/DropDownWrapper

Drop down wrapper

src/App.jsx

@@ -3,7 +3,7 @@ import NavBar from '@/components/NavBar/NavBar'
 import PageRoutes from '@/components/PageRoutes'
 import "./i18n.js";
 
-function App() {
+const App = () => {
   return (
     <>
       <NavBar />

src/components/Dropdown.jsx

@@ -1 +1,35 @@
-// TODO (Togzhan & Yi & Aryaa): Create a dropdown component
+import React, { useState } from 'react';
+
+const Dropdown = ({ label, children }) => {
+  //use isOpen to keep track of whether the dropdown menu is visible
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div 
+      // style below for menu
+      className="absolute inline-block"
+
+      //If the mouse is on the menu, turn state to true, otherwise false
+      onClick={() => {
+          if(isOpen) {
+            setIsOpen(false);
+          } else{
+            setIsOpen(true);
+          }
+        }
+      }
+    >
+      <button className="dropdown-button text-right">{label}</button>
+      {isOpen && (
+        // style below for children
+        <div className="absolute text-right flex flex-col"> 
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;
+
+