Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Laravel sidebar not minimizing and dark mode


Hi,

I am using the Laravel version of metronic. It seems that the minimize (hide) sidebar button is not working. It expands the main portion of the page but it does not minimize the left sidebar.

Also, light mode does not persist in the browser. It defaults back to dark mode and I cannot set it the light theme as default in code (not working as per your instructions).

Can you fix it?


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 (9)


Hi Kyriakos,

Here is a workaround and it will be included in the upcoming update. To implement this solution, please follow these steps:

1. Remove the file located at resources/assets/demo1/js/layout/aside.js.

2. Replace it with sidebar.js, which can be downloaded from the following link:

https://gist.github.com/faizalmy/99c623ffcff9b3bd1adc94e1cde105ec

Thanks



Hi Kyriakos,

To fix the issue, you can update the code in the file /src/metronic/demo1/js/layout/sidebar.js with the following updated code:


// Add a class to prevent the sidebar hover effect after the toggle click
toggleObj.on("kt.toggle.change", function() {
// Set animation state
sidebar.classList.add("animating");

// Wait till animation finishes
setTimeout(function() {
// Remove animation state
sidebar.classList.remove("animating");
}, 300);
});


We are also working on including this fix in the next update. Thank you for your patience.

Thanks



Hi,

There is no sidebar.js in laravel theme. There is only aside.js and it has this:

// Add a class to prevent aside hover effect after toggle click
toggleObj.on("kt.toggle.change", function() {
aside.classList.add("animating");

setTimeout(function() {
aside.classList.remove("animating");
}, 300);
})



Hi Kyriakos,

We will check and fix it.
Are you using the Laravel starterkit downloaded from here? or Laravel app from the themeforest zip?

Thanks



Hi,

The themeforest one (v8.1.6)

Thanks



Hi,

We will fix these issues in the Metronic v8.1.7 update that we will be releasing this week.

Regards.



Did you fix it?

Didn't see anysing about this in https://keenthemes.com/metronic/changelog



I haven't had the time to look into it but I don't think that this has been fixed. Need to merge a lot of code and haven't got around to it.



Thx Kyriakos.
I'am wait answer from Sean for example.

"Need to merge a lot of code" - I hope they past a code for fix.
I don't want to do this
keenthemes:
"
Updating from an older version would require full code revision and migration from scratch.
Single-line code update is not possible for HTML-based themes since Metronic heavily depends on Bootstrap and other 3rd party plugin updates as well.
"


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  :(