Sidebar Animation

[demon0430]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x ] I am running the latest version
• [x ] I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• [x ] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

is there a way to make the sidebar expand / transition happen only when the toggle button is clicked and stay fixed until the toggle button is clicked again.

Current Behavior

Current behavior is sidebar expand when hovering on the toggle button and stay fixed when toggle button is clicked.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. step 1
2. step 2
3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

• Device:
• Operating System:
• Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

[teamupdivision]

Hi, @demon0430,

Thank you for using Creative-Tim products!

In order to solve your problem please do the following things:
-> in your project, please remove this event:
$('.sidenav').on('mouseenter', function() { if(! $('body').hasClass('g-sidenav-pinned')) { $('body').removeClass('g-sidenav-hide').removeClass('g-sidenav-hidden').addClass('g-sidenav-show'); } })

-> this is the path:
public/argon/js/argon.js
and in public/argon/css/argon.css, remove .sidenav:hover { max-width: 250px; }

Best,

UPDIVISION

[demon0430]

Hi,

Appreciate the help. It did what its supposed to do but resulted in the toggle button being hidden when on mobile for a big screen on landscape

Appreciate the help.

Thanks,

[teamupdivision]

Hi,

Because on mobile we don't have the event "mouseleave", please delete event function:
$('.sidenav').on('mouseleave', function() { if(! $('body').hasClass('g-sidenav-pinned')) { $('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide'); setTimeout(function() { $('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden'); }, 300); } })

from argon.js and add in function "unpinSidenav()" below code:

if(! $('body').hasClass('g-sidenav-pinned')) { $('body').removeClass('g-sidenav-show').addClass('g-sidenav-hide'); setTimeout(function() { $('body').removeClass('g-sidenav-hide').addClass('g-sidenav-hidden'); }, 300); }

[demon0430]

Hi,

Appreciate the quick response. Will try it and let you know.

Thanks

[demon0430]

Hi,

Appreciate the assistance. We cam close this ticket now.

Thanks

[teamupdivision]

Hi @demon0430,

Glad that you got your problem solved!

If you need help with any of your projects, we're happy to get in touch. We do custom development for start-ups and companies across the globe (you can check out our portfolio here https://updivision.com/portfolio and some happy clients over here https://updivision.com/testimonials). Don`t hesitate to drop us a line at office@updivision.com or by using our contact form (https://updivision.com/contact).

Best,

UPDIVISION

[demon0430]

Hi,

I am using the latest version of the argon dashboard template and is trying to recreate this workaround but is having a problem with this instruction:

public/argon/css/argon.css, remove .sidenav:hover { max-width: 250px; }

the new version has the minified version argon.min.css.

Can you help me locate or update the minified version.

thanks

[teamupdivision]

Hi @demon0430,

Thanks for sending this and for using Creative Tim products.

You can overwrite this css in your custom css file (if you don't have one, you can create in public/css and import it in app.blade.php). Import your css file after the argon file and it will have priority.

Please let us know if this helped and if there is anything else we can do.

Best,
UPDIVISION Team