Dropdown "collapse"

[martinlindhe]

Hello and thanks for all your work!

the Dropdown component currently don't support the data-toggle="collapse" as used in the collapsible navbar (actually i'm not sure the collapse thing is part of a dropdown component, maybe it should be a separate component...):

http://getbootstrap.com/javascript/#within-a-navbar (resize width really small to see the effect)

i made a variation out of your Dropdown component to handle this, it is rough but seems to work (transition is missing), i saw you had "dropdown" rework on the todo list, so feel free to incorporate parts of this:

<template>
    <div class="navbar-header">
        <slot></slot>
        <slot name="dropdown-menu"></slot>
    </div>
</template>

<script>
import EventListener from './../EventListener';
export default {
    methods: {
        toggleCollapse(e) {
            e.preventDefault();

            // collapse data-target
            var tmp = this.$el.querySelector('[data-target]');
            var id = tmp.getAttribute('data-target');
            var o = document.getElementById(id.substring(1));
            o.classList.toggle('collapse');
        }
    },
    ready() {
        const toggle = this.$el.querySelector('[data-toggle="collapse"]');
        if (toggle) {
            toggle.style.borderRadius = '4px';
            toggle.addEventListener('click', this.toggleCollapse);
        }
        this._closeEvent = EventListener.listen(window, 'click', (e)=> {
            if (!this.$el.contains(e.target)) {
                this.$el.classList.remove('open');
            }
        })
    },
    beforeDestroy() {
        if (this._closeEvent) {
            this._closeEvent.remove();
        }
    }
}

[amanpatel]

I can definitely see the use of this, will add it to the TODO list. Thanks for code.

[HosBak]

Hi,

I believe this issue prevents the navbar from showing the navbar items in a dropdown from the "sandwich" menu in docs/example/headerDocs.vue, when the window is sized to a smaller viewport or is viewed on a mobile phone. Is that assumption correct?

Thanks!