ты можешь мне помочь?Я занимаюсь разработкой приложения со стеком, что означает, что у меня возникла проблема при запуске сеанса в приложении.Кажется, что пункты меню заблокированы, и я должен обновить страницу, чтобы они были включены.
Есть идеи?
Я использую версию Materialize 1.0.0 и jquery 3.4.1
Шаблон следующий, но я обновляю его до новых версий материализации и jquery. Не знаю, нужно ли мне что-то изменить:
[https://github.com/rahmato/free-materialize-material-design-admin-template][1]
Это код меню:
<header id="header" class="page-topbar" *ngIf="auth.isLoggedIn()">
<!-- start header nav-->
<div class="navbar-fixed">
<nav class="navbar-color gradient-45deg-light-blue-cyan">
<div class="nav-wrapper">
<ul class="left">
<li>
<h1 class="logo-wrapper">
<a href="index.html" class="brand-logo darken-1">
<img src="../../../assets/images/logo/materialize-logo.png" alt="materialize logo">
<span class="logo-text hide-on-med-and-down">Materialize</span>
</a>
</h1>
</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
<a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button" data-target="translation-dropdown">
<span class="flag-icon flag-icon-gb"></span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen">
<i class="material-icons">settings_overscan</i>
</a>
</li>
<li>
<a href="javascript:void(0);" class="waves-effect notification-button" data-target="notifications-dropdown">
<i class="material-icons">notifications_none
<small class="notification-badge pink accent-2">5</small>
</i>
</a>
</li>
<li>
<a href="#" class="waves-effect waves-block waves-light profile-button" data-target="profile-dropdown">
<span class="avatar-status avatar-online">
<img src="../../../assets/images/avatar/avatar-7.png" alt="avatar">
<i></i>
</span>
</a>
</li>
<li>
<a href="#" data-target="chat-out" class="waves-effect waves-block waves-light chat-collapse">
<i class="material-icons">format_indent_increase</i>
</a>
</li>
</ul>
<!-- translation-button -->
<ul id="translation-dropdown" class="dropdown-content">
<li>
<a href="#!" class="grey-text text-darken-1">
<i class="flag-icon flag-icon-gb"></i> English</a>
</li>
<li>
<a href="#!" class="grey-text text-darken-1">
<i class="flag-icon flag-icon-fr"></i> French</a>
</li>
<li>
<a href="#!" class="grey-text text-darken-1">
<i class="flag-icon flag-icon-cn"></i> Chinese</a>
</li>
<li>
<a href="#!" class="grey-text text-darken-1">
<i class="flag-icon flag-icon-de"></i> German</a>
</li>
</ul>
<!-- notifications-dropdown -->
<ul id="notifications-dropdown" class="dropdown-content">
<li>
<h6>NOTIFICATIONS
<span class="new badge">5</span>
</h6>
</li>
<li class="divider"></li>
<li>
<a href="#!" class="grey-text text-darken-2">
<span class="material-icons icon-bg-circle cyan small">add_shopping_cart</span> A new order has been placed!</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
</li>
<li>
<a href="#!" class="grey-text text-darken-2">
<span class="material-icons icon-bg-circle red small">stars</span> Completed the task</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
</li>
<li>
<a href="#!" class="grey-text text-darken-2">
<span class="material-icons icon-bg-circle teal small">settings</span> Settings updated</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
</li>
<li>
<a href="#!" class="grey-text text-darken-2">
<span class="material-icons icon-bg-circle deep-orange small">today</span> Director meeting started</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
</li>
<li>
<a href="#!" class="grey-text text-darken-2">
<span class="material-icons icon-bg-circle amber small">trending_up</span> Generate monthly report</a>
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
</li>
</ul>
<!-- profile-dropdown -->
<ul id="profile-dropdown" class="dropdown-content">
<li>
<a href="#" class="grey-text text-darken-1">
<i class="material-icons">face</i> Profile</a>
</li>
<li>
<a href="#" class="grey-text text-darken-1">
<i class="material-icons">settings</i> Settings</a>
</li>
<li>
<a href="#" class="grey-text text-darken-1">
<i class="material-icons">live_help</i> Help</a>
</li>
<li class="divider"></li>
<li>
<a href="#" class="grey-text text-darken-1">
<i class="material-icons">lock_outline</i> Lock</a>
</li>
<li>
<a class="grey-text text-darken-1" (click)="auth.logout()">
<i class="material-icons">keyboard_tab</i> Logout</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- end header nav-->
</header>
и это скрипт:
/*Preloader*/
$(window).on('load', function () {
setTimeout(function () {
$('body').addClass('loaded');
}, 200);
});
$(function () {
"use strict";
var window_width = $(window).width();
// Search class for focus
$('.header-search-input').focus(
function () {
$(this).parent('div').addClass('header-search-wrapper-focus');
}).blur(
function () {
$(this).parent('div').removeClass('header-search-wrapper-focus');
});
// Check first if any of the task is checked
$('#task-card input:checkbox').each(function () {
checkbox_check(this);
});
// Task check box
$('#task-card input:checkbox').change(function () {
checkbox_check(this);
});
// Check Uncheck function
function checkbox_check(el) {
if (!$(el).is(':checked')) {
$(el).next().css('text-decoration', 'none'); // or addClass
} else {
$(el).next().css('text-decoration', 'line-through'); //or addClass
}
}
// Plugin initialization
$('select').formSelect();
// Set checkbox on forms.html to indeterminate
var indeterminateCheckbox = document.getElementById('indeterminate-checkbox');
if (indeterminateCheckbox !== null)
indeterminateCheckbox.indeterminate = true;
$('.profile-btn').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false,
gutter: 0,
coverTrigger: false,
alignment: 'right',
stopPropagation: false
});
// Commom, Translation & Horizontal Dropdow
$('.dropdown-trigger, .translation-button, .dropdown-menu').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false,
hover: true,
gutter: 0,
coverTrigger: false,
alignment: 'left',
stopPropagation: false
});
// Notification, Profile & Settings Dropdown
$('.notification-button, .profile-button, .dropdown-settings').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false,
hover: true,
gutter: 0,
coverTrigger: false,
alignment: 'right',
stopPropagation: false
});
// Materialize scrollSpy
$('.scrollspy').scrollSpy();
// Materialize tooltip
$('.tooltipped').tooltip({
delay: 50
});
//Main Left Sidebar Menu
$('.sidenav').sidenav({
edge: 'left', // Choose the horizontal origin
preventScrolling: false
});
// Overlay Menu (Full screen menu)
$('.menu-sidebar-collapse').sidenav({
menuWidth: 240,
edge: 'left', // Choose the horizontal origin
//sidenav-close:true, // Set if default menu open is true
//menuOut: false // Set if default menu open is true
});
//Main Left Sidebar Chat
$('.chat-collapse').sidenav({
menuWidth: 300,
edge: 'right',
});
// Pikadate datepicker
$('.datepicker').datepicker({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
// Perfect Scrollbar
$('select').not('.disabled').formSelect();
var leftnav = $(".page-topbar").height();
var leftnavHeight = window.innerHeight - leftnav;
if (!$('#slide-out.leftside-navigation').hasClass('native-scroll')) {
$('.leftside-navigation').perfectScrollbar({
suppressScrollX: true
});
}
var righttnav = $("#chat-out").height();
$('.rightside-navigation').perfectScrollbar({
suppressScrollX: true
});
// Fullscreen
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
$('.toggle-fullscreen').click(function () {
toggleFullScreen();
});
// Toggle Flow Text
var toggleFlowTextButton = $('#flow-toggle')
toggleFlowTextButton.click(function () {
$('#flow-text-demo').children('p').each(function () {
$(this).toggleClass('flow-text');
})
});
// Detect touch screen and enable scrollbar if necessary
function is_touch_device() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if (is_touch_device()) {
$('#nav-mobile').css({
overflow: 'auto'
})
}
});