Top bar

<Flex as="header" layerStyle="section.topbar" align="center" gap="2">
    <Tooltip label="Switch to…">
        <IconButton
            variant="ghost"
            size="sm"
            aria-label="Switch to…"
            icon={
                <Icon>
                    <path d={mdiDotsGrid} />
                </Icon>
            }
        />
    </Tooltip>
    <Link href="#" ml="-1">
        <Image
            alt="Logo"
            p="1"
            h="8"
            w={[8, 8, 'auto']}
            minW="8"
            rounded="md"
            layerStyle="interactive.fill"
            fit="cover"
            align="left"
            src="https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-stream"
        />
    </Link>
    <ButtonGroup variant="navigation" size="sm" spacing="1">
        <Show above="lg">
            <Button as="a" href="#" isActive>
                Nav link
            </Button>
            <Button as="a" href="#">
                Nav link
            </Button>
            <Button as="a" href="#">
                Nav link
            </Button>
        </Show>
        <Show below="lg">
            <Menu>
                <MenuButton
                    as={Button}
                    rightIcon={
                        <Icon layerStyle="menuButtonIcon">
                            <path d={mdiChevronDown} />
                        </Icon>
                    }
                >
                    Menu
                </MenuButton>
                <MenuList>
                    <MenuItem as="a" href="#">
                        Nav link
                    </MenuItem>
                    <MenuItem as="a" href="#">
                        Nav link
                    </MenuItem>
                    <MenuItem as="a" href="#">
                        Nav link
                    </MenuItem>
                </MenuList>
            </Menu>
        </Show>
    </ButtonGroup>
    <Spacer />
    <ButtonGroup variant="ghost" size="sm">
        <Tooltip label="Help">
            <IconButton
                aria-label="Help"
                icon={
                    <Icon>
                        <path d={mdiHelpCircleOutline} />
                    </Icon>
                }
            />
        </Tooltip>
        <Tooltip label="Settings">
            <IconButton
                aria-label="Settings"
                icon={
                    <Icon>
                        <path d={mdiCogOutline} />
                    </Icon>
                }
            />
        </Tooltip>
    </ButtonGroup>
    <Tooltip label="frank.grinaert@sitecore.com">
        <Avatar
            size="sm"
            name="Frank Grinaert"
            src="https://s.gravatar.com/avatar/cf6af6596579b7de472a5d8471a45b4f"
            cursor="pointer"
        />
    </Tooltip>
</Flex>