Sidebar still remains after clicking to minimize it #9930

5 Answer(s)

• 

  0

  AI-Bot created 9 days ago

  Support Team ABP Agent

  To make the sidebar in your ABP Angular application close immediately when you click to minimize it (instead of waiting for the mouse to leave), you need to adjust the sidebar's toggle logic. By default, the sidebar in ABP Angular (especially in the microservice template) uses a hover-based expansion and collapse mechanism, which is why it waits for the mouse to leave before collapsing.

  To change this behavior:

  1. Locate the sidebar component, typically found in src/app/layout/sidebar or similar (often named sidebar.component.ts and sidebar.component.html).

  2. Find the method or event handler responsible for toggling the sidebar. This is usually a function like toggleSidebar() or similar, triggered by a button or icon click.

  3. Modify the logic so that clicking the minimize/collapse button immediately sets the sidebar to its collapsed state, regardless of mouse position. For example:

  // sidebar.component.ts
     isSidebarCollapsed = false;
  
     onToggleSidebar() {
       this.isSidebarCollapsed = !this.isSidebarCollapsed;
       // Optionally, trigger change detection or emit an event if needed
     }
  

  And in your template:

  <!-- sidebar.component.html -->
     <button (click)="onToggleSidebar()">Toggle Sidebar</button>
     <div [class.collapsed]="isSidebarCollapsed">
       <!-- Sidebar content -->
     </div>
  

  4. Remove or adjust any mouseleave/mouseenter logic that delays the collapse, so the sidebar responds instantly to the click.

  5. If your sidebar uses a service or state management for its open/close state, ensure the state is updated immediately on click.

  This change will make the sidebar collapse as soon as the user clicks the minimize button, providing the immediate feedback you want.

  Sources:

  • ABP Angular Component Replacement
  • Modifying the Menu in ABP Angular

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  decisiontreedaniel created 9 days ago

  I would like to also hear from the ABP Support Team, thank you.

  Save Cancel
• 

  0

  maliming created 9 days ago

  Support Team Fullstack Developer

  hi

  We noticed that when you click on the expanded sidebar in the main app, it doesn't immediately close. Instead, you have to move the cursor away from the expanded sidebar for the closing to happen.

  Can you share a GIF?

  Thanks.

  Save Cancel
• 

  0

  decisiontreedaniel created 2 days ago

  Hi @maliming,

  Here is a GIF of the current behaviour.

  I am wondering if we can change it so that when the user presses on the sidebar icon, it immediately closes the sidebar (note how the main content on the right immediately adjusts its width after clicking on the sidebar collapse icon).

  

  Thanks, Daniel

  Save Cancel
• 

  0

  maliming created yesterday

  Support Team Fullstack Developer

  hi

  I will check this. Thanks.

  Save Cancel

  1