Resolve "Sidebar auf ursprünglichen Stand zurückbauen: auch auf Admin-VA sticky"

Closes #3422

Merge request studip/studip!2327

resources/assets/javascripts/bootstrap/sidebar.js

-STUDIP.ready(() => {
-    // Apply sidebar magic only on admin/courses
-    if (
-        document.body.id === 'admin-courses-index'
-        && !document.documentElement.classList.contains('responsive-display')
-    ) {
-        STUDIP.Sidebar.observeFooter();
-        STUDIP.Sidebar.observeSidebar();
-
-        document.defaultView.addEventListener('resize', () => {
-            STUDIP.Sidebar.reset();
-        });
-    }
-
-});

resources/assets/javascripts/entry-base.js

@@ -85,7 +85,6 @@ import "./bootstrap/contentmodules.js"
 import "./bootstrap/responsive-navigation.js"
 import "./bootstrap/treeview.js"
 import "./bootstrap/stock-images.js"
-import "./bootstrap/sidebar.js"
 
 import "./mvv_course_wizard.js"
 import "./mvv.js"

resources/assets/javascripts/lib/sidebar.js

-const Sidebar = {
-
-    observeSidebar() {
-        const options = {
-            root: null,
-            rootMargin: '0px 0px 35px 0px',
-            threshold: 1
-        };
-
-        /**
-         * Observe if sidebar fits into viewport.
-         */
-        const sidebar = document.getElementById('sidebar');
-        if (sidebar) {
-            const sObserver = new IntersectionObserver(STUDIP.Sidebar.fits, options);
-            sObserver.observe(sidebar, options);
-        }
-    },
-
-    observeFooter() {
-        const options = {
-            root: null,
-            rootMargin: '0px',
-            threshold: 1
-        };
-
-        /**
-         * Observe if the footer is visible in viewport.
-         */
-        const fObserver = new IntersectionObserver(STUDIP.Sidebar.footerVisible, options);
-        fObserver.observe(document.getElementById('main-footer'), options);
+import Scroll from './scroll.js';
 
+const Sidebar = {
+    open () {
+        this.toggle(true);
     },
-
-    reset() {
-        const sidebar = document.getElementById('sidebar');
-        if (sidebar) {
-            sidebar.classList.remove('oversized', 'was-oversized', 'fixed');
-            sidebar.style.top = '';
-            STUDIP.Sidebar.observeSidebar();
-        }
+    close () {
+        this.toggle(false);
     },
+    toggle (visible = null) {
+        visible = visible ?? !$('#sidebar').hasClass('visible-sidebar');
 
-    fits(entries, observer) {
-        const sidebar = document.getElementById('sidebar');
-        if (sidebar) {
-            entries.forEach(entry => {
-                // Sidebar fits onto current page.
-                if (entry.isIntersecting) {
-                    sidebar.classList.remove('oversized');
-                } else {
-                    sidebar.classList.add('oversized', 'was-oversized');
-                }
-            });
-        }
-    },
+        // Hide navigation
+        $('#responsive-toggle').prop('checked', false);
+        $('#responsive-navigation').removeClass('visible');
 
-    footerVisible(entries, observer) {
-        const sidebar = document.getElementById('sidebar');
-        if (sidebar) {
-            entries.forEach(entry => {
-                // Footer is visible on current page.
-                if (entry.isIntersecting) {
-                    sidebar.classList.remove('no-footer');
-                } else {
-                    sidebar.classList.add('no-footer');
-                }
-            });
-        }
+        $('#sidebar').toggleClass('visible-sidebar', visible);
     }
 };
 

resources/assets/stylesheets/scss/sidebar.scss

@@ -112,67 +112,6 @@
     }
 }
 
-html {
-    &:not(.responsive-display) {
-        #admin-courses-index {
-            #sidebar {
-                top: 50px;
-                transition: all var(--transition-duration) ease-in-out;
-
-                &.was-oversized {
-                    height: calc(100vh - 250px);
-                    overflow-y: auto;
-                    position: fixed;
-                    top: 155px;
-
-                    &.no-footer {
-                        height: calc(100vh - 200px);
-                    }
-                }
-
-                .widget-links {
-                    li.active {
-                        &::before,
-                        &::after {
-                            border: 0;
-                        }
-                    }
-                }
-            }
-
-            &.fixed {
-                #sidebar {
-                    height: calc(100vh - 125px);
-                    top: 35px;
-
-                    &.no-footer {
-                        height: calc(100vh - 100px);
-                    }
-                }
-            }
-
-            &.fullscreen-sidebar-shown {
-                #sidebar {
-                    top: 110px;
-
-                    &.was-oversized {
-                        height: calc(100vh - 200px);
-
-                        &.no-footer {
-                            height: calc(100vh - 150px);
-                        }
-
-                        &.fixed {
-                            top: 110px;
-                        }
-                    }
-                }
-            }
-
-        }
-    }
-}
-
 ul.widget-list {
     list-style: none;
     margin: 0;

resources/vue/components/responsive/ResponsiveNavigation.vue

@@ -321,8 +321,7 @@ export default {
                 this.showMenu = false;
                 cache.remove('fullscreen-mode');
                 document.getElementById('responsive-toggle-focusmode').style.display = 'none';
-                document.body.classList.remove('fullscreen-sidebar-shown');
-                document.body.style.display = '';
+                document.body.style.display = null;
 
                 const siteTitle = document.getElementById('site-title');
                 if (siteTitle.dataset.originalTitle) {