Feat/navigate (#81)

* feat/navigate upgrade react router
* feat/navigate migrate to react router 6
* feat/navigate style modal
* feat/navigate create endpoints for app settings
* feat/navigate protect editor with pin
* feat/navigate apply dynamic routing draft
* feat/navigate upgrade relevant packages
* feat/navigate restructure directory and add tests
* feat/navigate test aliases validation
* feat/navigate validate aliases before sending
* feat/navigate create data endpoint
* feat/navigate config: prettier
* feat/navigate invalidate empty strings
* feat/navigate create endpoints
* feat/navigate parse on import
* feat/navigate navigate to alias
* feat/navigate user help and sample data
* feat/navigate refact aliases modal
* feat/navigate refact settings style
* feat/navigate update sample db
* feat/navigate link is relative to hostname
* feat/navigate navigate to first match
* feat/navigate update readme and version bump
* feat/navigate config: create shared module
* feat/navigate config: cheat module install
* feat/navigate fix tests
* feat/navigate run tests in pull request
* Update ontime_cy.yml

client/src/features/menu/MenuBar.jsx

@@ -6,14 +6,15 @@ import SettingsIconBtn from './buttons/SettingsIconBtn';
 import MaxIconBtn from './buttons/MaxIconBtn';
 import MinIconBtn from './buttons/MinIconBtn';
 import QuitIconBtn from './buttons/QuitIconBtn';
-import style from './MenuBar.module.css';
+import style from './MenuBar.module.scss';
 import HelpIconBtn from './buttons/HelpIconBtn';
 import UploadIconBtn from './buttons/UploadIconBtn';
 import { useContext, useRef } from 'react';
 import { LoggingContext } from '../../app/context/LoggingContext';
+import PropTypes from 'prop-types';
 
 export default function MenuBar(props) {
-  const { onOpen } = props;
+  const { isOpen, onOpen } = props;
   const { emitError } = useContext(LoggingContext);
   const hiddenFileInput = useRef(null);
   const queryClient = useQueryClient();
@@ -33,6 +34,10 @@ export default function MenuBar(props) {
     }
   };
 
+  const buttonStyle = {
+    fontSize: '1.5em'
+  };
+
   const handleUpload = (event) => {
     const fileUploaded = event.target.files[0];
     if (fileUploaded == null) return;
@@ -93,25 +98,27 @@ export default function MenuBar(props) {
     <>
       <QuitIconBtn size='lg' clickhandler={() => handleIPC('shutdown')} />
       <MaxIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{ ...buttonStyle }}
         size='lg'
         clickhandler={() => handleIPC('max')}
       />
       <MinIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{ ...buttonStyle }}
         size='lg'
         clickhandler={() => handleIPC('min')}
       />
       <div className={style.gap} />
       <HelpIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{ ...buttonStyle }}
         size='lg'
         clickhandler={() => handleIPC('help')}
       />
       <SettingsIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{...buttonStyle}}
         size='lg'
+        className={isOpen ? style.open : ''}
         clickhandler={onOpen}
+        isRound
       />
       <div className={style.gap} />
       <input
@@ -122,15 +129,21 @@ export default function MenuBar(props) {
         accept='.json, .xlsx'
       />
       <UploadIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{ ...buttonStyle }}
         size='lg'
         clickhandler={handleClick}
       />
       <DownloadIconBtn
-        style={{ fontSize: '1.5em' }}
+        style={{ ...buttonStyle }}
         size='lg'
         clickhandler={handleDownload}
       />
     </>
   );
 }
+
+MenuBar.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onOpen: PropTypes.func.isRequired,
+};
+

client/src/features/menu/MenuBar.module.css

@@ -1,3 +0,0 @@
-.gap {
-  height: 1em;
-}

client/src/features/menu/MenuBar.module.scss

@@ -0,0 +1,9 @@
+@use '../../styles/main' as *;
+
+.gap {
+  height: 1em;
+}
+
+.open {
+  background: $light-bg;
+}