[Sidebar] `margin-right` and `padding-right` not removed on dynamic sidebar

[ghabriel25]

Bug Report

I'm using dynamic sidebar with Alpine JS to toggle the class like this

<div class="ui left vertical menu" x-bind:class="{ 'sidebar': isTablet, 'fixed': ! isTablet }">
    ...
</div>

and add event listener to window

let mediaQuery = window.matchMedia('(max-width: 991px)')
let isTablet = mediaQuery.matches

mediaQuery.addEventListener('change', (e) => isTablet = e.matches)

Whenever I change the window's width to 991px or below that, the .left.fixed.menu becomes .left.sidebar.menu (which is hidden by default). Then I open the sidebar just like the example provided by documentation

$('.ui.sidebar').sidebar({
  transition: 'overlay',
  mobileTransition: 'overlay',
  scrollLock: true,
  blurring: true
}).sidebar('toggle')

This add margin-right: 15px to the body element and add padding-right: calc(15px) to .top.fixed.menu where sidebar toggler located.

This is the html structure on body element from the top

• .left.menu either .fixed or .sidebar
• .top.fixed.menu (hidden when isTablet false)
• .pusher

Problem

This margin-right and padding-right is not removed if I'm not closing the sidebar using toggle instead just change the window's width. I did try to close the sidebar manually when then window event triggered, however the styles, class .locked on body, class .blurring.dimmed on .pusher and .visible.overlay class on sidebar element still persist.

Workaround

At the moment, I must watch isTablet value whenever it change I manullay remove inline style or class for 4 elements

• body -> style margin-right, class locked
• .top.fixed.menu -> style padding-right
• .left.fixed.menu -> class visible overlay
• .pusher -> class blurring dimmed

Version

2.9.4

[lubber-de]

Seems to be a duplicate of #3303 and was fixed (also for sidebar) by #3304
Please try the nightly beta

If it is still not working, please provide a jsfiddle to play with and easier investigation. Thanks