<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between p-1 p-lg-0" style="overflow-x: clip;" id="menu">
 <a href="#CoreRootMenu" class="navbar-brand mx-2 py-0 align-self-start d-lg-none">
 <img src="assets/img/logo.png" height="32" width="32">
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuCoreFav">
 <i class=" far fa-star"></i>
 </button>
 <div class="bg-light d-none d-lg-block">
 <ul class="navbar-nav mr-auto flex-wrap">
 <li class="nav-item"><a class="nav-link text-truncate bg-light align-middle px-2 text-primary" href="#CoreRootMenu"><img src="assets/img/logo.png" height="22" width="22"> Меню <i  class="ml-2 fa fa-bars"></i></a></li>
 </ul>
 </div>

 <div class="order-lg-3 flex-nowrap" id="rootMenuBarDropper">
 <?php if($auth->is_login()): ?>
 <a href="#CoreRootMenu" class="text-nowrap nav-link">
 <img src="<?php echo \htmlentities(getImageUrl($auth->user_obj->get('user_photo')), ENT_QUOTES, 'UTF-8', false); ?>" style="height: 22px; width: 22px;"/> <?php echo \htmlentities($auth->user_obj->get('name'), ENT_QUOTES, 'UTF-8', false); ?> <i  class="ml-2 fa fa-bars"></i>
 </a>
 <?php endif; ?>
 </div>
 <div class="collapse navbar-collapse bg-light order-lg-2 autosize-menu" id="menuCoreFav">
 <ul class="navbar-nav mr-auto flex-nowrap" id="menuCoreNavlistFav">
 <?php $__currentLoopData = $favLinks; $this->addLoop($__currentLoopData);$this->getFirstLoop();
 foreach($__currentLoopData as $favLink): $loop = $this->incrementLoopIndices();  ?>
 <li class="nav-item <?php if(in_array($favLink['cat_id'], $cat->path)): ?> active <?php endif; ?>">
 <a class="nav-link text-truncate <?php if(in_array($favLink['cat_id'], $cat->path)): ?> bg-grey <?php else: ?> bg-light <?php endif; ?>  align-middle px-2 text-primary" href="?cat=<?php echo \htmlentities($favLink['cat_id'], ENT_QUOTES, 'UTF-8', false); ?>"><img src="<?php echo \htmlentities($favLink['img'], ENT_QUOTES, 'UTF-8', false); ?>" style="height: 13px; width: 13px;top: -3px; position: relative;"> <?php echo \htmlentities($favLink['cat_name'], ENT_QUOTES, 'UTF-8', false); ?> <span class="badge badge-primary badge-<?php echo \htmlentities($favLink['cat_id'], ENT_QUOTES, 'UTF-8', false); ?>"></span></a>
 </li>
 <?php endforeach; $this->popLoop(); $loop = $this->getFirstLoop(); ?>
 </ul>
 <div id="rootMoreBtnWrapper"></div>
 </div>
</nav>
<!-- Дерево категорий -->
<div style="display:none;">
 <div id="CoreRootMenu">
 <?php echo $html; ?>

 </div>
</div>
<!-- Инициализация меню --->
<script>
 document.addEventListener(
 "DOMContentLoaded", () => {
 new Mmenu( "#CoreRootMenu", {
 "offCanvas": {
 "position": "left-front"
 },
 "language": "ru",
 "slidingSubmenus": true,
 "setSelected": {
 "hover": true,
 "parent": true
 },
 "iconPanels": {
 "add": true,
 "visible": 2
 },
 "navbars": [
 {
 "position": "top",
 "content": [
 "prev",
 "title"
 ]
 },
 {
 "position": "top",
 "content": [
 "searchfield"
 ]
 },
 {
 "position": "bottom",
 "content": [
 '<a href="?cat=admin_exit" class="text-primary">Выйти</a>'
 ]
 }
 ]
 });
 }
 );

 function toggleCoreFav(cat_id) {
 var el = $('.favind-' + cat_id);
 if (el.hasClass('far')) {
 $.get('?cat=core-menuconfig&act=addToFav&id=' + cat_id);
 el.removeClass('far').addClass('fas');

 } else {
 $.get('?cat=core-menuconfig&act=delFromFav&id=' + cat_id);
 el.removeClass('fas').addClass('far');
 }

 return false;

 }
</script>

<script>
 document.addEventListener('DOMContentLoaded', function() {

 if (window.innerWidth < 768 ) return; // Только для широких экранов

 var navList = document.getElementById('menuCoreNavlistFav');
 var navItems = navList.getElementsByClassName('nav-item');
 var moreMenu = document.createElement('li');
 moreMenu.className = 'dropdown dropdown py-0';
 moreMenu.innerHTML = '<a class="nav-link text-nowrap text-left bg-light align-self-baseline px-2 text-primary dropdown-toggle" href="#" data-toggle="dropdown"><i class="far fa-bars"></i> Ещё</a>' +
 '<div class="dropdown-menu dropdown-menu-right py-0" style="z-index: 9999"></div>';

 var dropdownMenu = moreMenu.getElementsByClassName('dropdown-menu')[0];

 var fullWidth = 300;
 fullWidth += document.getElementById('rootMenuBarDropper').offsetWidth;
 var hideNext = false;
 for (var i = 0; i < navItems.length; i++) {
 fullWidth += navItems[i].offsetWidth
 if (fullWidth > window.innerWidth) {
 hideNext = true;
 }
 if (hideNext) {
 var clone = navItems[i].cloneNode(true);
 dropdownMenu.appendChild(clone);
 navItems[i].classList.add('d-none');
 }

 }
 if (hideNext) {
 navList.appendChild(moreMenu);
 }
 });
</script>