Hide ribbon on sidebar collapse?

Custom CSS & Theme Design
1

I’d like the ribbon to auto-collapse (become hidden) when I collapse the left sidebar, for a super compact look without resorting to pop-up windows.

I found this old snippet that matches the description but it doesn’t seem to change anything when I enable it :confused:

/*
author: matekusu
source: https://discord.com/channels/686053708261228577/702656734631821413/1147232919946022943
*/

/* Immersive Ribbon Menu */
.workspace-ribbon.mod-left {
  background-color: transparent; /*c myn: hides weird flashing in default theme when opening */
  transition: all 0.2s ease-in-out;
  &::before {
    border-bottom-color: transparent;
    transition: all 0.2s ease-in-out;
  }
  &.is-collapsed {
    border-right-color: transparent;
    transition: all 0.2s ease-in-out;
    &::before {
      border-bottom-color: var(--tab-outline-color);
      transition: all 0.2s ease-in-out;
    }
    &:hover > :nth-child(n + 2) {
      opacity: 1;
      transition: all 0.2s ease-in-out;
    }
    &:not(:hover) > :nth-child(n + 2) {
      opacity: 0;
      transition: all 0.2s ease-in-out;
    }
  }
}

/* Immersive Sidebar Collapse */
.workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) {
  &.is-sidedock-collapsed {
    .workspace-tabs .workspace-tab-header-container,
    .workspace-tabs .workspace-tab-container,
    .workspace-tabs .workspace-leaf-resize-handle,
    .workspace-tabs.mod-top .workspace-tab-header-inner {
      opacity: 0;
      transition: all 0.2s ease-in-out;
    }
    .workspace-tabs.mod-top .workspace-tab-header-container {
      opacity: 1;
    }
  }
}

Any help appreciated!

2

It must be close. Maybe some element tags changed. It actually does make a subtle difference.

When I don’t have the snippet, the ribbon background fades between matching the color of my sidebar vs. the background of my notes, when toggling.

When I activate this snippet, that no longer occurs. But something is fading in and out, and you can make it more apparent by increasing the 0.2s easing to 1.0 or something.

ribbonTransition

1 Like
3

If I change both instances of the “nth-child” lines to n+1, like this:

&:hover > :nth-child(n + 2) {

to

&:hover > :nth-child(n + 1) {

Then the fading out works, and the ribbon disappears. And if you hover over it, it eases back in.

The width of the ribbon doesn’t change. I tried putting in a width: 0px; in a couple different places, but it’s quite glitchy, and not quite right yet. But if you want to keep the hover-return, maybe you don’t want the width animating.

ribbonTransition2

1 Like
4

Managed to hide the ribbon on sidebar collapse with:

body:has(.mod-left-split.is-sidedock-collapsed) .workspace-ribbon.mod-left {
  display: none;
}

The Expand/collapse sidebar button moves under the system’s Maximize button with this, even though both buttons remain functional with this. The issue is purely cosmetic:
image

A possible workaround is to hide the left sidebar button completely and rely on hotkeys to expand/collapse it. But that’d be a very roundabout way to achieve what you can already do with the “Toggle ribbon” command–which is what I think I’ll do. Cmd + R is vacant anyway…

1 Like
5

The gorgeous Border Theme has a ribbon auto-hide option in its Style Settings. Maybe someone would be willing to dig around in its code and extract the code needed for that feature, and make it compatible with other themes…