How to make the sider Bar resizable interactively?

[nightroman]

The use case includes the left side Bar with a TreeView. A users expands the tree and on selecting items the app navigates to the item pages rendered in the main area. I'd say the case is a standard UI pattern and it works almost well. Almost, because on expanding tree items the fixed bar width (default or custom larger) may become not comfortable. A user naturally wants to resize the sider to make it wider (and thinner, too).

Is there anything built-in for resizing the side bar interactively? If not, any suggestions on dealing with this?

[stsrki]

Not sure what you mean exactly. You could control the Bar width with the theme option. eg.

private Theme theme = new Theme
{
    BarOptions = new ThemeBarOptions
    {
        HorizontalHeight = "64px",
        VerticalWidth = "300px",
    },
};

Also, I never thought of combining TreeView with the Bar. I guess some CSS would be required to make it work properly.

[nightroman]

Yes, I use VerticalWidth to make it wider. But it's still just a fixed width. Depending on the current tree expanded state a user may want to make it wider or thinner. Some interactive splitter separating the sider might help but Blazorise does not have it.

Also, I never thought of combining TreeView with the Bar. I guess some CSS would be required to make it work properly.

It works well as is. Long item text wraps and this is fine. The missing bit is ability to "drag" the edge of the sidebar to resize it.

[stsrki]

Well, some time ago I started working on a Splitter component (#1366) but I wasn't very satisfied with the result so I abandoned it.

[nightroman]

I guess some CSS would be required to make it work properly.

I am not an expert, sorry. Is it possible to make a control interactively resizable by CSS? Any hint? I would try.
I really like the TreeView on the left + stuff on the right UI approach. But the fixed left side width is pain.
(NB custom width is still "fixed")

[stsrki]

I don't think it is possible with CSS only. It can be done with some JS. You can define a DIV element next to a Bar and make it a like splitter. Then with mouse down/move/up make it work. I bet there are tons of examples online. You can also look at the PR I mentioned.

[nightroman]

Thank you, it looks like an advice I was looking for. I am totally noob in this area. That is why I like Blazorise, I mostly do not have to think of many tedious things like this.

[nightroman]

Poor man resizing is done with a slider showed/hidden by a command, lame but this does the trick for now.

[nightroman]

I really hope that the interactively resided sider option will be built-in one day.

[stsrki]

Well, if it works I guess it is fine 😄

You can open a new issue and I can try to make it for one of the next versions.

[nightroman]

@stsrki Thank you, done: #2423