Our sidebar menu is working fine. (When clicking a parent-menu-item the hidden links unfold. The default navigation of the browser (for href="#") is prevented.)
In our top-bar the menu-button works fine (collapsing the sidebar). The 'topbar-items' however don't respond to a click. No menu unfolding.
In this stadium we still used the demo code for the top-bar, so no changes except for putting them in a separate component.
When I take the full code of application.html and put it in my parent component, the top-bar does work.
What makes it that this does not work? How can we solve this?
(We are using Bootstrap as well. When I disable the bootsrap.min.js the problem remains.)
Code of the top-bar:
Code: Select all
<ul class="topbar-items fadeInDown animated">
<li class="profile-item" [hidden]="profileMode!='top'&&layoutMode!='horizontal'">
<a href="#">
<div class="profile-image"></div>
<span class="topbar-item-name">{{userName}}</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">person</i>
<span>Profile</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">security</i>
<span>Privacy</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">settings_applications</i>
<span>Settings</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">power_settings_new</i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons">settings</i>
<span class="topbar-item-name">Settings</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">palette</i>
<span>Change Theme</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">favorite_border</i>
<span>Favorites</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">lock</i>
<span>Lock Screen</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">wallpaper</i>
<span>Wallpaper</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons animated swing">message</i>
<span class="topbar-badge animated rubberBand">5</span>
<span class="topbar-item-name">Messages</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/ultima/layout/images/avatar1.png" width="35"/>
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/ultima/layout/images/avatar2.png" width="35"/>
<span>Sales reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/ultima/layout/images/avatar3.png" width="35"/>
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/ultima/layout/images/avatar2.png" width="35"/>
<span>Meeting today at 10pm</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<img src="assets/ultima/layout/images/avatar4.png" width="35"/>
<span>Out of office</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons">timer</i>
<span class="topbar-badge animated rubberBand">4</span>
<span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons">bug_report</i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">event</i>
<span>Meeting today at 3pm</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">file_download</i>
<span>Download documents</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons">flight</i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
<li class="search-item">
<span class="md-inputfield">
<input type="text">
<label>Search</label>
<i class="topbar-icon material-icons">zoeken</i>
</span>
</li>
</ul>