Αutohide sidebars

Feedback Feature Requests
1

Hello, I would like to have my sidebar to auto hide, like Anytype or Notion.

2

Hellooo. Any suggestions ??
I would like to have the sidebar show up automatically when I put the cursor on the side.

3
  • Don’t post the same thing multiple times.
  • Feature requests are not questions, they are suggestions.
  • What you want is possible with custom CSS.
    • For the left sidebar:
      #main-container.is-left-sidebar-open #left-sidebar {
  left: calc((var(--ls-left-sidebar-width) * -1) + 3px);
}
#main-container.is-left-sidebar-open:has(.left-sidebar-inner:hover) #left-sidebar ,
#main-container.is-left-sidebar-open:has(.left-sidebar-resizer:hover) #left-sidebar
{
  left: 0px;
}

#main-container.is-left-sidebar-open {
  padding-left: 0px;
}
      • If you prefer to push the main content instead of covering it, add also these lines:
        #main-container.is-left-sidebar-open:has(.left-sidebar-inner:hover) ,
#main-container.is-left-sidebar-open:has(.left-sidebar-resizer:hover) {
  padding-left: var(--ls-left-sidebar-width);
}
      • For simple entry animation, under line left: 0px; add the following lines:
          transition: left 1s;
  @starting-style {
    left: calc((var(--ls-left-sidebar-width) * -1) + 3px);
  }
    • For the right sidebar, read lower.
2 Likes
4

Thank you so much thats exactly what i want. :ok_hand:

  • One last question, can i add an animation when the side bar shows up ?
5

So not exactly. I have updated my answer with a simple animation.

6

Thank you so much :rose:this is awesome

7

2 questions

  1. How can I tweak your code to make it work for right sidebar?
    I replace all “left” words into “right” and it didn’t work, obviously. :stuck_out_tongue_winking_eye:

  2. How can I make normal toggle right sidebar into covering mode?
    (rather than default push mode)

8
  • Right sidebar has a different implementation.
  • Try this:
    #right-sidebar {
  width: 3px !important;
}
#right-sidebar.open:hover {
  width: unset !important;
}
    • You may prefer some percentage, e.g.:
        width: 40% !important;
    • If you prefer covering the main content instead of pushing it, add also these lines:
        position: fixed;
  right: 0px;
  top: 48px;
1 Like
9

Thank you for your help.

A small issue. Buttons on the top right became overlapped.
image

Only minimize, maximize and close window can be clicked.

10

Either:

  • Enable the Native title bar in Settings.
  • Add this rule:
    main.ls-right-sidebar-open div.r.flex.drag-region {
  position: relative;
  right: 144px;
}
1 Like
11

Thank you. It works perfectly.