Currently I’ve added a sidebar into my Syncfusion Blazor project and this sidebar has a sidebar item that expands the menu to more width or resize it to smaller, however this design is not something what I want. What I got is this:

Sidebar opened:

Sidebar Closed:

Now the issue is the sidebar item "< Menu", clicking on this item will open the full width or sidebar or close it(if was opened). What I’m trying to reach is something like this:

The image above represents one sidebar item, same as "< Menu>. I’m trying to transform the "< Menu" sidebar item to something like this, does anyone know how to achieve this?

Sidebar code:

   <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="SidebarPosition.Left" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">         <ChildContent>             <div class="dock">                 <ul>                     <li class="sidebar-item" id="toggle" @onclick="@Toggle">                         <NavLink class="nav-link" href="">                             <span class="e-icons expand"></span>                             <span class="e-text" title="home">Menu</span>                         </NavLink>                     </li>                     <li class="sidebar-item">                         <NavLink class="nav-link" href="page1" Match="NavLinkMatch.All">                             <span class="oi oi-dashboard" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="home">Page 1</span>                         </NavLink>                     </li>                     <li class="sidebar-item">                         <NavLink class="nav-link" href="page2" Match="NavLinkMatch.All">                             <span class="oi oi-graph" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="profile">Page 2</span>                         </NavLink>                     </li>                     <li class="sidebar-item">                         <NavLink class="nav-link" @onclick="()=>expandShipDetailsSubNav = !expandShipDetailsSubNav">                             <span class="oi oi-eye" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="info">Page 3</span>                         </NavLink>                         @if (expandShipDetailsSubNav)                         {                             <NavLink class="nav-link" href="/page3/1" Match="NavLinkMatch.All">                                 Vessel 1                             </NavLink>                             <NavLink class="nav-link" href="/page3/2" Match="NavLinkMatch.Prefix">                                 Vessel 2                             </NavLink>                             <NavLink class="nav-link" href="/page3/3" Match="NavLinkMatch.Prefix">                                 Vessel 3                             </NavLink>                             <NavLink class="nav-link" href="/page3/4" Match="NavLinkMatch.Prefix">                                 Vessel 4                             </NavLink>                             <NavLink class="nav-link" href="/page3/5" Match="NavLinkMatch.Prefix">                                 Vessel 5                             </NavLink>                          }                     </li>                     <li class="sidebar-item">                         <NavLink class="nav-link" @onclick="()=>expandReportingSubNav = !expandReportingSubNav">                             <span class="oi oi-file" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="info">Page 4</span>                         </NavLink>                         @if (expandReportingSubNav)                         {                             <NavLink class="nav-link" href="/page4/1" Match="NavLinkMatch.All">                                 EU MRV                             </NavLink>                             <NavLink class="nav-link" href="/page4/2" Match="NavLinkMatch.Prefix">                                 IMO DCS                             </NavLink>                         }                     </li>                     <li class="sidebar-item">                         <NavLink class="nav-link" href="page 5" Match="NavLinkMatch.All">                             <span class="oi oi-cog" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="home">Page 5</span>                         </NavLink>                     </li>                     <li class="sidebar-item" id="li6">                         <NavLink class="nav-link" href="" @onclick="@OnBtnClick">                             <span class="oi oi-power-standby" style="font-size: 30px; margin-right: 15px;"></span>                             <span class="e-text" title="home">Sign Out</span>                         </NavLink>                     </li>                 </ul>             </div>         </ChildContent>     </SfSidebar> 

CSS:

