Open Closed

How to override the existing side menu and layout desig with LeptonX #6825

User avatar
0
Sraman created
  • ABP Framework version: v8.0.0
  • UI Type: / MVC /
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

I want to change the side menu design. Logo to be on right and collapse button to the left. Something similar to the below one, https://easycrm.abp.io/

It would be great to know on how to make a minor design change to the existing side menu and layout .

Go to accepted answer
3 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello ,

    You can add following code in styles.scss file.

    div.lpx-brand-logo{
  background-size: auto 34px;
  background-position: right 0px;
  height:36px;
}

.lpx-sidebar .lpx-logo-container .menu-collapse-icon {
  right:230px;
}

    It will result like this

    Thank you.

  • User Avatar
    0
    Sraman created

    Hi, I want to achieve the same functionality similar to https://easycrm.abp.io/.

    On collapse wanted to show the Text left icon similar to the below screenshot

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    To achive this you have to customize Navbar Componenet as per you requirement for that you can refer https://docs.abp.io/en/commercial/latest/themes/lepton-x/angular-customization#navbar-component.

    Also check this similar issue if it helps you https://support.abp.io/QA/Questions/4358/Creating-new-layout-and-use-lepton-x--components-in-it.

    Thank you.

Assignee
User avatar Anjali_Musmade
Labels
None yet
Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38