[Bug] Mobile menu not working on AuthLayout pages

[plinio-cardoso]

Version

2.0.0

Reproduction link

https://demos.creative-tim.com/vue-argon-dashboard-pro/#/pricing

Operating System

Linux

Device

Samsung Galaxy Note 10 but I think it doesn't work on any device

Browser & Version

Chrome

Steps to reproduce

1. Go to the pricing route (https://demos.creative-tim.com/vue-argon-dashboard-pro/#/pricing)
2. Open the mobile simulator on Chrome or open it on any smartphone
3. Click on the menu icon

   What is expected?

   Menu show be expanded/shown

   What is actually happening?

   Nothing happens

---

Solution

I tried to dig more in the code to find the solution but I couldn't, sorry.

Additional comments

Maybe it was a bug introduced when it was migrated to the Vue3? Just guessing.

[rarestoma]

Hi @plinio-cardoso,

Thank you for working with our products and for pointing us to this issue.

To fix this, you have to do the following changes:

1. In src/views/Pages/AuthLayout.vue, on line 30 change:

@click="showMenu = false" with @click="closeMenu"

and then, in methods add: 

closeMenu() {
      document.body.classList.remove("nav-open");
      document.querySelector('.navbar-collapse').style.display = 'none';
      this.showMenu = false;
    }

2. In src/components/Navbar/BaseNav.vue:

add:

<button class="navbar-toggler">
        <navbar-toggle-button @click="toggleNavbar" target="#nav">
          <span class="navbar-toggler-icon"></span>
        </navbar-toggle-button>
      </button>

and, in methods:

 toggleNavbar() {
      document.body.classList.toggle("nav-open");
      document.querySelector('.navbar-collapse').style.display = 'block';
      this.showMenu = !this.showMenu;
    },
    closeMenu() {
      document.body.classList.remove("nav-open");
      document.querySelector('.navbar-collapse').style.display = 'none';
      this.showMenu = false;
    },

Please let me know if it works.

Thank you, Rares

[plinio-cardoso]

Hi,

that worked.

Thank you.

Em seg., 15 de mar. de 2021 às 09:02, rarestoma @.***> escreveu:

Hi @plinio-cardoso https://github.com/plinio-cardoso,

Thank you for working with our products and for pointing us to this issue.

To fix this, you have to do the following changes:

1. In src/views/Pages/AuthLayout.vue, on line 30 change:

@click="showMenu = false" with @click="closeMenu"

and then, in methods add:

closeMenu() { document.body.classList.remove("nav-open"); document.querySelector('.navbar-collapse').style.display = 'none'; this.showMenu = false; }

1. In src/components/Navbar/BaseNav.vue:

add:

and, in methods:

toggleNavbar() { document.body.classList.toggle("nav-open"); document.querySelector('.navbar-collapse').style.display = 'block'; this.showMenu = !this.showMenu; }, closeMenu() { document.body.classList.remove("nav-open"); document.querySelector('.navbar-collapse').style.display = 'none'; this.showMenu = false; },

Please let me know if it works.

Thank you, Rares

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-vue-argon-dashboard-pro/issues/38#issuecomment-799243859, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIMW26ILPZBICAYRVH33TGLTDXEIPANCNFSM4ZDX24VQ .

-- Plinio Cardoso Certified Magento Developer (+353) 083 881 8385

[sajadevo]

Hi there,

We've updated the product to v3 which comes with a new look and a new base structure for more reusable components.

All the best Sajad

Web Developer @ Creative-Tim.com