Action Bar

const Actionbar = (props) => {
    const {isOpen, onToggle} = useDisclosure();
        
    return (
        <>
                <Checkbox onChange={() => onToggle()} id="action-bar-checkbox">Show action bar</Checkbox>
                <Slide  direction='bottom' in={isOpen} align="center">
                    <Box id="action-bar" layerStyle="actionBar">
                        <HStack>
                            <Tooltip label="Cancel">
                                <IconButton
                                    variant="ghost"
                                    colorScheme="neutralInverse"
                                    icon={
                                        <Icon>
                                            <path d={mdiClose} />
                                        </Icon>
                                    }
                                    aria-label={'Cancel'}
                                />
                            </Tooltip>
                            <Text
                                color="chakra-inverse-text"
                                fontWeight="medium"
                            >
                                3 selected
                            </Text>
                        </HStack>
                        <ButtonGroup
                            variant="ghost"
                            colorScheme="neutralInverse"                       
                            justifyContent="flex-end"
                            flexGrow={1}
                        >
                            <Show above="sm">
                                <Button
                                    leftIcon={
                                        <Icon>
                                            <path d={mdiCloudUploadOutline} />
                                        </Icon>
                                    }
                                >
                                    Publish
                                </Button>
                                <Button
                                    leftIcon={
                                        <Icon>
                                            <path d={mdiCloudOffOutline} />
                                        </Icon>
                                    }
                                >
                                    Unpublish
                                </Button>
                                <Button
                                    leftIcon={
                                        <Icon>
                                            <path d={mdiContentCopy} />
                                        </Icon>
                                    }
                                >
                                    Duplicate
                                </Button>
                            </Show>
                            <Show below="sm">
                                <Tooltip label="Publish">
                                    <IconButton
                                        icon={
                                            <Icon>
                                                <path
                                                    d={mdiCloudUploadOutline}
                                                />
                                            </Icon>
                                        }
                                        aria-label={'Publish'}
                                    />
                                </Tooltip>
                                <Tooltip label="Unpublish">
                                    <IconButton
                                        icon={
                                            <Icon>
                                                <path d={mdiCloudOffOutline} />
                                            </Icon>
                                        }
                                        aria-label={'Unpublish'}
                                    />
                                </Tooltip>
                                <Tooltip label="Duplicate">
                                    <IconButton
                                        icon={
                                            <Icon>
                                                <path d={mdiContentCopy} />
                                            </Icon>
                                        }
                                        aria-label={'Duplicate'}
                                    />
                                </Tooltip>
                            </Show>
                            <Menu>
                                <Tooltip label="More">
                                    <MenuButton
                                        as={IconButton}
                                        icon={
                                            <Icon>
                                                <path d={mdiDotsHorizontal} />
                                            </Icon>
                                        }
                                        aria-label={'More'}
                                    />
                                </Tooltip>
                                <MenuList>
                                    <MenuItem
                                        icon={
                                            <Icon>
                                                <path d={mdiArchiveOutline} />
                                            </Icon>
                                        }
                                    >
                                        Archive
                                    </MenuItem>
                                    <MenuItem
                                        icon={
                                            <Icon>
                                                <path d={mdiTrashCanOutline} />
                                            </Icon>
                                        }
                                    >
                                        Delete
                                    </MenuItem>
                                </MenuList>
                            </Menu>
                        </ButtonGroup>
                    </Box>
                </Slide>
            </>
        )}

        render(<Actionbar/>)