<style> .title {     text-align: center;     font-size: 20px;     padding: 15px; }  .sub-title {     text-align: center;     font-size: 16px;     padding: 10px; }  #wrapper .sub-title .column {     display: inline-block;     padding: 10px; } /* custom code start */ .center {     text-align: center;     display: none;     font-size: 13px;     font-weight: 400;     margin-top: 20px; }  .sb-content-tab .center {     display: block; } /* custom code end */ /* end of content area styles */ /* Sidebar styles */ .dockSidebar.e-sidebar.e-right.e-close {     visibility: visible;     transform: translateX(0%); }  .dockSidebar .e-icons::before {     font-size: 25px; } /* dockbar icon Style */ .dockSidebar .home::before {     content: '\e102'; }  .dockSidebar .profile::before {     content: '\e10c'; }  .dockSidebar .info::before {     content: '\e11b'; }  .dockSidebar .settings::before {     content: '\e10b'; }  .e-sidebar .expand::before, .e-sidebar.e-right.e-open .expand::before {     content: '\e10f'; }  .e-sidebar.e-open .expand::before, .e-sidebar.e-right .expand::before {     content: '\e10e'; } /* end of dockbar icon Style */ .dockSidebar.e-close .sidebar-item {     /*padding: 5px 20px;*/ }  .dockSidebar.e-dock.e-close span.e-text {     display: none; }  .dockSidebar.e-dock.e-open span.e-text {     display: inline-block; }  .dockSidebar li {     list-style-type: none;     cursor: pointer; }  .dockSidebar ul {     padding: 0px; }  .dockSidebar.e-sidebar ul li:hover span {     /*color: white;*/ }  .dockSidebar span.e-icons {     color: #c0c2c5;     line-height: 2 }  .e-open .e-icons {     margin-right: 16px; }  .e-open .e-text {     overflow: hidden;     text-overflow: ellipsis;     line-height: 23px;     font-size: 15px; }  .sidebar-item {     text-align: center;     border-bottom: 1px #e5e5e58a solid; }  .e-sidebar.e-open .sidebar-item {     text-align: left;     /*padding-left: 15px;*/     color: #c0c2c5; }  .dockSidebar.e-sidebar {     background: #2d323e;     overflow: hidden; } /* custom generated icons styles */ @@font-face {     font-family: 'e-icons';     src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');     font-weight: normal;     font-style: normal; } /* end of custom generated icons styles */ /* custom code start */ .sf-new .sb-header, .sf-new .sb-bread-crumb, .sf-new #action-description, .sf-new .sb-action-description, .sf-new .e-tab-header, .sf-new .description-section, .sf-new #description-section, .sf-new #description, .sf-new #navigation-btn, .sf-new .sb-toolbar-splitter, .sf-new .sb-footer, .sf-new #left-sidebar, .sb-component-name {     display: none }  .sf-new .sb-right-pane.e-view {     margin-left: 0px !important; }  .sb-action-description.sb-rightpane-padding {     padding-bottom: 0; }  .description-section {     padding-top: 0; }  #sb-content-header {     display: none }  #content-tab.sb-content-tab {     height: 100% !important; }  .sf-new .container-fluid, .sf-new .container-fluid .control-section, #sidebar-section, description-section sb-rightpane-padding {     padding: 0; }  .sb-component-name.sb-rightpane-padding {     margin-top: -56px; }  .sb-right-pane.e-view {     left: 0;     padding-left: 0;     padding-right: 0;     top: 0;     overflow-y: hidden; }  .sb-desktop-wrapper {     height: 100%; }  .sb-component-name h1 {     padding-top: 0; }  .sf-new .sb-content.e-view {     top: 0; } /* end of newTab support */ /* custom code end */ /* end of sidebar styles */  /* Custom css*/  .sidebar-item {     color: #BBBBBB !important; }  a {     color: #BBBBBB !important; }   .sidebar-item:hover {     color: white !important; }  a:hover {     color: white !important; }  /* Custom button */ .e-custom {     border-radius: 15px;     height: 30px;     width: 150px; }      .e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {         background-color: #ff6e40;         color: #fff;     }  #button-control {     width: 100%;     margin: 8% 0;     text-align: center; }  @@media only screen and (max-width: 500px) {     #button-control {         margin-left: -3%;     } }  .button-section {     width: 100%;     margin: auto; }  #button-control .col-xs-12 {     margin: 15px 0; }  @@font-face {     font-family: 'button-icons';     src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1uSf8AAAEoAAAAVmNtYXDOXM6wAAABtAAAAFRnbHlmcV/SKgAAAiQAAAJAaGVhZBNt0QcAAADQAAAANmhoZWEIUQQOAAAArAAAACRobXR4NAAAAAAAAYAAAAA0bG9jYQNWA+AAAAIIAAAAHG1heHABGQAZAAABCAAAACBuYW1lASvfhQAABGQAAAJhcG9zdFAouWkAAAbIAAAA2AABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAADQABAAAAAQAAYD3WXF8PPPUACwQAAAAAANgtxgsAAAAA2C3GCwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAANAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnDQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAQAAAAAYABAABAALnCOcN//8AAOcB5wr//wAAAAAAAQAGABQAAAABAAMABAAHAAIACgAJAAgABQAGAAsADAAAAAAADgAkAEQAWgByAIoApgDAAOAA+AEMASAAAQAAAAADYQP0AAIAADcJAZ4CxP08DAH0AfQAAAIAAAAAA9QD9AADAAcAACUhESEBIREhAm4BZv6a/b4BZv6aDAPo/BgD6AAAAgAAAAADpwP0AAMADAAANyE1ISUBBwkBJwERI1kDTvyyAYH+4y4BeQGANv7UTAxNlwEIPf6eAWI9/ukDEwAAAAIAAAAAA/QDngADAAcAADchNSETAyEBDAPo/Bj6+gPo/gxipgFy/t0CRwAAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHC/koBtnwBtv5KfAI+fP5KAbZ8AbYAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHh/isB1T4B1f4rPgIfPv4rAdU+AdUAAgAAAAAD9AOlAAMADAAANyE1ISUnBxc3JwcRIwwD6PwYAcWjLO7uLKI/Wj+hoSvs6iyhAm0AAAABAAAAAAP0A/QACwAAAREhFSERMxEhNSERAeH+KwHVPgHV/isD9P4rPv4rAdU+AdUAAAAAAgAAAAADdwP0AAMADAAANyE1ISUBBwkBJwERI4kC7v0SAVj+0SkBdgF4Kf7RPgw+rQEJL/64AUgv/vgC/AAAAAEAAAAAA/QD9AALAAABIRUhETMRITUhESMB2v4yAc5MAc7+MkwCJkz+MgHOTAHOAAIAAAAAA/QDzQADAAcAADchNSE1KQEBDAPo/BgB9AH0/gwzpZUCYAACAAAAAAP0A80AAwAHAAA3ITUhNSkBAQwD6PwYAfQB9P4MM6WVAmAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gYnV0dG9uLWljb25zUmVndWxhcmJ1dHRvbi1pY29uc2J1dHRvbi1pY29uc1ZlcnNpb24gMS4wYnV0dG9uLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4ACm1lZGlhLXBsYXkLbWVkaWEtcGF1c2UQLWRvd25sb2FkLTAyLXdmLQltZWRpYS1lbmQHYWRkLW5ldwtuZXctbWFpbC13ZhB1c2VyLWRvd25sb2FkLXdmDGV4cGFuZC0wMy13Zg5kb3dubG9hZC0wMi13ZgphZGQtbmV3XzAxC21lZGlhLWVqZWN0Dm1lZGlhLWVqZWN0LTAxAAA=) format('truetype');     font-weight: normal;     font-style: normal; }  .e-btn-sb-icons {     font-family: 'button-icons';     line-height: 1;     font-style: normal;     font-weight: normal;     font-variant: normal;     text-transform: none;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale; }  .e-play-icon::before {     content: '\e701'; }  .e-pause-icon::before {     content: '\e705'; }  .e-open-icon::before {     content: '\e70d'; }  .e-add-icon::before {     content: '\e70a'; }