Set layout-menu not visible on default

[Washu]

Hi,
i love the menu on the left side from the example page from Ultima. The responsive feature that it make from a fix div to an overlay is realy nice.
Now my question, how can i set the default visible from the menu to not visible on startup the page.
It seems not to be a normal component, i don't find a documentaion for this or a part in the app.component.ts.

Here the example code that i used to show this menu:

Code: Select all

<div [ngClass]="{'layout-wrapper':true,'layout-compact':layoutCompact}">
    
    <div [ngClass]="{'layout-container':true,'menu-layout-static':(layoutMode=='static'||layoutMode=='horizontal'),
            'menu-layout-overlay':(layoutMode=='overlay'),'menu-layout-horizontal':(layoutMode=='horizontal')}">
        <!-- Menu -->
        <div [ngClass]="{'layout-menu':true,'layout-menu-dark':darkMenu}">
            <div class="nano">
                <div class="nano-content menu-scroll-content">

                    <ul id="main-menu" class="ultima-menu clearfix">
                        <li role="menuitem"><a [routerLink]="['/']">
                             <i class="material-icons">dashboard</i>
                             <span>Dashboard</span></a>
                        </li>
                        <li role="menuitem">
                            <a href="#" class="ripplelink"><i class="material-icons">palette</i><span>Themes</span>
                                <i class="material-icons">keyboard_arrow_down</i>
                           </a>
                            <ul role="menu">
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'indigo')">
                                       <i class="material-icons">brush</i>
                                       <span>Indigo - Pink</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'green')">
                                       <i class="material-icons">brush</i>
                                       <span>Green - Yellow</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'purple-cyan')">
                                       <i class="material-icons">brush</i>
                                       <span>Purple - Cyan</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'purple-amber')">
                                       <i class="material-icons">brush</i>
                                       <span>Purple - Amber</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'teal')">
                                       <i class="material-icons">brush</i>
                                       <span>Teal - Lime</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'cyan')">
                                       <i class="material-icons">brush</i>
                                       <span>Cyan - Amber</span></a></li>
                                <li role="menuitem">
                                       <a href="#" class="ripplelink" (click)="changeTheme($event, 'grey')">
                                       <i class="material-icons">brush</i>          
                                       <span>Grey - Deep Orange</span></a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
     </div>
</div>

Give it a documentation or can me one help by this problem.

Yours sincerely
Washu

[cagatay.civici]

The combination for it is;

Code: Select all

<div #layoutContainer class="layout-container menu-layout-overlay">

So at line 20 of app.component.ts, the layout mode should default to overlay;

Code: Select all

layoutMode: MenuOrientation = MenuOrientation.OVERLAY;

[Washu]

Thx for the fast answer and the move to the right forum. Sry for that.

I don't want to make the Menu to a "overlay" i want that it is hidden by first call of the app.

When your answer this mean than i don't used it right.

By me make

Code: Select all

<div #layoutContainer class="layout-container menu-layout-overlay">

change the menu to a overlay and the next code:

Code: Select all

layoutMode: MenuOrientation = MenuOrientation.OVERLAY;

can i not use it. By me is on line 20 of the app.component.ts from the Ultima example Projekt the the following line

Code: Select all

constructor(private el: ElementRef) {}

how i have to integrate this there i don't know how to load "MenuOrientation" Module or it is only a variable?

[cagatay.civici]

You seem to have an old version of Ultima, we strongly suggest updating to 2.0 which has a new architecture that plays nice with Angular. Old one depended on jQuery which was fragile.

http://blog.primefaces.org/?p=4326

Code: Select all

<div #layoutContainer class="layout-container layout-menu-static-inactive">

Hides the menu in non-overlay mode, there is also a backing variable for that as well that manipulates ngClass.

[Washu]

Thx for the help i will try it but i can it test in a few day's when i update my app with ultima 2 then i will give feedback.

[Washu]

Ok now i have get it to work with the Ultima 2.
I have set the default value of "staticMenuDesktopInactive" to true in the app.component so it work for me thx for the help.

app.component.ts

Code: Select all

staticMenuDesktopInactive: boolean = true;

Yours sincerely
Washu

[DarthMaul]

Glad to hear that.