add basic menu

src/1f3b9.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#31373D" d="M2 36s-2 0-2-2V2s0-2 2-2h32.031C36 0 36 2 36 2v32s0 2-2 2H2z"/><path d="M19 33s0 1 1 1h5c1 0 1-1 1-1V5h-7v28zm9-28v28s0 1 1 1h4c1 0 1-1 1-1V5h-6zM10 33s0 1 1 1h5c1 0 1-1 1-1V5h-7v28zm-8 0s0 1 1 1h4c1 0 1-1 1-1V5H2v28z" fill="#E1E8ED"/><path fill="#31373D" d="M30 23s0 1-1 1h-4c-1 0-1-1-1-1V3h6v20zm-9 0s0 1-1 1h-4c-1 0-1-1-1-1V3h6v20zm-9 0s0 1-1 1H7c-1 0-1-1-1-1V3h6v20z"/></svg>

src/App.js

@@ -1,15 +1,17 @@
 import React from 'react';
+import MainMenu from './features/menu/Menu';
 import TimbreSwitcher from './features/timbre/timbreSwitcher';
 import './App.css';
 
 function App() {
-    return (
+  return (
-        <div className="App">
+    <div className="App">
-            <header className="App-header">
+      <header className="App-header">
-                <TimbreSwitcher />
+        <MainMenu />
-            </header>
+        <TimbreSwitcher />
-        </div>
+      </header>
-    );
+    </div>
+  );
 }
 
 export default App;

src/features/menu/Menu.css

@@ -0,0 +1,86 @@
+.menu {
+  position: absolute;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+@keyframes sweep {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, -100%);
+  }
+}
+
+.menu-true {
+  top: 0;
+  left: 0;
+  min-height: 100vh;
+  min-width: 100vw;
+}
+
+.menu-false {
+  left: -100vw;
+}
+
+.menu-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.menu-title {
+  color: #1c1d21;
+  font-family: 'Lato', sans-serif;
+  font-weight: 700;
+  line-height: 1em;
+  font-size: calc(10px + 10vmin);
+  margin: 0 0 0.5em 0;
+}
+
+.menu-button,
+.menu-open-button {
+  background: transparent;
+  display: inline-block;
+  margin: 1em;
+  padding: 0.35em 1em;
+  border: 0.1em solid slateblue;
+  border-radius: 0.12em;
+  color: slateblue;
+  font-family: 'Roboto', sans-serif;
+  font-size: 1em;
+  font-weight: 300;
+  text-align: center;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+}
+.menu-button:hover {
+  color: white;
+  background: slateblue;
+}
+
+.menu-open-button:hover {
+  color: white;
+  background: #ef476f;
+}
+
+.menu-open-button {
+  line-height: 1em;
+  position: absolute;
+  padding: 0.13em 0.3em;
+  color: #ef476f;
+  border: 0.09em solid #ef476f;
+  margin: 0;
+  top: 0.55em;
+  left: 0.5em;
+}
+
+/* change how the button is handled when screen is smaller then 880px*/
+
+.menu-open-button::before {
+  content: '\2630';
+}

src/features/menu/Menu.js

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import logo from '../../1f3b9.svg';
+import './Menu.css';
+
+export default function MainMenu(props) {
+  const [open, setOpen] = useState(true);
+
+  const HandleClick = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <div>
+      <div className={`menu menu-${open}`}>
+        <img src={logo} className="menu-logo" alt="logo" />
+        <header className="menu-title">Alapatch</header>
+        <div className="menu-button-container">
+          <button className="menu-button" onClick={HandleClick}>
+            New Patch
+          </button>
+          <button className="menu-button">Load Patch</button>
+        </div>
+      </div>
+      {!open && (
+        <button className="menu-open-button" onClick={HandleClick}></button>
+      )}
+    </div>
+  );
+}

src/features/timbre/Timbre.module.css

@@ -63,6 +63,7 @@
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none;
+  transition: all 0.2s ease-in-out;
 }
 
 .tab:hover {

src/fonts.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Noto+Sans+HK&family=Roboto:wght@100;300;400&display=swap');
+/* import Lato and Roboto and Noto Fonts*/

src/index.css

@@ -1,7 +1,8 @@
+@import url(./fonts.css);
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;