When I sign Out the drop down its frezz

metronic demo 8
node v18.12.0
npm 9.1.2

in the main menu we have profile picture and we have icon setting its drop down
so when I click sign out its work then we go to sign in page
but the issue is the drop down frezz I mean its stay in login page !

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (13)

Hi,

Unfortunately, we were not able to reproduce this issue in the latest Metronic version.

Could you please specify which Metronic version are you using?

Do you have the same issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo8/#/dashboard

You can hide all open menu instances using MenuComponent.hideDropdowns(undefined);.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
am using Metronic version 8.1.6.

Yes, I have the same issue on this preview page.
https://preview.keenthemes.com/metronic8/vue/demo8/#/dashboard

Hi,

Thank you for your feedback.

To fix this issue you can include code below inside your Layout's mounted function.

watch(
() => route.path,
() => {
MenuComponent.hideDropdowns(undefined);
}
);

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi ,
Thanks for your replay , I tried this solve but its not working
please tell me more information to where I can include this code , I tried included in MainLayout.vue then inside
onMounted(() => {
nextTick(() => {
reinitializeComponents();
});
watch(
() => route.path,
() => {
MenuComponent.hideDropdowns(undefined);
}
);
});

and I make import MenuComponent
import { MenuComponent } from "@/assets/ts/components";

Hi Hosam,

You can keep this code inside MainLayout.vue.

Here is an example:

const route = useRoute();

onBeforeMount(() => {
LayoutService.init();
});

onMounted(() => {
nextTick(() => {
reinitializeComponents();
});
});

watch(
() => route.path,
() => {
nextTick(() => {
reinitializeComponents();
MenuComponent.hideDropdowns(undefined);
});
}
);

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
sorry brother but also this code not working for solve the issue ,
I added exactly same code but not working ,
and this issue not just when click sign out ,
the dropdown freezing when click any option ,
I added also this with your code :
import { MenuComponent } from "@/assets/ts/components";

Hi Hosam,

Not sure what else could cause the issue if you haven't modified our component initialization or MenuComponent.ts then this should work.

Do you have any errors in our browsers console?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
I don't make any change in MenuComponent.ts am sure ,
and I don't have any errors in my browsers console ,
also you can see the same error in new version 8.1.7 ,
I tried too much to solve this issue but I cant up to now ,
please help me It's a very annoying issue .

Hi Hosam,

Thank you for your feedback.

We rechecked the latest version and reproduced an issue, it seems like issue appears only on second initialization. We will check this in more detail and provide you solution here as soon as possible.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,
Thanks support ,
Am waiting the provide soluation here ,
thanks again .

Hi Hosam,

To fix this issue for user menu you can remove attribute data-kt-menu-overflow="true" from menu toggle element in file src/layouts/main-layout/aside/AsideToolbar.vue.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi,
Now the issue is solved, thanks so much.

Hi Hosam,

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(