I have the following requests:
- Allow the sidebar to be wider
-
Next to the current behaviour (neighbouring the #appcontent) implement a fully floating sidebar and a hybrid sidebar which I explain herafter
Hybrid sidebar:
The sidebar has a default width until which it behaves as a neighbour to the page content (like it is behaving today). If the sidebar gets extended and exceeds its default width, it appears above/floats the page content. If its shrinked below its default width, the page content takes up the available space (also the present behavior).
I also created a userChrome.css for the hybrid sidebar (see below)
#browser {
--sidebar-width: calc(var(--sidebar-default-width) + min(0px, var(--adder))) !important;
--sidebar-default-width: 300px !important;
--adder: 0px !important;
--sidebar-min-width: 100px !important;
position: relative !important;
display: grid !important;
grid-template-columns: clamp(var(--sidebar-min-width), var(--sidebar-width), 100dvw) 1fr !important;
}
#sidebar-box {
left: 0 !important;
top: 86px !important;
bottom: 0 !important;
min-height: unset !important;
z-index: 2 !important;
max-height: calc(100dvh - 86px);
min-width: var(--sidebar-min-width) !important;
max-width: unset !important;
width: calc(var(--sidebar-width) + max(0px, var(--adder))) !important;
order: 1 !important;
}
splitter {
top: 0 !important;
bottom: 0 !important;
left: max(var(--sidebar-min-width), calc(var(--sidebar-default-width) + min(0px, var(--adder)))) !important;
height: 100dvh !important;
display: flex !important;
order: 3 !important;
}
#appcontent {
height: 100dvh !important;
max-height: unset !important;
min-height: 100dvh !important;
order: 2 !important;
}
By dragging the 'splitter'-handle the '--adder'-variable gets adjusted. CSS takes care of the rest.
Instead of implementing it via grid and grid-template-columns one could of course choose to adjust the widths of the '#appcontent' and 'sidebar-box'
|
Sidebar default
|
Sidebar shrinked
|
Sidebar extended
|
