Как сделать dropdown menu используя semantic ui?

Question

[freelancer007]

Всем привет!
Подскажите, пожалуйста, как сделать dropdown меню, которое будет раскрываться вниз а не в бок, с помощью semantic ui (react). Ниже код того что удалось сделать, но работает с глюками и не совсем то что нужно.

import React from 'react'
import {
    Checkbox,
    Icon,
    Menu,
    Dropdown,
    Sidebar,
} from 'semantic-ui-react'

const LeftSidebar = () => {
    const [visible, setVisible] = React.useState(false)

    return (
        <div>
            <Checkbox
                checked={visible}
                label={{ children: <code>visible</code> }}
                onChange={(e, data) => setVisible(data.checked)}
            />
            <Sidebar
                as={Menu}
                animation='overlay'
                inverted
                onHide={() => setVisible(false)}
                vertical
                visible={visible}

            >
                <Dropdown item text='Display Options'>
                    <Dropdown.Menu scrolling >
                        <Dropdown.Header>Text Size</Dropdown.Header>
                        <Dropdown.Item>Small</Dropdown.Item>
                        <Dropdown.Item>Medium</Dropdown.Item>
                        <Dropdown.Item>Large</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
                <Menu.Item as='a'>
                    <Icon name='home' />
                    Home
                </Menu.Item>
                <Menu.Item as='a'>
                    <Icon name='gamepad' />
                    Games
                </Menu.Item>
                <Menu.Item as='a'>
                    <Icon name='camera' />
                    Channels
                </Menu.Item>
            </Sidebar>
        </div>
    )
}

export default LeftSidebar

Как пример, того что нужно сделать вот emilus.themenate.net/app/docs/documentation/introd...
Сайдбар слева.

Comments

[Владимир]

Вам на "Фрилансим", готовые решения за деньги там берут.