OpenLayers 6 custom control using Vuetify and a resizable div

Question

I am trying to understand how to extend the Control class of a OpenLayers 6 map using Vuetify components inside. I have several ideas to implement such as a collapsable search bar or a simple collapsable layer picker, but I am not sure how to set up the control to be reactive with the rest of my Vue 2 SPA and I even struggle to hook to the CSS classes properly to position the div. I have followed the following example 1, example 2, example 3 and others but I can not get it to work. Ideally someone can make a CodePen, JSFiddle or other that implements even the simplest example of a collapsable Vuetify based Custom Control for OL6. The more explanation there is the better as I am trying to understand how things work and the official doc was not of much help to me.

Answer 1

I ended up abandoning the templates I kept finding on forums and trying to use the addControl function of the Map object and passing as element a v-container with a unique id I wrote just as you would any other component. Here is a snippet of the code that allows for this.

<template>
  <v-container id="expandCustomControl" fluid>
    <v-menu
      close-on-content-click="false"
      bottom
      offset-y
      nudge-bottom="10"
      nudge-left="5"
      content-class="testContentClass"
    >
      <template v-slot:activator="{ on , attrs }">
        <v-btn
          color="primary"
          v-bind="attrs"
          v-on="on"
          x-small
          fab>
          <v-icon>
            {{ attrs["aria-expanded"] === "true" ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
          </v-icon>
        </v-btn>
      </template>

      <v-container id="insideMenuExpansionPanel" @click.stop>
        <v-row class="mt-1 ml-1">
          <span>Custom Controls</span>
        </v-row>
        <v-row>
          <v-divider class="mx-2"/>
        </v-row>
        <v-row>
          <v-hover v-slot="{ hover }">
            <v-autocomplete
              dense
              rounded
              solo
              hide-details
              :style="{ 'width': hover ? '350px' : '150px' }"
              class="mx-2 mt-2"/>
          </v-hover>
        </v-row>
        <v-row justify="start" class="my-0">
          <v-col>
            <v-switch inset v-model="testSwitchValue" :label="`Switch : ${testSwitchValue}`"/>
          </v-col>
        </v-row>
      </v-container>
    </v-menu>
  </v-container>
</template>

<script>
  ...
  var myControl = new Control({element: document.getElementById("expandCustomControl")});
  ...
  this.map.addControl(myControl)
  ...
</script>

<style scoped>
#insideMenuExpansionPanel {
  border-radius: 25px;
}

.testContentClass {
  border-radius: 25px;
  background-color: rgba(240, 248, 255, 0.6);
}

#expandCustomControl {
  position: relative; /* important to ensure the custom control is positioned relative to the top left corner of the map div */
  top: 65px;
  left: 0.1em;
  max-width: 60px;
  max-height: 400px;
  margin: 0px; /* important to ensure the custom control is not centered since the container has margin: auto by default */
}
</style>

EDIT : Confirmed that the Vuetify UI elements in the container have access to the context and they work as expected however now my struggle is to see how to ensure that the container expands on hover

EDIT 2 : I decided to implement it to open on click but hover should not be too different.