diff --git a/src/App.css b/src/App.css index 7aa79ca..aa15a1c 100644 --- a/src/App.css +++ b/src/App.css @@ -207,3 +207,8 @@ main { } } + +#hamburger { + display: fixed; + z-index: 10; +} diff --git a/src/App.tsx b/src/App.tsx index 153d8c7..c8e6ff7 100644 --- a/src/App.tsx +++ b/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() {
+
diff --git a/src/objects/HamburgerMenu.tsx b/src/objects/HamburgerMenu.tsx new file mode 100644 index 0000000..b1e3a9d --- /dev/null +++ b/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
+ + +
+}