style: menubar mockup

client/src/features/menu/MenuBar.jsx

@@ -0,0 +1,30 @@
+import { downloadEvents } from 'app/api/ontimeApi';
+import DownloadIconBtn from './buttons/DownloadIconBtn';
+import SettingsIconBtn from './buttons/SettingsIconBtn';
+import InfoIconBtn from './buttons/InfoIconBtn';
+import MaxIconBtn from './buttons/MaxIconBtn';
+import MinIconBtn from './buttons/MinIconBtn';
+import QuitIconBtn from './buttons/QuitIconBtn';
+import style from './MenuBar.module.css';
+import HelpIconBtn from './buttons/HelpIconBtn';
+
+export default function MenuBar(props) {
+  const { onOpen, onClose } = props;
+
+  const handleDownload = () => {
+    downloadEvents();
+  };
+
+  return (
+    <>
+      <QuitIconBtn size='md' />
+      <MaxIconBtn size='md' />
+      <MinIconBtn size='md' />
+      <div className={style.gap} />
+      <HelpIconBtn size='md' disabled />
+      <SettingsIconBtn size='md' disabled />
+      <InfoIconBtn size='md' clickhandler={onOpen} />
+      <DownloadIconBtn size='md' clickhandler={handleDownload} />
+    </>
+  );
+}

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

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

client/src/features/menu/buttons/DownloadIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiDownload } from 'react-icons/fi';
+
+export default function DownloadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Download File'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiDownload />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/HelpIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiHelpCircle } from 'react-icons/fi';
+
+export default function HelpIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Help'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiHelpCircle />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/InfoIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiHome } from 'react-icons/fi';
+
+export default function InfoIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Event Main'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiHome />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/MaxIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiMaximize } from 'react-icons/fi';
+
+export default function MaxIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Show full window'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiMaximize />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/MinIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiMinimize } from 'react-icons/fi';
+
+export default function MinIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Close to tray'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiMinimize />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/QuitIconBtn.jsx

@@ -0,0 +1,21 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiPower } from 'react-icons/fi';
+
+export default function QuitIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Quit Application'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiPower />}
+        colorScheme='red'
+        variant='outline'
+        isRound
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

client/src/features/menu/buttons/SettingsIconBtn.jsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiSettings } from 'react-icons/fi';
+
+export default function SettingsIconBtn(props) {
+  const { clickhandler, ...rest } = props;
+  return (
+    <Tooltip label='Application Settings'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiSettings />}
+        colorScheme='white'
+        variant='outline'
+        isRound
+        borderColor='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}