Panels: have the option to have the full name

[jgournet]

Description

Coming from Tree Tabs, their panels are with full names. Would it be possible to have the option to do the same in sidebery ?

[mbnuqw]

I'll consider adding this option for the vertical navigation bar in v5. For now, you can use this custom CSS (Sidebery settings > Styles editor) (for v4):

#root {
  --nav-btn-width: 24px;
  --nav-btn-height: 24px;
}

.NavigationBar .panel-btn {
  display: flex;
  flex-direction: column-reverse;
  padding: 8px 0;
  height: auto;
}

.NavigationBar .panel-btn[data-type="add"] {
  height: var(--nav-btn-height);
}

.NavigationBar .panel-btn[data-type="tabs"] svg,
.NavigationBar .panel-btn[data-type="default"] svg,
.NavigationBar .panel-btn[data-type="bookmarks"] svg,
.NavigationBar .panel-btn img,
.NavigationBar .panel-btn .update-badge,
.NavigationBar .panel-btn .ok-badge,
.NavigationBar .panel-btn .err-badge,
.NavigationBar .panel-btn .progress-spinner {
  display: none;
}

.NavigationBar .panel-btn .progress-spinner {
  display: none;
}

.NavigationBar .panel-btn .len {
  position: relative;
  font-size: 12px;
  writing-mode: sideways-lr;
  text-orientation: mixed;
  background-color: transparent;
  padding: 0;
  top: 0;
  right: 0;
  opacity: .7;
}

.NavigationBar .panel-btn .name {
  position: relative;
  display: block;
  padding: 6px 0 0;
  font-size: 14px;
  color: var(--container-fg, var(--nav-btn-fg));
  writing-mode: sideways-lr;
  text-orientation: mixed;
}

[jgournet]

Thanks, that css works great !! (and thank you for adding that in v5 too)

[daagar]

Is there any custom CSS that makes this work in v5 as well until it is added as a native option?

EDIT: Strike that! Switching to v4 works just fine.

[jgournet]

@mbnuqw : Would you have the equivalent CSS for v5 please ? (now that it got auto upgraded) ( I see you added the option to have the text written within the icon ... but that's sadly way too small for my eyes+screen :) )

[kn666]

vertical with horiz. text for v5:

root {

--navbar-width: 50px;
--len-font: 9px;
--name-font: 12px;

} .NavigationBar .nav-item { display: flex; flex-direction: column; align-items: center; padding: 5px 0px; height: auto; width: var(--navbar-width); overflow: hidden; } .NavigationBar .nav-item .len { font-size: var(--len-font); background-color: transparent; top: 1px; left: 1px; } .NavigationBar .nav-item .name-box { display: flex; justify-content: center; width: 100%; max-width: var(--navbar-width);
} .NavigationBar .nav-item .name { font-size: var(--name-font); } .NavigationBar .nav-item[title^="Bookmarks"] .len, .NavigationBar .nav-item[title^="Bookmarks"] .name-box, .NavigationBar .nav-item[title^="Settings"] .name-box, .NavigationBar .nav-item[title^="History"] .name-box, .NavigationBar .nav-item[title^="Tabs"] .name-box, .NavigationBar .nav-item[title^="Search"] .name-box { display: none; }