Add support for opting out action buttons from the drop down on mobile

+ by default making the page picker opt out

Author: zefhemel

client/components/top_bar.tsx

@@ -9,6 +9,7 @@ export type ActionButton = {
   callback: () => void;
   href?: string;
   mobile?: boolean;
+  dropdown?: boolean;
 };
 
 function pageNameClass(
@@ -221,10 +222,23 @@ export function TopBar({
               percentage={progressPercentage}
               type={progressType}
             />
-            <ActionButtons
-              buttons={actionButtons}
-              mobileMenuStyle={mobileMenuStyle}
-            />
+            {mobileMenuStyle
+              ? (
+                <>
+                  <ActionButtons
+                    buttons={actionButtons.filter((b) =>
+                      b.dropdown === false
+                    )}
+                  />
+                  <ActionButtons
+                    buttons={actionButtons.filter((b) =>
+                      b.dropdown !== false
+                    )}
+                    mobileMenuStyle={mobileMenuStyle}
+                  />
+                </>
+              )
+              : <ActionButtons buttons={actionButtons} />}
           </div>
         </div>
       </div>

client/editor_ui.tsx

@@ -489,6 +489,7 @@ export class MainUI {
                 return {
                   icon: mdiIcon ? mdiIcon : featherIcon,
                   description: button.description || "",
+                  dropdown: button.dropdown,
                   callback:
                     button.run ||
                     (() => {
@@ -523,10 +524,12 @@ export class MainUI {
           cssClass={(client.currentPageMeta()?.pageDecoration?.cssClasses ?? [])
             .join(" ")
             .replaceAll(/[^a-zA-Z0-9-_ ]/g, "")}
-          mobileMenuStyle={client.config.get<string>(
-            "mobileMenuStyle",
-            "hamburger",
-          )}
+          mobileMenuStyle={viewState.isMobile
+            ? client.config.get<string>(
+              "mobileMenuStyle",
+              "hamburger",
+            )
+            : undefined}
           readOnly={
             viewState.uiOptions.forcedROMode || client.bootConfig.readOnly
           }
@@ -616,6 +619,7 @@ type ActionButton = {
   icon: string;
   description?: string;
   mobile?: boolean;
+  dropdown?: boolean;
   priority?: number;
   run: () => void;
 };

client/styles/top.scss

@@ -132,15 +132,7 @@
     position: relative;
   }
 
-  #sb-top .sb-sync-progress:has(~ .hamburger) {
-    margin-right: 1.8em;
-  }
-
   #sb-top .sb-actions.hamburger {
-    position: absolute;
-
-    top: 3px;
-    right: 20px;
     border-radius: 5px;
     border: 1px solid #444;
     width: 2.8rem;

libraries/Library/Std/APIs/Action Button.md

@@ -14,6 +14,7 @@ Keys to define:
 * `description` (optional): description of button (appears on hover)
 * `priority` (optional): determines priority of button (the higher, the earlier in the list)
 * `mobile`: when set to `true` this button will only appear on mobile devices
+* `dropdown` (optional): when set to `false`, the button stays visible outside the dropdown menu on mobile (default: `true`)
 
 # Example
 ```lua

libraries/Library/Std/Config.md

@@ -363,6 +363,10 @@ config.define("actionButtons", {
         type = "boolean",
         description = "Optional boolean indicating if the action button is applicable for mobile"
       },
+      dropdown = {
+        type = "boolean",
+        description = "Optional: set to false to keep this button outside the dropdown menu on mobile (default: true)"
+      },
       run = schema.func(),
     },
     required = {"icon", "run"},
@@ -397,6 +401,7 @@ config.set {
       icon = "book",
       description = "Open page",
       priority = 2,
+      dropdown = false,
       run = function()
         editor.invokeCommand "Navigate: Page Picker"
       end

website/CONFIG.md

@@ -42,6 +42,7 @@ config.set {
     {
       icon = "book",
       description = "Open page",
+      dropdown = false,
       run = function()
         editor.invokeCommand("Navigate: Page Picker")
       end