One of the most common features is to have the hidden sidebar to show it when the user presses a button or makes an action, to add a sidebar we have the component vs-sidebar
To add an internal link using vue-router you can do them simply by adding the property to as if it were a vue-router link.
In case you need an external link or normal html, simply do it with the href property
To make the link is in an active state we have the property v-model
<template>
<div id="parentx-demo-1">
<vs-button @click="active=!active" color="primary" type="filled">Open Sidebar</vs-button>
<vs-sidebar parent="body" default-index="1" color="primary" class="sidebarx" spacer v-model="active">
<div class="header-sidebar" slot="header">
<vs-avatar size="70px" src="https://randomuser.me/api/portraits/men/85.jpg"/>
<h4>
My Name
<vs-button color="primary" icon="more_horiz" type="flat"></vs-button>
</h4>
</div>
<vs-sidebar-item index="1" icon="question_answer"> Dashboard </vs-sidebar-item>
<vs-sidebar-item index="2" icon="gavel"> History </vs-sidebar-item>
<vs-divider icon="person" position="left"> User </vs-divider>
<vs-sidebar-item index="3" icon="verified_user"> Configurations </vs-sidebar-item>
<vs-sidebar-item index="4" icon="account_box"> Profile </vs-sidebar-item>
<vs-sidebar-item index="5" > Card </vs-sidebar-item>
<div class="footer-sidebar" slot="footer">
<vs-button icon="reply" color="danger" type="flat">log out</vs-button>
<vs-button icon="settings" color="primary" type="border"></vs-button>
</div>
</vs-sidebar>
</div>
</template>
<script>
export default {
data:()=>({
active:false,
})
}
</script>
<style lang="scss">
.header-sidebar {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
h4 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
> button {
margin-left: 10px;
}
}
}
.footer-sidebar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
> button {
border: 0px solid rgba(0, 0, 0, 0) !important;
border-left: 1px solid rgba(0, 0, 0, 0.07) !important;
border-radius: 0px !important;
}
}
</style>