Add dropdown component

[cavasinf]

Description

Add dropdown component

<style>
    .dropdown-menu-demo {
        display: inline-block;
        width: 100%;
        position: relative;
        top: 0;
        margin-bottom: 1rem !important;
    }
</style>

<div class="row">
        <div class="col-sm-6 col-lg-3">
            {{ dropdown([
                {
                    type: 'header',
                    title:'Dropdown header',
                },
                {
                    title: 'Item 1',
                    icon: 'about',
                },
                {
                    title: 'Item 2',
                    icon: 'admin',
                },
                {
                    type: 'html',
                    html: '
            <a href="#" class="text-reset">My profile</a>
            <label class="form-check m-0 ms-auto">
                <input type="checkbox" class="form-check-input">
                Public
            </label>
        '
                },
                {
                    type: 'radio',
                    title: 'Radio input',
                    html: '<input class="form-check-input m-0 me-2" type="radio">'
                },
                {
                    type: 'checkbox',
                    title: 'Checkbox input',
                    html: '<input class="form-check-input m-0 me-2" type="checkbox">',
                },
                {
                    type: 'checkbox',
                    title: 'Checkbox input',
                    html: '<input class="form-check-input m-0 me-2" type="checkbox">',
                    disabled: true,
                },
                {
                    type: 'checkbox',
                    title: 'Checkbox input',
                    html: '<input class="form-check-input m-0 me-2" type="checkbox">',
                    active: true,
                },
                {
                    type: 'switch',
                    title: 'Checkbox input',
                    html: '<input class="form-check-input m-0 me-2" type="checkbox">'
                },
                {
                    type: 'divider',
                },
                {
                    title: 'Dropdown item 1',
                },
                {
                    title: 'Dropdown item 2',
                },
                {
                    title: 'Dropdown disabled',
                    disabled: true,
                },
                {
                    title: 'Dropdown active',
                    active: true,
                },
                {
                    type: 'divider',
                },
                {
                    title: 'Kevin Papst',
                    html: '<span class="avatar avatar-xs rounded me-2" style="background-image: url(https://avatars.githubusercontent.com/u/533162)"></span>'
                },
                {
                    title: 'Florian Cavasin',
                    html: '<span class="avatar avatar-xs rounded me-2" style="background-image: url(https://avatars.githubusercontent.com/u/25293190)"></span>'
                },
                {
                    title: 'Firstname Lastname',
                    html: '<span class="avatar avatar-xs rounded me-2">FL</span>'
                },
                {
                    type: 'divider',
                },
                {
                    title: 'Logout',
                    icon: 'back',
                },
            ], {extraClass : 'dropdown-menu-demo', menuArrow: true, menuArrowEnd: true}) }}
        </div>
        <div class="col-sm-6 col-lg-3">
            {{ dropdown([
                {
                    type: 'header',
                    title:'With arrow',
                },
                {
                    title: 'Action',
                },
                {
                    title: 'Another action',
                },
            ], {extraClass : 'dropdown-menu-demo', menuArrow: true}) }}

            {{ dropdown([
                {
                    type: 'header',
                    title:'With arrow end',
                },
                {
                    title: 'Action',
                },
                {
                    title: 'Another action',
                },
            ], {extraClass : 'dropdown-menu-demo', menuArrow: true, menuArrowEnd: true}) }}

            {{ dropdown([
                {
                    type: 'header',
                    title:'With badge',
                },
                {
                    title: 'Action',
                    badge: {text: '12', class: 'bg-primary'}
                },
                {
                    title: 'Another action',
                    badge: {class: 'bg-success'}
                },
            ], {extraClass : 'dropdown-menu-demo'}) }}

            {{ dropdown([
                {
                    type: 'header',
                    title:'Dark background',
                },
                {
                    title: 'Action',
                },
                {
                    title: 'Another action',
                },
                {
                    title: 'Dropdown disabled',
                    disabled: true,
                },
                {
                    title: 'Dropdown active',
                    active: true,
                },
                {
                    type: 'divider',
                },
                {
                    title: 'Dropdown item 1',
                    badge: {text: '2', class: 'bg-primary'}
                },
            ], {extraClass : 'dropdown-menu-demo bg-dark text-white', menuArrow: true, menuArrowEnd: true}) }}
        </div>
    </div>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I updated the documentation (see here)
• I agree that this code will be published under the MIT license

[cavasinf]

Good to go then 👍

[kevinpapst]

Can I stack dropdowns for child-menus?

[cavasinf]

WDYM?

Like a sub dropdown?

[kevinpapst]

WDYM?
Like a sub dropdown?

That 👍

If prepare examples in the demo app, I'd include one if possible.

[cavasinf]

Yeah I've thought to implement it.
But I soon I've tested it with raw HTML, there's something wrong with the badge:

But I can add it without the badge though (ATM)

[kevinpapst]

Thanks 👍

I added your HTML examples to the demo app.