style: menubar mockup

client/src/features/editors/Editor.jsx

@@ -7,10 +7,8 @@ import styles from './Editor.module.css';
 import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
-import SettingsIconBtn from 'common/components/buttons/SettingsIconBtn';
 import { useEffect } from 'react';
-import DownloadIconBtn from 'common/components/buttons/DownloadIconBtn';
-import { downloadEvents } from 'app/api/ontimeApi';
+import MenuBar from 'features/menu/MenuBar';
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -20,15 +18,15 @@ export default function Editor() {
     document.title = 'ontime - Editor';
   }, []);
 
-  const handleDownload = () => {
-    downloadEvents();
-  };
-
   return (
     <>
       <SettingsModal isOpen={isOpen} onClose={onClose} />
 
       <div className={styles.mainContainer}>
+        <Box id='settings' className={styles.settings}>
+          <NavMenu onOpen={onOpen} onClose={onClose} />
+        </Box>
+
         <Box className={styles.editor}>
           <Heading size='lg' paddingBottom={'0.25em'}>
             Event List
@@ -69,13 +67,6 @@ export default function Editor() {
           <NumberedText number={4} text={'Running Info'} />
           <div className={styles.content}></div>
         </Box>
-
-        <Box className={styles.settings}>
-          <div className={styles.content}>
-            <SettingsIconBtn size='md' clickhandler={onOpen} />
-            <DownloadIconBtn size='md' clickhandler={handleDownload} />
-          </div>
-        </Box>
       </div>
     </>
   );

client/src/features/editors/Editor.module.css

@@ -8,10 +8,10 @@
 
   display: grid;
   grid-template-rows: 38vh 1fr;
-  grid-template-columns: 48em 27vw 25vw 4vw;
+  grid-template-columns: 40px 48em 27vw 1fr;
   grid-template-areas:
-    'even play info sett'
-    'even mess info sett';
+    'sett even play info'
+    'sett even mess info';
   gap: 2vh;
 }
 
@@ -20,7 +20,7 @@
   .mainContainer {
     height: 100%;
     grid-template-rows: 1fr 1fr;
-    grid-template-columns: 48em 1fr 1fr;
+    grid-template-columns: 40px 48em 1fr 1fr;
     /* grid-template-areas:
       'even play sett'
       'even mess sett'; */
@@ -95,24 +95,22 @@
   grid-area: play;
 }
 
-.settings {
+.mainContainer > .settings {
   grid-area: sett;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  width: fit-content;
+
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 2.6em;
+  gap: 1em;
 }
 
 .content {
   padding-top: 1.5em;
 }
 
-.settings > .content {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
 .cornerButtonContainer {
   position: relative;
   top: -4.5em;