Sidebar does not work in certain viewport widths if page height exceeds viewport height

Hi @tuuuukka, i have tried to reproduce this issue but i am not getting it. Can you enlighten me if i am missing something.
Attached video for reference.

Looks like there was no scrollbar in the browser window in your test @sandip-poddar, and indeed it seems to work if scrollbar is missing.

Here's another video where you can see that when I have "device type" set to "desktop", scrollbar is present and sidebar is not working. But then when I change the device type to "mobile" and the scrollbar is gone, sidebar works normally.

So it's not actually just about the viewport size, but the presence of scrollbar in these specific sizes.

Can you try again if it acts like this for you too?

Been investigating this a bit and not going in to too much details, the issue is related to the ResizeObserver and it being run in certain scenarios. That leads to the sidebar opening, the height of the html element changing, thus handleResize() being run and sidebar being closed again by it. You can see this happening with e.g. this:

diff --git a/js/sidebar.js b/js/sidebar.js
index 9fd9411c..a275864e 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -84,6 +84,7 @@
     },
 
     showSidebar: () => {
+      console.log('open')
       const chooseStorage = window.innerWidth < breakpoint ? storageMobile : storageDesktop;
       const hideLabel = Drupal.t('Hide sidebar panel');
       const sidebarTrigger = document.querySelector('.meta-sidebar__trigger');
@@ -114,6 +115,7 @@
     },
 
     collapseSidebar: () => {
+      console.log('close')
       const chooseStorage = window.innerWidth < breakpoint ? storageMobile : storageDesktop;
       const showLabel = Drupal.t('Show sidebar panel');
       const sidebarTrigger = document.querySelector('.meta-sidebar__trigger');
@@ -133,6 +135,7 @@
     },
 
     handleResize: (windowSize = window) => {
+      console.log('resize')
       Drupal.ginSidebar.removeInlineStyles();
 
       // If small viewport, always collapse sidebar.

In the scenario described in the issue and in #3, when trying to open the sidebar this will log:

open
resize
close
resize
close

In a normal/working situation, i.e. in other viewport widths/heights, it will just log "open". As said before, the issue is that the height of the html element changes and the functionality in handleResize() will then close the sidebar, thus the user will never see it.

I opened an MR to demonstrate how this could be tackled. The idea is that handleResize() is called only if the width of the html element changes. I don't think the height matters or is used in any way there. See the changes: https://git.drupalcode.org/issue/gin-3506018/-/compare/4.0.x...3506018-s....

Other ways to solve this are welcomed of course.

Not sure if this helps, but for me is throws an error in console and refuses to update related variable in the local browser storage:

Error:
`Uncaught TypeError: can't access property "innerHTML", sidebarTrigger.nextSibling is null

And the local storage variable that is not getting updates as the result of the above is Drupal.gin.sidebarExpanded.desktop

Not sure if this helps, but for me is throws an error in console and refuses to update related variable in the local browser storage

Which browser did you get this in @euk? I had nothing in console when I worked on this.

Firefox, Chrome, Edge... I believe it happens on desktop (or rather at the desktop zise) during initialization, after which the sidebar trigger is failing. It works on mobile (again screen size, not a device) and if you hide the taskbar on mobile screen size, it will be not possible to show it back on desktop screen size.