<!--
    Describe this component...
-->
<template>
    <div>
        <px-side-drawer>
            <section>
                <a href="#">Link One</a>
                <a href="#">Link Two</a>
                <a href="#">Link Three</a>
            </section>

            <section>
                <a href="#">Link Four</a>
                <a href="#">Link Five</a>
                <a href="#">Link Six</a>
            </section>

            <!-- disabled for now...some weirdness with nested modals -->
            <section v-if="false">
                <px-dropdown
                    tag="button"
                    trigger="click"
                    :items="fruits"
                    items-value-property="id"
                    items-label-property="name"
                    items-key-property="id"
                    placeholder="Select a fruit..."
                    :use-modal="false"
                ></px-dropdown>
            </section>

            <template #bottom>
                <section>
                    <a href="#">Bottom</a>
                    <a href="#">Also Bottom</a>
                </section>
            </template>
        </px-side-drawer>
    </div>
</template>

<script>
import PxSideDrawer from '../../components/PxSideDrawer.vue';
import PxDropdown from '../../components/PxDropdown.vue';
import random from '../data/random.js';

export default {
    components: { PxSideDrawer, PxDropdown },
    name: 'demo-px-slide-drawer',
    // components: { Component },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { fruits: random.randomFruits(5) };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>
