build hamburger menu

src/App.css

@@ -207,3 +207,8 @@ main {
 
   }
 }
+
+#hamburger {
+  display: fixed;
+  z-index: 10;
+}

src/App.tsx

@@ -2,6 +2,7 @@ import './defaults.css'
 import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
+import { HamburgerMenu, HamburgerMenuProps } from './objects/HamburgerMenu'
 import React, { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
@@ -56,6 +57,7 @@ function App() {
       <div id="background">
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
+      <HamburgerMenu config={config} setConfig={setConfig} />
       <main >
         <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} />
         <div id="movie-wall-container">

src/objects/HamburgerMenu.tsx

@@ -0,0 +1,54 @@
+import { Config } from "../App"
+import React from "react"
+export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
+  config: Config;
+  setConfig: Function;
+}
+
+export function HamburgerMenu({ config, setConfig }: HamburgerMenuProps) {
+  const languages = [
+    {
+      value: "es",
+      label: "Español"
+    },
+    {
+      value: "en",
+      label: "English"
+    }
+  ]
+  const regions = [
+    {
+      value: "spain",
+      label: "España"
+    },
+    {
+      value: "UK",
+      label: "United Kingdom"
+    }
+  ]
+
+  function handleLangChange(event) {
+    setConfig(prev => {
+      return {
+        ...prev,
+        language: event.target.value
+      }
+    })
+  }
+  function handleRegionChange(event) {
+    setConfig(prev => {
+      return {
+        ...prev,
+        region: event.target.value
+      }
+    })
+  }
+  return <div id="hamburger">
+    <select onChange={handleLangChange}>
+      {languages.map((language) => <option value={language.value} key={language.value}>{language.label}</option>)}
+    </select>
+    <select onChange={handleRegionChange}>
+      {regions.map((region) => <option value={region.value} key={region.value}>{region.label}</option>)}
+    </select>
+  </div>
+}