[Sidebar] `margin-right` and `padding-right` not removed on dynamic sidebar
type/bugstate/awaiting-investigationstate/awaiting-triage
# Bug Report
I'm using dynamic sidebar with [Alpine JS](https://alpinejs.dev/) to toggle the class like this
```blade
<div class="ui left vertical menu" x-bind:class="{ 'sidebar': isTablet, 'fixed': ! isTablet }">
...
</div>
```
and add event listener to window
```js
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
```js
$('.ui.sidebar').sidebar({
transition: 'overlay',
mobileTransition: 'overlay',
scrollLock: true,
blurring: true
}).sidebar('toggle')
```
This add `margin-right: 15px` to the `.pusher` element (which is my content's container) 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` element still persist.
## Version
2.9.4
0 条评论