Use material design menu button

Post Reply
centai
Posts: 47
Joined: 22 Mar 2012, 12:58

11 Mar 2019, 17:40

Currently UltimaNG show the button to toggle the menu between the navigation and the content:

Image

I think it would be much better (especially for mobile usage) if the button was placed on the left side like in Rome layout:

Image

UltimaNG says it is based on material design, but all Material Design examples use the menu toggle on the left side:
https://material.io/design/navigation/u ... avigation

Is there any reason, why it is different in UltimaNG and would you consider to change it in a future version to be more compliant with Material Design?

User avatar
w00f
Posts: 166
Joined: 27 Apr 2016, 13:27
Location: 0.0.0.0
Contact:

12 Mar 2019, 10:42

Hi,

At the time when we designed Ultima, there was no instruction about navigation drawer so it's designed this way. We are not planning to change Ultima's design for now but we'll consider this for the next templates that we are going to design.

We can give a custom solution for you if you want.

Regards,

centai
Posts: 47
Joined: 22 Mar 2012, 12:58

12 Mar 2019, 12:33

Thank you for the quick reply.

What would be the cost of a custom solution?
I am a bit afraid that it would require additional merge on future updates.

merve7
Posts: 446
Joined: 12 Sep 2017, 10:44

19 Mar 2019, 15:16

Hi,
You can use the below code for override menu icon;

Code: Select all

.layout-container {
    .topbar {
        .topbar-right {
            #menu-button {
                width: 36px;
                text-align: center;
                vertical-align: middle;

                i {
                    @include material-icon("menu");
                    transition: none;
                    font-size: 32px;
                    margin-top: 2px;
                }
            }
        }
    }
}
and if you add in _layout_styles file (src/assets/sass/overrides/_layouts_styles), you don't need to make any changes after the update.

Note: If you use overlay menu modes, please delete !important in line 399 in _main.scss (src/assets/sass/layout)

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 3 guests