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…

6

may be a bit the late but I did dig around the border theme’s code and made this snippet where you can activate the ribbon auto-hide in style settings.
I’m not really good at css and don’t participate in these forums but I was also looking for this a while back and decided to try and find a solution myself, sorry if the need for style settings is a hassle this was the best I could do. hope it helps you.

1 Like
7

The Minimal theme, too, offers an option to auto-hide the ribbon via Style Settings. Though it’s independent of whether the sidebar is collapsed or not.