.map-menu
    div( v-if="query.type" @click="drawer_click_item()" )
        .map-menu-item(v-html="generate_icon('close')")
    div(v-if="!query.type" @click="search_enable('hotel')")
        .map-menu-item( v-html="generate_icon('bed')")
    div(v-if="!query.type" @click="search_enable('restaurant')")
        .map-menu-item( v-html="generate_icon('utensils')")
    div(v-if="!query.type" @click="search_enable('place')")
        .map-menu-item( v-html="generate_icon('star')")
    .map-menu-sub(v-if="!query.type" @mouseenter="query.sub=true" @mouseleave="query.sub=false" )
        .map-menu-item(v-html="generate_icon('route')")
        .map-menu-item(v-if="query.sub" @click="search_enable('flight')" v-html="generate_icon('plane')")
        .map-menu-item(v-if="query.sub" @click="search_enable('train')" v-html="generate_icon('train')")
        .map-menu-item(v-if="query.sub" @click="search_enable('car')" v-html="generate_icon('car')")
        .map-menu-item(v-if="query.sub" @click="search_enable('other')" v-html="generate_icon('person-biking')")

        
//- .map-menu-sub {
//-   display: flex;
//-   flex-direction: row-reverse;
//-   gap: 5px;
//- }
//- .map-menu-item,
//- .map-menu-sub-item {
//-   background-color: var(--darkdark);
//-   padding: 5px;
//-   border-radius: 50%;
//-   cursor: pointer;
//-   float: right;
//-   height: fit-content;
//- }
//- .vue2leaflet-map {
//-   border-radius: 3px;
//- }
//- .leaflet-popup-content {
//-   margin: 10px 20px;
//- }