From 914a731094e262b4e9fb6108016d3a725c245e49 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 8 Feb 2025 09:55:38 +0200
Subject: [PATCH] feat(mobile): collapsible advanced section in global menu

---
 src/public/app/widgets/buttons/global_menu.ts | 19 +++++++++----------
 src/public/stylesheets/style.css              |  6 +++---
 src/public/stylesheets/theme-next/shell.css   |  4 ----
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/public/app/widgets/buttons/global_menu.ts b/src/public/app/widgets/buttons/global_menu.ts
index 822361ec3..c7be1f964 100644
--- a/src/public/app/widgets/buttons/global_menu.ts
+++ b/src/public/app/widgets/buttons/global_menu.ts
@@ -88,16 +88,6 @@ const TPL = `
         font-size: 120%;
         margin-right: 6px;
     }
-
-    body.mobile .global-menu .dropdown-submenu .dropdown-menu {
-        display: block;
-        font-size: 90%;
-        position: relative;
-        left: 0;
-        top: 5px;
-        --dropdown-shadow-opacity: 0;
-        --submenu-opening-delay: 0;
-    }
     </style>
 
     <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
@@ -344,6 +334,15 @@ export default class GlobalMenuWidget extends BasicWidget {
 
             this.dropdown.toggle();
         });
+        if (utils.isMobile()) {
+            this.$widget.on("click", ".dropdown-submenu .dropdown-toggle", (e) => {
+                const $submenu = $(e.target).closest(".dropdown-item");
+                $submenu.toggleClass("submenu-open");
+                $submenu.find("ul.dropdown-menu").toggleClass("show");
+                e.stopPropagation();
+                return;
+            });
+        }
         this.$widget.on("click", ".dropdown-submenu", (e) => {
             if ($(e.target).children(".dropdown-menu").length === 1 || $(e.target).hasClass("dropdown-toggle")) {
                 e.stopPropagation();
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index ebeb4031e..d39f70b1d 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -357,8 +357,8 @@ body.desktop .dropdown-menu {
     visibility: hidden;
 }
 
-.dropdown-menu:not(#context-menu-container) .dropdown-item,
-#context-menu-container .dropdown-item > span {
+body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
+body.desktop #context-menu-container .dropdown-item > span {
     display: flex;
     align-items: center;
 }
@@ -1302,7 +1302,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     background-color: var(--left-pane-background-color);
 }
 
-body.mobile #launcher-pane .dropdown-menu.show {
+body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show {
     position: fixed !important;
     bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
     top: unset !important;
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index 596f972c9..8811a1d0f 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1020,10 +1020,6 @@ body.mobile .dropdown-item:not(:last-of-type) {
     margin-bottom: 0.5em;
 }
 
-body.mobile #launcher-pane .dropdown-submenu > .dropdown-toggle {
-    display: none;
-}
-
 body.mobile .dropdown-submenu:hover {
     background: transparent !important;
 }