Open Closed

Angular: SetMenuPlacement not applied when logout and login #254


User avatar
0
edelivery created
  • ABP Framework version: 2.9
  • UI type: Angular
  • Tiered (MVC) or Identity Server Seperated (Angular): yes

Hi all I have a problem of SetMenuPlacement. Currently, my menu is on the left. I would like to set Menu on the top of page so I use layoutStateService.dispatchSetMenuPlacement(1), then it's ok. As a result: But I have trouble:

It can't work when I log in and log out again , Menu is still on the left. When I refresh this page, Menu is on the top. How I can set it's alway on top when I logout and login again Thanks

Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

6 Answer(s)
  • User Avatar
    0
    armanozak created

    Hi,

    The dispatchSetMenuPlacement method of LayoutStateService makes the UI change, i.e. moves the menu from left to top and vice versa.

    If you want a persistent change, you should call the dispatchUpdateThemeSettings method of the same service, which makes a PUT request to the /api/lepton-theme-management/settings endpoint. You do not need to call the other method, it will happen upon successful request.

    Please let me know this answers your question.

    Have a nice day.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    edelivery created

    Hi armanozak I have many module with angularUI but I just want custom 1 module of them (set menu to the top). If i use dispatchUpdateThemeSettings it set all my modules.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    armanozak created

    Hi,

    There is no way of persisting Lepton settings per module. If a menu on top in a specific module for all users is what you need, then you can use OnInit and OnDestroy lifecycle hooks in the root component of that specific module. An example:

    @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
    })
    export class DashboardComponent {
      private menuPlacement: number;
    
      constructor(private layout: LayoutStateService) {}
    
      ngOnInit() {
        this.menuPlacement = this.layout.getMenuPlacement();
        this.layout.dispatchSetMenuPlacement(1);
      }
    
      ngOnDestroy() {
        this.layout.dispatchSetMenuPlacement(this.menuPlacement);
      }
    }
    

    Does this solve the issue for you?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    edelivery created

    Hi The menu is still on the left when I logout and login. When I refresh browser it applied

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    armanozak created

    Hi,

    I cannot reproduce this. Please check the attached animated GIF on what I see when I use the exact code above.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    edelivery created

    That's what i need thank you so much

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 16, 2026, 14:50
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.