Sidebar Animation
Closed this issue · 8 comments
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.
- step 1
- step 2
- 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.
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
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); }
Hi,
Appreciate the quick response. Will try it and let you know.
Thanks
Hi,
Appreciate the assistance. We cam close this ticket now.
Thanks
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
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
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