From 2a283cfc8bb9927548c27ac25d4598cb6e02a974 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Tue, 10 May 2022 01:24:34 -0700
Subject: [PATCH] close menu button

---
 src/ui/App.tsx                     |  2 +-
 src/ui/components/menu/Menu.css    | 20 ++++++++++++++++++++
 src/ui/components/menu/Menu.tsx    | 10 +++++++++-
 src/ui/components/menu/Options.tsx | 10 +++++++---
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 761c8b9..99e338e 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -56,7 +56,7 @@ class App extends React.Component<IProps, IState> {
         />
 
         {
-          this.state.optionsOpen ? <Options /> : null
+          this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
         }
 
         <button onClick={TESTDOWNLOAD}>download file test</button>
diff --git a/src/ui/components/menu/Menu.css b/src/ui/components/menu/Menu.css
index 02080ca..f126f0c 100644
--- a/src/ui/components/menu/Menu.css
+++ b/src/ui/components/menu/Menu.css
@@ -21,5 +21,25 @@
 
 .MenuHeading {
   font-size: 2rem;
+  margin: 16px;
+}
+
+.MenuTop {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.MenuExit {
+  height: 30px;
   margin: 20px;
+}
+
+.MenuExit:hover {
+  cursor: pointer;
+}
+
+.MenuExit img {
+  height: 100%;
 }
\ No newline at end of file
diff --git a/src/ui/components/menu/Menu.tsx b/src/ui/components/menu/Menu.tsx
index 31c17fa..208e97f 100644
--- a/src/ui/components/menu/Menu.tsx
+++ b/src/ui/components/menu/Menu.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
 import './Menu.css'
 
+import Close from '../../../resources/icons/close.svg'
+
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
   className?: string;
   heading: string;
+  closeFn: () => void;
 }
 
 export default class Menu extends React.Component<IProps, never> {
@@ -15,7 +18,12 @@ export default class Menu extends React.Component<IProps, never> {
   render() {
     return (
       <div className={'Menu ' + this.props.className}>
-        <div className="MenuHeading">{this.props.heading}</div>
+        <div className='MenuTop'>
+          <div className="MenuHeading">{this.props.heading}</div>
+          <div className="MenuExit" onClick={this.props.closeFn}>
+            <img src={Close} className="MenuClose" />
+          </div>
+        </div>
         <div className='MenuInner'>
           {this.props.children}
         </div>
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
index a57f079..c894852 100644
--- a/src/ui/components/menu/Options.tsx
+++ b/src/ui/components/menu/Options.tsx
@@ -5,14 +5,18 @@ import DirInput from '../common/DirInput'
 import Menu from './Menu'
 import './Options.css'
 
-export default class Options extends React.Component<Record<string, never>, never> {
-  constructor(props: Record<string, never>) {
+interface IProps {
+  closeFn: () => void;
+}
+
+export default class Options extends React.Component<IProps, never> {
+  constructor(props: IProps) {
     super(props)
   }
 
   render() {
     return (
-      <Menu className="Options" heading="Options">
+      <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
         <div className='OptionSection'>
           <div className='OptionLabel'>Test Option</div>
           <div className='OptionValue'>