Use material design menu button

[centai]

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



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



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?

[w00f]

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]

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]

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)