Skip to content

Latest commit

 

History

History
52 lines (46 loc) · 1.31 KB

CollapsibleActionMenu.md

File metadata and controls

52 lines (46 loc) · 1.31 KB

This will make the ActionMenu collapsible for Mobile Devices

/*Mobile Collabsible Menu*/
@media only screen and (max-width: 600px) {
  #sb-top .sb-actions {
    position: fixed;
    border-radius: 5px;
    border: 1px solid #444 ;
    top: 12px;
    right: 20px;
    width: 2.4rem;  /* Collapsed width */
    background: rgba(var(--root-background-color),0));
    backdrop-filter: blur(15px); /* tinted glass-like blur for the background */
    overflow: hidden;  /* Hide overflowing content */
    flex-direction: column; 
    align-items: center;
    z-index: 10; /* Ensure the buttons stay on top */
  }
  /* Button styling */
  .sb-actions button:not(.sb-code-copy-button) {
    display: block;
    height: 1.4rem; /* 1.4 */
    text-align: center;
    margin: 4px 0;
    padding: 0 0;
  }

  /* Hide all buttons except the last one */
  .sb-actions a:not(:first-of-type) {
    display: none;   
  }
  /* Show all buttons when hovering */
  #sb-top .sb-actions:hover a {
     display: block;
  }
}

For this to work properly you also need to add an empty action button as the first action button. I also recommend hiding the Sync and Edit buttons in the space-config:

hideSyncButton: true
hideEditButton: true

actionButtons:
- icon: more-vertical
  command: "{[]}"
  description: Open Tool Menu