mockup menu actions

add buttons for upcoming actions
- collapse all
- expand all
- goto selected

client/src/common/components/buttons/CollapseBtn.jsx

@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiChevronsUp } from 'react-icons/fi';
+
+export default function CollapseBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiChevronsUp />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Collapse All
+    </Button>
+  );
+}

client/src/common/components/buttons/CollapseIconBtn.jsx

@@ -1,17 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiArrowDownCircle } from 'react-icons/fi';
-
-export default function CollapseIconBtn(props) {
-  const { clickhandler, active, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiArrowDownCircle />}
-      colorScheme='orange'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

client/src/common/components/buttons/CurrentBtn.jsx

@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiTarget } from 'react-icons/fi';
+
+export default function CurrentBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiTarget />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Goto Current
+    </Button>
+  );
+}

client/src/common/components/buttons/ExpandBtn.jsx

@@ -0,0 +1,18 @@
+import { Button } from '@chakra-ui/button';
+import { FiChevronsDown } from 'react-icons/fi';
+
+export default function ExpandBtn(props) {
+  const { clickhandler } = props;
+  return (
+    <Button
+      size={props.size || 'xs'}
+      leftIcon={<FiChevronsDown />}
+      colorScheme='whiteAlpha'
+      variant='outline'
+      onClick={clickhandler}
+      _focus={{ boxShadow: 'none' }}
+    >
+      Expand All
+    </Button>
+  );
+}

client/src/features/menu/EventListMenu.jsx

@@ -10,6 +10,9 @@ import {
 } from '@chakra-ui/react';
 import style from './EventListMenu.module.css';
 import MenuActionButtons from '../editors/list/MenuActionButtons';
+import CollapseBtn from 'common/components/buttons/CollapseBtn';
+import ExpandBtn from 'common/components/buttons/ExpandBtn';
+import CurrentBtn from 'common/components/buttons/CurrentBtn';
 
 const EventListMenu = ({ eventsHandler }) => {
   const buttonProps = {
@@ -69,6 +72,9 @@ const EventListMenu = ({ eventsHandler }) => {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
+      <CurrentBtn size='sm' />
+      <CollapseBtn size='sm' />
+      <ExpandBtn size='sm' />
       <MenuActionButtons actionHandler={actionHandler} size='sm' />
     </div>
   );