make button reset state

src/features/menu/Menu.css

@@ -6,12 +6,16 @@
     align-items: center;
     justify-content: center;
     z-index: 9999;
+    top: 0;
+    left: 0;
+    min-height: 100vh;
+    min-width: 100vw;
 }
 
 .scale-out-tl {
-  -webkit-animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
+    -webkit-animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53)
         both;
-  animation: scale-out-tl 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+    animation: scale-out-tl 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
 }
 
 /* ----------------------------------------------
@@ -59,17 +63,6 @@
     }
 }
 
-.menu-true {
-  top: 0;
-  left: 0;
-  min-height: 100vh;
-  min-width: 100vw;
-}
-
-.menu-false {
-  left: -100vw;
-}
-
 .menu-logo {
     height: 40vmin;
     pointer-events: none;
@@ -111,7 +104,8 @@
 }
 
 .menu-open-button {
-  line-height: 1em;
+    height: 1.5em;
+    line-height: 0.9em;
     position: absolute;
     padding: 0.13em 0.3em;
     color: #ef476f;

src/features/menu/Menu.js

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
+import { useDispatch } from 'react-redux'; // probably temporarily here
+import { parameterRefreshAll } from '../timbre/parameters/parameterSlice'; // probably temporarily here
 import logo from '../../1f3b9.svg';
 import './Menu.css';
 
 export default function MainMenu(props) {
     const [open, setOpen] = useState(true);
+    const dispatch = useDispatch();
 
     const HandleClick = () => {
         setOpen(!open);
@@ -11,11 +14,16 @@ export default function MainMenu(props) {
 
     return (
         <div>
-      <div className={open ? 'menu menu-true' : 'menu menu-false scale-out-tl'}>
+            <div className={open ? 'menu' : 'menu scale-out-tl'}>
                 <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}>
+                    <button
+                        className="menu-button"
+                        onClick={() => {
+                            HandleClick();
+                            dispatch(parameterRefreshAll());
+                        }}>
                         New Patch
                     </button>
                     <button className="menu-button">Load Patch</button>

src/features/timbre/parameters/parameterSlice.js

@@ -382,9 +382,7 @@ const parametersSlice = createSlice({
     reducers: {
         parameterAdded: parametersAdapter.addOne,
         parameterUpdated: parametersAdapter.updateOne,
-    parameterRefreshAll(state) {
-      parametersAdapter.setAll(state, defaultState);
-    },
+        parameterRefreshAll: () => defaultState,
     },
 });
 
@@ -395,6 +393,10 @@ export const {
     selectIds,
 } = parametersAdapter.getSelectors((state) => state.parameters);
 
-export const { parameterAdded, parameterUpdated } = parametersSlice.actions;
+export const {
+    parameterAdded,
+    parameterUpdated,
+    parameterRefreshAll,
+} = parametersSlice.actions;
 
 export default parametersSlice.reducer;