close menu button

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>

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%;
+}

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>

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> {
+interface IProps {
-  constructor(props: Record<string, never>) {
+  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'>