Drawer - Adopt width according to the width of the menu component

Thank you for the modified project.
I investigated it and found that you changed the ".side-navigation-menu" style in the "side-navigation-menu.scss" file:

Code
.side-navigation-menu {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  width: auto !important;

This was the initial "250px" value:

Code
width: 250px !important;

The 'auto' value means that the width of the 'side-navigation-menu' element is equal to the width of its parent element. In Drawer, the Panel element is the parent of the 'side-navigation-menu' element and Drawer uses the 'side-navigation-menu' element width to calculate the Panel width for the 'opened' state.
I see in your configuration that the calculated Panel width in the 'opened' state is equal to the calculated Panel width in the 'closed' state. Thus, the Panel width is not changed when you click the 'toggleMenu' button.
The 'auto' value is incorrect in this case and an explicit width should be specified. This is a specificity of our component and we will see how to manage this case better.
See also Drawer.maxSize.

Hi
After I set auto to 250px, the width cannot automatically adapt to the width of the TreeView text.

Because I may use the API to download TreeView content of unknown character length, this feature is very important.

Thank you for the reply, CMCIT. Dan is not online today, so I'll be happy to assist you further. I've looked through the thread and see that the main task is to adjust the Drawer side panel's size to the content width without a fixed length.

I checked the example and found that the issue occurs because dxDrawer calculates the panel width by the child element width only on the first load. It doesn't recalculate the size of the menu after the screen size is changed or a menu item is expanded. That's why the auto setting doesn't have the desired effect in this scenario.

Unfortunately, the current dxDrawer implementation was designed to cover the fixed width only and doesn't allow us to overcome this behavior without rewriting all current styling structure/internal calculation logic from scratch. We'll consider this scenario as a possible future improvement once we decide to update the dxDrawer implementation.

As an immediate workaround, consider one of the following options:

• display ellipsis for items with long text and implement tooltips
• wrap item text into multiple lines

This way, you can keep the dxDrawer menu width fixed and make sure that users will be able to read long texts in dxTreeView items.

Thanks,
Artem