In case of mobile screen
- The vertical menu must displayed only when click on the toogle
- After clicking on item the vertical menu will disapears
HTML
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<!-- Sidebar toggle button-->
<span class="sr-only">Toggle navigation</span>
</a>
Vertical Menu
<div class="container-fluid"><div class="row"><div class="moduleContainer_1"></div></div></div>
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar" id="sidebar_menu_id_master">
<!-- Sidebar Menu -->
<ul class="sidebar-menu" id="sidebar_menu_id">
<li><a href="{{'APP_MODULE_70_01.URL'| translate }}"><i class="fa fa-stethoscope" aria-hidden="true"></i><span>{{'APP_MODULE_70_01.LABEL'| translate }}</span></a></li>
<li class="active"><a href="#"><i class="fa fa-plus-square"></i> <span>{{'APP_MODULE_70_02.LABEL'| translate }}</span></a></li>
<li><a href="{{'APP_MODULE_70_03.URL'| translate }}"><i class="fa fa-user-md"></i> <span>{{'APP_MODULE_70_03.LABEL'| translate }}</span></a></li>
<li><a href="{{'APP_MODULE_70_04.URL'| translate }}"><i class="fa fa-hospital-o"></i> <span>{{'APP_MODULE_70_04.LABEL'| translate }}</span></a></li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
JavaScript
`<script>
$(document).ready(function() {
$(".sidebar-menu>li").click(function() {
windowsize = $(window).width();
if (windowsize >= 1025) {
$(".sidebar-menu").css("display", "block");
}
else {
if ( parseInt( $('.sidebar-menu').css('width')) > 0 ) {
$('.row-offcanvas').toggleClass('toggled');
}
}
});
});
</script>`