yaminncco / vue-sidebar-menu

A Vue.js Sidebar Menu Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem with closing animation of width

CaptainCannabis opened this issue · comments

The sidebar wont animate the width correctly on close. I tried same menu items with white or default theme, without my modifications and so on but i cannot determine what causes it. On opening the width from (my min is 50px and max is 300) is animated correctly). I only edited the theme scss. Any ideas? It positioned relative

navanimation

EDIT: I am using it in an auto sized grid column, that seems to make the difference. Not related to the sidebar itself!

Quick fix for this is to add width transition, here is an example:

<template>
  <div class="grid">
    <sidebar-menu relative />
    <div>content</div>
  </div>
</template>

<style>
.grid {
  display: grid;
  grid-template-columns: min-content 1fr;
}
.grid .v-sidebar-menu .vsm--scroll>.vsm--menu {
  transition: 0.3s width ease;
}
</style>

Quick fix for this is to add width transition, here is an example:

<template>
  <div class="grid">
    <sidebar-menu relative />
    <div>content</div>
  </div>
</template>

<style>
.grid {
  display: grid;
  grid-template-columns: min-content 1fr;
}
.grid .v-sidebar-menu .vsm--scroll>.vsm--menu {
  transition: 0.3s width ease;
}
</style>

Wow - thank you for that response. Indeed - with that additional transition i can use it in my grid layout without having to change anything else
layout2
!