[sidebar] "overlay" transition setting doesn't work on mobile devices

[yar-developer]

Bug Report

hi, the sidebar has two issues:

1. 'overlay' transition setting doesn't work on mobile devices (it pushes the page as the "push" transition setting does), but works on desktop devices.
2. the sidebar's dimmer doesn't prevent the click and focus event occurrence on the elements under the dimmer (it should prevent it).

Testcase

1. open this link https://jsfiddle.net/n3v2ry60/1/ on a mobile device (go to portrait mode & click setting & tabs(columns) butn to better see the page)
2. click on the "click" button, the transition "overlay" setting doesn't work.
3. when the sidebar is open, click on the dimmer where the input element is visible, you will see that the sidebar closes and the input gets focus (because mobile's screen keyboard gets shown)

note: my mobile device's user agents are
Mozilla/5.0 (Linux; Android 10; SM-A705FN)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/89.0.4389.86
Mobile Safari/537.36

Screenshot (if possible)

sidebar.issue.mp4

Version

Fomantic-UI 2.8.7

[lubber-de]

transitions on mobile have their own setting mobileTransition, so use mobileTransition: 'overlay' to get this fixed.

See https://jsfiddle.net/lubber/cfd6kq19/2

Please open another issue and a testcase for the second issue you mentioned, so this one can be closed

[yar-developer]

thanks. ok i will send the second issue in a seperate one