Show or hide sidebar depending on screen resolution

[xek2007]

Hello, I'm using Drupal's module PDF: https://www.drupal.org/project/pdf which is based in PDF.js and uses it's libraries and code.

I'm using this module to display magazines on a website. It's still a sample site so I can't share the link, but I think it's not really important as I just need to know if there is a way to achieve what I'm looking for.

The module allows you to choose if I want the magazines to be displayed including the sidebar at the left side that displays the thumbnails or no sidebar at all.
My question is: Is there some easy way to modify or create a new code at the PDF.js files, so that whenever a user enters the site it displays the sidebar or not depending on the device they are using and the width of the page.

What I want to achieve is:

1-If an user visits the site in a device with a big screen such as a PC or a tablet (lets say if the resolution of the screen is larger than 768px), it will display the sidebar at the left with the thumbnails)
2-If an user visits the site from a mobilephone (lets say the resolution of the screen is smaller than 768px), then the sidebar will be not showing and it will just display the document full size.

Basically, I'm trying to achieve the same behaviour that if I would use the css property like:
@media (max-width: 768px) {}
but to achieve that the sidebar is active or not.
I guess I could find the way to hide the sidebar at all using css just by using the "display:none" for the sidebar for a certain width, but I don't want to just hide its content, I want it to be closed but if the user wants to open it by himself he could do it. I guess that would require to modify some js code, but I'm not sure which one and if it would be something possible to achieve easily.

If somebody could help me with this I would appreciate.

I know that somebody may think that this may be something to ask at the Drupal module page, but as it's using pdf.js librarries I guess the code would need to be modified there, so it may be more appropiate to ask here. But if you consider that this is not the proper place to ask, I could try to ask there too.

Thank you in advance!

[lasseborly]

I think you might be able to do it like this @xek2007.

  PDFViewerApplication.initializedPromise.then(() => {
    PDFViewerApplication.eventBus.on("metadataloaded", () => {
      if (document.body.clientWidth >= 768) {
        PDFViewerApplication.pdfSidebar.open();
      } else {
        PDFViewerApplication.pdfSidebar.close();
      }
    })
  })

You might also want to look into PDFViewerApplicationOptions.set("sidebarViewOnLoad", -1); and if that not serves your purpose. The above suggestion will ignore the last state that the person had the UI in before closing it. Setting the sidebarViewOnLoad will respect the users previous actions.