BC-7415 - Make sidebar usable on tablets (#3457)

* fixing sidebar on mobile * adjust window behaviour when clicked or touched outside of the overlay
hpi-schul-cloud · Jun 18, 2024 · e7583c4 · e7583c4
1 parent 5fe6ee2
commit e7583c4
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/static/scripts/loggedin.js b/static/scripts/loggedin.js
@@ -63,6 +63,7 @@ function adjustContentWidth(sidebar) {
 function toggleSidebar() {
     const sidebar = document.querySelector('.sidebar');
     const overlay = document.querySelector('.overlay');
+    const contentDiv = document.querySelector('.content-min-height');
 
 	if (sidebar) {
 		if (sidebar.classList.contains('hidden')) {
@@ -71,13 +72,19 @@ function toggleSidebar() {
 
             if (window.innerWidth <= 1279) {
                 overlay.style.display = "block";
+                overlay.style.position = "fixed";
+                contentDiv.style.position = "fixed";
+                sidebar.style.height = "100%";
             }
         } else {
             sidebar.classList.remove('visible');
             sidebar.classList.add('hidden');
 
             if (window.innerWidth <= 1279) {
                 overlay.style.display = "none";
+                overlay.style.position = "absolute";
+                contentDiv.style.position = "static";
+                sidebar.style.height = "unset";
             }
         }
 
@@ -232,11 +239,15 @@ $(document).ready(function () {
     toggleSidebarOnWindowWidth(sidebar);
 
     const overlay = document.querySelector('.overlay');
+    const contentDiv = document.querySelector('.content-min-height');
     if (overlay) {
         overlay.addEventListener('click', () => {
             sidebar.classList.remove('visible');
             sidebar.classList.add('hidden');
+            sidebar.style.height = "unset";
             overlay.style.display = "none";
+            overlay.style.position = "absolute";
+            contentDiv.style.position = "static";
         });
     }