Sidebar not closing

UI Components for Vue
Post Reply
shocolate15
Posts: 2
Joined: 20 Oct 2020, 00:25

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

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
Posts: 2
Joined: 20 Oct 2020, 00:25

20 Oct 2020, 09:47

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
Posts: 4484
Joined: 29 Jun 2013, 12:38

13 Nov 2020, 23:29

Hi,

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

Best Regards,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest