Sidebar not closing

[shocolate15]

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

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>

Script

Code: Select all

<script>
export default {
  name: "myco-app",
  data() {
    return {
      visibleLeft: false
    };
  }
};
</script>

Can anyone steer me in the right direction to get this working?

[shocolate15]

I managed to get this working by adding this to the style.

Code: Select all

.p-component-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[mert.sincan]

Hi,

Thanks a lot for the update! Yes, the mask of Sidebar has the style you added.

Best Regards,