How to backdrop-close menu on mobile?

[marcolino]

In my aside menu I have a vertical accordion, so the "close" button sometimes (when some item is opened) is visible and sometimes it's not. So I rely on backdrop: true to let user close my aside menu.
On desktop it works great, but on small mobiles (up to at least a width of 640px) it doesn't, since the aside menu fills ut the screen...
Can you suggest a solution, or even just a loophole :-) ?

Consider that on small screens, with a crowded accordion item open, a close button on the bottom of the aside menu should be usually out of view.

[dbtek]

Hi @marcolino,

Scrolling is possible inside aside. So, overflowed close button could be used by scrolling to bottom. Another solution would be placing the button in modal-header.

[marcolino]

Hi, @dbtek,
of course scrolling is possible, but I feel it's not very instinctive, for the user, to have to go looking for a button to close a menu... :-)
I though to the button in the modal header, too, but I feel a close button in the header is not very common, and - this, too - no so instinctive...
These are just personal thoughts, of course...

However, the fact that the menu completely fills the (mobile) screen is a voluntary decision?
Shouln't it be possible to leave at least a small portion of the background visible and clickable, on the right side?

[dbtek]

Hi @marcolino,

I could not reproduce your problem. There is actually no width rules other than ones for .modal-sm .modal-lg classes.

May be it's about the content you place in aside. No matter what causes this, you should be able to add custom styles that fits aside to your needs. I am not sure it's related to angular-aside.