Sidebar not closing
Posted: 20 Oct 2020, 01:12
Hi,
I have looked at a few component librarys but it seems primevue's data tables are far superior to the competitors.
I am trying to recreate an app I made with another library where I have a menu 'Sidebar' with the menu items(router links).
When I open the sidebar with my hamburger menu button the sidebar opens but when I click away from the sidebar the bar won't close. It says dismissable = "true" in vue devtools. I can only close the bar by clicking the X on the bar but this is not the functionality I am after. I want mine to work like the demo on the online docs where once clicked ouside of the sidebar the sidebar is auto closed.
I am using Vue 2 and primevue 2
Template
Script
Can anyone steer me in the right direction to get this working?
I have looked at a few component librarys but it seems primevue's data tables are far superior to the competitors.
I am trying to recreate an app I made with another library where I have a menu 'Sidebar' with the menu items(router links).
When I open the sidebar with my hamburger menu button the sidebar opens but when I click away from the sidebar the bar won't close. It says dismissable = "true" in vue devtools. I can only close the bar by clicking the X on the bar but this is not the functionality I am after. I want mine to work like the demo on the online docs where once clicked ouside of the sidebar the sidebar is auto closed.
I am using Vue 2 and primevue 2
Template
Code: Select all
<template>
<div id="app">
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
Content
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</Sidebar>
<Button icon="pi pi-bars" @click="visibleLeft = !visibleLeft" />
<router-view />
</div>
</template>
Code: Select all
<script>
export default {
name: "myco-app",
data() {
return {
visibleLeft: false
};
}
};
</script>