In the process of creating a side bar menu with collapse show/hide functionality, I am encountering some issues. The current CSS implementation is making the collapse action appear abrupt and unnatural.
I am looking to achieve a smooth sliding transition when an item is being closed. However, the problem arises when one item is already open and another item is clicked to open. It seems like the toggle effect is too forced and does not provide a smooth collapsing effect for the list.
Any suggestions on a better approach to achieve this desired smooth transition?
I am uncertain whether my current approach is correct or if there is something missing in my code?
new Vue({
el: '#app',
methods: {
setActiveItemId(itemIndex) {
if (itemIndex === this.activeItemId) {
this.activeItemId = ''
return
}
this.activeItemId = itemIndex
}
},
data() {
return {
message: 'Hello Vue.js!',
activeItemId: '',
sideBar: [{
name: "Dashboard",
url: "/dashboard",
icon: "ti-world",
children: [{
name: "Buttons",
url: "/components/buttons",
icon: "fa-book",
},
{
name: "Social Buttons",
url: "/components/social-buttons",
icon: "icon-puzzle",
}
]
},
{
name: "Components",
url: "/components",
icon: "ti-pencil-alt",
children: [{
name: "Buttons",
url: "/components/buttons",
icon: "fa-book",
},
{
name: "Social Buttons",
url: "/components/social-buttons",
icon: "icon-puzzle",
}
]
},
{
name: "Validation",
url: "/components",
icon: "ti-pencil-alt",
children: [{
name: "Buttons",
url: "/components/buttons",
icon: "fa-book",
},
{
name: "Social Buttons",
url: "/components/social-buttons",
icon: "icon-puzzle",
}
]
}
]
}
},
computed: {
isActive() {
return this.activeItemId !== ''
}
}
}).collapse.show {
display: block;
}
.collapse {
display: none;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.collapse.list-unstyled {
padding-left: 15px;
}
nav.side-navbar {
background: #fff;
min-width: 250px;
max-width: 250px;
color: #000;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
z-index: 999;
}
nav.side-navbar ul a:hover {
background: orange;
color: #fff !important;
}
nav.side-navbar ul a {
padding: 10px 15px;
text-decoration: none;
display: block;
font-weight: 300;
border-left: 4px solid transparent;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<nav class="side-navbar">
<ul class="list-unstyled">
<li>
<a>
<i class="ti-home"></i>Home</a>
</li>
<li v-for="(x, itemIndex) in sideBar" :key="itemIndex">
<a @click="setActiveItemId(itemIndex)">
<i class="fa" :class="x.icon"></i>{{x.name}}
</a>
<ul :id="x.id" class="collapse list-unstyled" :class="{'show':activeItemId === itemIndex && isActive}">
<li v-for="y in x.children" :key="y.id">
<a>{{y.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>