Is there a vertical sidebar (a side "EdgeToolbar") out-of-the-box? Or only glued to the top?

[Offlein]

New to the project, but in the code for the EdgeToolbar class, there appears to be stuff for handling resizing and "dragging". As well as properties representing a "sidebar".

This made me think that, out-of-the-box, the EdgeToolbar is draggable to any other side of the container, but that does not seem to be true. Perhaps that's simply referring to the components that pop out from the bottom of the screen and, hence, "sidebar" is maybe just a slightly confusing name?

I had been thinking at first to extend the EdgeToolbar class with one that is built from the side, which is where I saw the "sidebar" and "draggable" verbiage and got confused. (Also: EdgeToolbar does not appear to be exposed outside the library. I can extend AbstractToolbar but not EdgeToolbar.)

Then I started thinking that maybe it's purely a style question, and I can achieve an actual left or right sidebar with CSS. Not sure if that would have any additional complications.

[personalizedrefrigerator]

As well as properties representing a "sidebar".

The name "sidebar" references the popup menu. Originally, it was planned for EdgeToolbar to display the menu on the left side of the screen on desktop devices. For example,

In this case, the menu would have been a sidebar rather than a popup menu.

there appears to be stuff for handling resizing and "dragging".

The resize/drag logic is for resizing/vertically dragging the menu:

Then I started thinking that maybe it's purely a style question, and I can achieve an actual left or right sidebar with CSS. Not sure if that would have any additional complications.

It is possible to move the toolbar to the right/left edge of the screen with CSS, but this approach isn't guaranteed to be stable across editor versions (and may cause issues with certain screen sizes).

I'm attaching one possible style sheet:

CSS

.js-draw.imageEditorContainer { /* The editor */
	/* Makes absolutely positioned content relative to the editor's outer container. */
	position: relative;

	> .toolbar-root {
		width: var(--toolbar-button-size);
		/* Show the toolbar on the left side of the screen */
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		/* Display both sections vertically */
		flex-direction: column;
		/* Display the content of each section vertically */
		> div {
			flex-direction: column;
		}
	}

	.toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row {
		/* Scroll when low on space. */
		overflow-y: auto;
		overflow-x: hidden;
	}
}

/* Always hide the save/close labels.
    WARNING: This also disables the tooltips. */
.toolbar-toolButtonContainer {
	flex-direction: column;
	&.label-inline > .toolbar-button > label {
		display: none;
	}
	&.label-inline > .toolbar-button > .toolbar-icon {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

Update: Bugs I've noticed with the above CSS:

1. Tooltips are clipped by the edge of the toolbar.
2. There are no tooltips for the "save"/"exit" buttons

[Offlein]

Hello. This is wonderful and perfectly clears everything up. Thank you so much for the help.