Support for mobile

src/app/main.content.js

@@ -148,4 +148,8 @@ class Content {
       }
     }
   }
+
+  updateMobileSectionsVisibilityState(forcedState) {
+    return this.#currentSectionsElement.classList.toggle('show', forcedState);
+  }
 }

src/app/main.header.js

@@ -1,6 +1,10 @@
 class Header {
   #onChangeListeners = [];
+  #onSidebarUpdateListener = [];
+  #onCompassUpdateListener = [];
 
+  #headerMenu;
+  #headerCompass;
   #headerDescription;
   #headerProjectName;
   #fakeHeaderTitle;
@@ -9,14 +13,16 @@ class Header {
     const headerMenu = document.createElement('div');
     headerMenu.classList.add('menu');
     headerMenu.addEventListener('click', () => {
-      /*const state = leftContainer.classList.toggle('show');
-      headerMenu.classList.toggle('show', state);
-      this.#pageSections.classList.remove('show');
-      headerCompass.classList.remove('show');*/
+      for(const listener of this.#onSidebarUpdateListener) {
+        try {
+          listener();
+        } catch(e) {}
+      }
     });
     headerMenu.appendChild(document.createElement('div'));
     headerMenu.appendChild(document.createElement('div'));
     headerMenu.appendChild(document.createElement('div'));
+    this.#headerMenu = headerMenu;
 
     const headerIcon = document.createElement('img');
     headerIcon.src = '/src/assets/splash/telegram-logo.svg';
@@ -35,10 +41,14 @@ class Header {
     const headerCompass = document.createElement('img');
     headerCompass.classList.add('header-compass');
     headerCompass.addEventListener('click', () => {
-      //const state = this.#pageSections.classList.toggle('show');
-      //headerCompass.classList.toggle('show', state);
+      for(const listener of this.#onCompassUpdateListener) {
+        try {
+          listener();
+        } catch(e) {}
+      }
     });
     headerCompass.src = '/src/icons/compass.svg';
+    this.#headerCompass = headerCompass;
 
     const headerDescription = document.createElement('div');
     headerDescription.classList.add('description');
@@ -112,6 +122,30 @@ class Header {
     }
   }
 
+  updateSidebarMobileVisibilityState(state) {
+    this.#headerMenu.classList.toggle('show', state);
+  }
+
+  addOnSidebarUpdateListener(callback) {
+    if (typeof callback === 'function') {
+      this.#onSidebarUpdateListener.push(callback);
+    }
+  }
+
+  updateCompassVisibilityState(state) {
+    this.#headerCompass.classList.toggle('visible', state);
+  }
+
+  updateCompassExpandedState(state) {
+    this.#headerCompass.classList.toggle('show', state);
+  }
+
+  addOnCompassUpdateListener(callback) {
+    if (typeof callback === 'function') {
+      this.#onCompassUpdateListener.push(callback);
+    }
+  }
+
   #appendTitleUpdateOnActiveTabUpdate() {
     this.#onChangeListeners.push((id) => {
       document.title = id + ' Documentation';

src/app/main.home.js

@@ -25,10 +25,30 @@ class HomePage {
 
     this.#headerInstance.addOnActiveTabUpdate((id) => {
       this.#sidebarInstance.loadSidebar(id);
+      this.#headerInstance.updateCompassVisibilityState(false);
+      this.#headerInstance.updateCompassExpandedState(false);
       this.#contentInstance.clearBoard();
     });
 
+    this.#headerInstance.addOnSidebarUpdateListener(() => {
+      const state = this.#sidebarInstance.updateMobileVisibilityState();
+      this.#headerInstance.updateSidebarMobileVisibilityState(state);
+      this.#headerInstance.updateCompassExpandedState(false);
+      this.#contentInstance.updateMobileSectionsVisibilityState(false);
+    });
+
+    this.#headerInstance.addOnCompassUpdateListener(() => {
+      const state = this.#contentInstance.updateMobileSectionsVisibilityState();
+      this.#headerInstance.updateCompassExpandedState(state);
+      this.#sidebarInstance.updateMobileVisibilityState(false);
+      this.#headerInstance.updateSidebarMobileVisibilityState(false);
+    });
+
     this.#sidebarInstance.addOnSelectedFileUpdate((file) => {
+      this.#headerInstance.updateSidebarMobileVisibilityState(false);
+      this.#headerInstance.updateCompassVisibilityState(true);
+      this.#headerInstance.updateCompassExpandedState(false);
+      this.#sidebarInstance.updateMobileVisibilityState(false);
       this.#contentInstance.loadFile(file);
     });
   }

src/app/main.sidebar.js

@@ -25,6 +25,13 @@ class Sidebar {
 
     return leftContainer;
   }
+
+  updateMobileVisibilityState(forcedState) {
+    const state = this.#leftContainer.classList.toggle('show', forcedState);
+    this.#leftSidebar.classList.add('expanded');
+    this.#searchBar.classList.remove('expanded');
+    return state;
+  }
 
   #createSearchBar() {
     const searchIcon = document.createElement('img');