<template>
    <div id="sidebar" class="leaflet-sidebar collapsed">
        <div class="leaflet-sidebar-tabs">
            <ul role="tablist"> <!-- top aligned tabs -->
                <li><a href="#search" role="tab"><i class="fa fa-search"></i></a></li>
                <li><a href="#all" role="tab"><i class="fa fa-bars"></i></a></li>
            </ul>
        </div>
        <div class="leaflet-sidebar-content">
            <div class="leaflet-sidebar-pane" id="search">
                <h1 class="leaflet-sidebar-header">Search<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
                <Search/>
            </div>
            <div class="leaflet-sidebar-pane" id="all">
                <h1 class="leaflet-sidebar-header">All locations<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
                <ListAll></ListAll>
            </div>
        </div>
    </div>
</template>

<script>
import * as _ from 'leaflet-sidebar-v2';

import Search from './Search';
import ListAll from './ListAll';

export default {
    name: "sidebar",
    components: {
        Search,
        ListAll,
    },
    mounted() {
        this.mapObject = L.control.sidebar({
            autopan: true,
            closeButton: true,
            container: 'sidebar',
            position: 'left',
        });

        let parentContainer = this.$parent;
        while (typeof parentContainer.mapObject === 'undefined') {
            parentContainer = parentContainer.$parent;
        }

        this.mapObject.addTo(parentContainer.mapObject);
    },
    beforeDestroy() {
        this.mapObject.remove();
    }
};
</script>

<style src="leaflet-sidebar-v2/css/leaflet-sidebar.min.css"></style>

<style>
.leaflet-sidebar-content {
    text-align: left;
    font-size: 1.7em;
}

.leaflet-sidebar-pane h1 + * {
    margin-top: 18px;
}
</style>
