Sidebar menu maintains functionality when collapsed but on expand can menu items become treeview?

[Jacqueline Wright]

I was wondering if it is possible to have the Sidebar menu functionality while collapsed maintains its current functionality (icons displayed then on hover, displays submenu items to the right) but then on selecting icon bars, menu expands, and the menu items display as a treeview (on selecting the menu item, submenus display under menu item)? Like the progression below. 

I have referenced both help pages(https://ej2.syncfusion.com/react/demos/#/bootstrap5/sidebar/sidebar-menu  and https://ej2.syncfusion.com/react/demos/#/bootstrap5/sidebar/responsive-panel  ) for my Developers but they cannot seem to be able to combine the functionalities. They keep getting the collapsed menu with a scroll and other errors. 

Looking for some help either "yes, it can be done" or "no, it cannot be done - rethink your design". 

Thank you.

[Sivakumar ShunmugaSundaram]

Hi Jacqueline,

Greetings from Syncfusion support.

Yes, it is possible to customize our Sidebar component to have different Sidebar content based on the collapse or expand state. You can use the CSS style to hide and show either one of the components within the Sidebar's open and close events. You can use the Sidebar's open event to show the Menu component and the close event to show the TreeView component.

Refer to the below code snippet.

[.js]

 

export class SidebarWithMenu extends SampleBase {

...

      return (

        <div id="menu-wrapper" className="control-section">

          <div id="sidebarmenu">

            {/* header-section  declaration */}

...

            {/* main content declaration */}

            <div className="main-menu-content" id="maintext">

...

            </div>

            {/* end of main content declaration

              sidebar element declaration */}

            <SidebarComponent

              id="menuSidebar"

              className="sidebar-menu"

              ref={(Sidebar) => (this.sidebarobj = Sidebar)}

              enableDock={this.enableDock}

              dockSize={this.dockSize}

              width={this.width}

              target={this.target}

              isOpen={true}

              close={this.close}

              open={this.open}

              type="Auto"

            >

              <div className="main-menu">

                <div>

                  <MenuComponent

                    id="dockMenu"

                    items={this.menuItems}

                    orientation="Vertical"

                    cssClass="my-menu"

                  ></MenuComponent>

                  <TreeViewComponent

                    id="mainTree"

                    cssClass="main-treeview"

                    fields={this.fields}

                    expandOn="Click"

                  />

                </div>

              </div>

            </SidebarComponent>

...

    open(args) {

      document.getElementsByClassName('main-treeview')[0].style.display = 'block';

      document.getElementsByClassName('my-menu')[0].style.display = 'none';

    }

    close(args) {

      document.getElementsByClassName('main-treeview')[0].style.display = 'none';

      document.getElementsByClassName('my-menu')[0].style.display = 'block';

    }

  }

 

[.css]

 

<Style>

.my-menu {

  display: none;

}

</Style>

 

Sample: https://stackblitz.com/edit/react-5dpppx?file=index.js

Check out the shared sample and confirm whether it will achieve your exact requirements. If we misunderstood your exact requirement, share some additional details related to it. This will allow us to fully understand your issue and provide a solution that meets your needs.

[Jacqueline Wright]

Thank you so much for such a quick and comprehensive reply - I really appreciated it!!