Page 1 of 1

Sidebar not closing

Posted: 20 Oct 2020, 01:12
by 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?

Re: Sidebar not closing

Posted: 20 Oct 2020, 09:47
by 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%;
}

Re: Sidebar not closing

Posted: 13 Nov 2020, 23:29
by mert.sincan
Hi,

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

Best Regards,