Open Closed

Issues with Menu in Angular LeptonX #4346


User avatar
0
dkaczor created
  • ABP Framework version: v7.0.0
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Steps to reproduce the issue: Open ABP Suite, create new project with Angular as frontend Lepton X as theme

I found two problems with lepton X in angular.

  1. Collapse button is missing: It is visible in demo but when I create my own project, it is hidden

  2. TopMenu is not working: I changed SideMenuLayoutModule to TopMenuLayoutModule in app.module.ts and this is the result.

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
    muhammedaltug created

    Hello,

    You need to change layout-bundle css file in angular.json

    {
        "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/top-menu/layout-bundle.css",
        "inject": false,
        "bundleName": "layout-bundle"
    },
    
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    dkaczor created

    Hello,

    You need to change layout-bundle css file in angular.json

    I tried. It does not look any better

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

    Hello,

    Can you send your app.module.ts?

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

    Also you need to remove side menu's CSS

    {
        "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
        "inject": false,
        "bundleName": "layout-bundle"
    },
    
    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    dkaczor created

    I found the issue, I didn't import the TopMenuLayoutModule after changing the angular.json file. Works fine now, thanks.

    Any updates about the first issue? (Collapse menu button missing).

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

    Hello,

    We created an internal issue for this bug.

    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 28, 2026, 11:44
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.