Chào mọi người, em mới tập tành code Nodejs bằng EJS. Nhưng hiện giờ đang gặp một lỗi khi include menu sidebar. Hy vọng ai có kinh nghiệm có thể giúp em fix lỗi này với ạ. Nếu em không dùng include thì trang menu load bình thường dùng include thì menu nó bị full width khi load
Khi em load trang thì cái menu bên trái nó bị tràn full màn hình như hình bên dưới:
Sau khi load hoàn tất trang thì menu lại trở lại như bình thường:
Dưới đây là đoạn code menu.ejs của em:
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Menu Page container -->
<div class="sidebar sidebar-main">
<div class="sidebar-content">
<!-- User menu -->
<div class="sidebar-user">
<div class="category-content">
<div class="media">
<a href="#" class="media-left"><img src="/assets/images/placeholder.jpg" class="img-circle img-sm" alt=""></a>
<div class="media-body">
<span class="media-heading text-semibold">4Marts</span>
<div class="text-size-mini text-muted">
<i class="icon-pin text-size-small"></i> Ho Chi Minh City, VN
</div>
</div>
</div>
</div>
</div>
<!-- /user menu -->
<!-- Main navigation -->
<div class="sidebar-category sidebar-category-visible">
<div class="category-content no-padding">
<ul class="navigation navigation-main navigation-accordion">
<!-- Main -->
<li class="navigation-header"><span>Main</span> <i class="icon-menu" title="Main pages"></i></li>
<li data-link="/customers"><a href="customers"><i class="icon-people"></i> <span>Customers</span></a></li>
<li data-link="/orders"><a href="orders"><i class="icon-file-spreadsheet"></i> <span>Orders</span></a></li>
</ul>
</div>
</div>
<!-- /main navigation -->
</div>
</div>
<!-- /Menu page container -->
<script type="text/javascript">
$(document).ready(function() {
//Set current selected menu
var host = window.location.host;
var url = window.location.href.toString();
var web = '${pageContext.request.contextPath}';
url = url.replace('http://', '');
url = url.replace('https://', '');
url = url.replace(host, '');
url = url.replace(web, '');
if (url.indexOf("#") !== -1) {
var temp = url.split('#');
url = temp[0];
}
var arr = url.split('?');
var currentPage = arr[0];
$("div.sidebar-category div.category-content ul li").each(function() {
var link = $(this).data('link');
if (link != null && link === currentPage) {
$(this).addClass('active');
}
});
alert("xin chao")
});
</script>
</body>
</html>
