My project includes a sidebar that opens when I hover over it with the mouse. Everything works fine, but within the sidebar, there is a collapse dropdown menu. When I open this menu and then move the mouse away from the sidebar and back again, the collapse remains open. You can see this more clearly in the screenshots. What I want is for there to be no space between the icons when the sidebar is closed.
Template sidebar
<v-navigation-drawer width="320" :disable-resize-watcher="true">
<v-list v-if="userRole == 'Distributor' || isSuper">
<v-list-tile
:append="true"
v-for="(item, index) in distMenu"
:key="index"
:class="{
'active-sidebar-item': item.href.includes(activeLinkRef),
}"
style="margin-bottom: 5px;"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
<router-link :to="item.href">{{
item.title
}}</router-link></v-list-tile-title
>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list v-if="userRole == 'Sysadmin' && !isSuper">
<v-list-tile
:append="true"
v-for="(item, index) in sysMenu"
:key="index"
:class="{
'active-sidebar-item': item.href.includes(activeLinkRef),
}"
style="margin-bottom: 5px;"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
<router-link :to="item.href">{{
item.title
}}</router-link></v-list-tile-title
>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list v-if="userRole != 'Distributor' || isSuper">
<v-list-tile
:append="true"
v-for="(item, index) in menu"
:key="index"
:class="{
'active-sidebar-item': item.href.includes(activeLinkRef),
}"
style="margin-bottom: 5px;"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>
<router-link :to="item.href">{{ item.title }}</router-link>
</v-list-tile-title>
</v-list-tile>
<Facilities
:facilities="facilities"
v-if="
(userRole.toLowerCase() != 'distributor' && hasCompany) ||
isSuper
"
:activeLinkRef="activeLinkRef"
></Facilities>
</v-list>
</v-navigation-drawer>
Facilities.vue
<v-list-group
prepend-icon="business"
:value="false"
v-for="(facility, index) in facilities"
:key="index"
:class="{
'active-sidebar-item':
activeLinkRef[0] == 'facility' && activeLinkRef[1] == facility.id,
}"
style="margin-bottom: 5px"
>
<template v-slot:activator>
<v-list-tile :append="true">
<router-link :to="'/facility/' + facility.id">{{
facility.name
}}</router-link>
</v-list-tile>
</template>
<systems
:systems="facility.systems.length > 0 ? facility.systems : []"
:facility="facility.id"
:activeLinkRef="activeLinkRef"
></systems>
</v-list-group>
<v-list-tile
class="input-list-tile"
v-if="isSuper || userRole.toLowerCase() == 'sysadmin'"
>
<v-list-tile-title
style="padding-left: 54px; height: 40px"
class="input-option"
>
<!-- <input
style="border: 1px solid #dedede"
type="text"
name="add-facility"
id="add-facility"
:placeholder="$t('sidebar.addFacility')"
@keyup.enter="addFacility"
/> -->
<b-form-input
size="sm"
style="border: 1px solid #dedede"
class="w-100"
name="add-facility"
id="add-facility"
:placeholder="$t('sidebar.addFacility')"
@keyup.enter="addFacility"
></b-form-input>
</v-list-tile-title>
<v-list-tile-action style="justify-content: right;">
<v-icon @click="addFacility">add</v-icon>
</v-list-tile-action>
</v-list-tile>
When the mouse is not over the sidebar
https://i.stack.imgur.com/RCslE.png
After opening the sidebar, everything seems to work correctly.
https://i.stack.imgur.com/1SKyo.png
However, once I move the mouse away from the sidebar, it closes and shows this image