Mobile Toolbar via Hamburger Menu

Tricks & Techniques
1

My first post. Coming from Obsidian then Logseq. Loving silverbullet and the ease of customisation. I wanted to get a mobile toolbar up and running and found I could implement one easily by making a space-style tweaks and secondly by adding action buttons in the CONFIG page. My changes are shown below.

1. STYLE Here are the style changes (I keep them in “Library/adxsoft/Global Style” page) which change the button heights in the hamburger menu for mobile. That way I’ve got way more buttons. Note I also colorise headings and the hamburger menu. The key thing is to change the height as indicated. On my Samsung phone 1.4 rem worked well.

```space-style
html {
  --editor-width: 60%;
}

/* ===== Mobile settings ===== */
@media (max-width: 600px) {
  html {
    --editor-width: 100%;
  }

  /* hamburger menu smaller buttons on mobile */
  #sb-top .sb-actions.hamburger button:not(.sb-code-copy-button) {
          height: 1.4rem; /* !!!!! adjust height to suit your mobile !!!!!!! */
          margin: 4px 0;
          padding: 4px 0;
  }
}

    
/* hamburger menu  colors */
#sb-root .sb-actions button {
  color: #c39952e6;
}

/* heading colors */
#sb-main .cm-editor .sb-line-h1 {
  color: #c39952e6;
}

#sb-main .cm-editor .sb-line-h2 {
  color: #ff6666;
}

#sb-main .cm-editor .sb-line-h3 {
  color: #66ccff;
}

#sb-main .cm-editor .sb-line-h4 {
  color: #99cc66;
}

#sb-main .cm-editor .sb-line-h5 {
  color: #cc99ff;
}

#sb-main .cm-editor .sb-line-h6 {
    color: #ec7385;
  }

/* change backticked and plain triple back tick code block colors */
#sb-editor .sb-code {
    background: #444444 !important;
    color: #8cbdf4;
    text-decoration: none !important;
  }
```

2. CONFIG I’ve added action buttons to assist with mobile not having keyboard shortcuts. Note I’m not sure why the Index, open page and run command buttons don’t appear as the first 3 buttons. However this works well for me

```space-lua
-- Add your plugs here (https://silverbullet.md/Plugs)
      -- Then run the `Plugs: Update` command to update them
config.set(
"plugs", {
  "ghr:MrMugame/silversearch",
  "github:joekrill/silverbullet-treeview/treeview.plug.js"
})

actionButton.define {
  icon = "sidebar",
  description = "Toggle Tree View",
  run = function()
    editor.invokeCommand("Tree View: Toggle")
  end
}

actionButton.define {
  icon = "inbox",
  description = "Quick Note",
  run = function()
           editor.invokeCommand("Quick Note")
           end,
  mobile =true
}

actionButton.define {
  icon = "bold",
  description = "Bold",
  run = function()
           editor.invokeCommand("Bold")
           end,
  mobile =true
}

actionButton.define {
  icon = "italic",
  description = "Italic",
  run = function()
           editor.invokeCommand("Italic")
           end,
  mobile =true
}

actionButton.define {
  icon = "delete",
  description = "Delete",
  run = function()
           editor.invokeCommand("Page: Delete")
           end,
}

actionButton.define {
  icon = "rotate-ccw",
  description = "Undo",
  run = function()
           editor.invokeCommand("Editor: Undo")
           end,
}

actionButton.define {
  icon = "rotate-cw",
  description = "Redo",
  run = function()
           editor.invokeCommand("Editor: Redo")
           end,
}

actionButton.define {
  icon = "arrow-right",
  description = "Indent",
  run = function()
           editor.invokeCommand("Outline: Move Right")
           end,
  mobile =true
}

actionButton.define {
  icon = "arrow-left",
  description = "Indent",
  run = function()
           editor.invokeCommand("Outline: Move Left")
           end,
  mobile =true
}

actionButton.define {
  icon = "arrow-up",
  description = "Move Line Up",
  mobile = true,
  run = function()
    editor.moveLineUp()
  end
}
actionButton.define {
  icon = "arrow-down",
  description = "Move Line Down",
  mobile = true,
  run = function()
    editor.moveLineDown()
  end
}

actionButton.define {
  icon = "search",
  description = "Search Area",
  run = function()
    silversearch.openSearch("path:AREA/")
  end
}
actionButton.define {
  icon = "globe",
  description = "Search Global",
  run = function()
    silversearch.openSearch("")
  end
}
```

PS. If anyone has the standard docker running in a synology NAS I would appreciate their synology modifications to handle passing htrough http requests.

Cheers

2 Likes