<?php $megaMenu = $this->getMegamenuItems(); ?>
<?php if (count($megaMenu) > 0): ?>
	<div class="container" id="check_width"></div>
    <ul id="vertical-menu-<?php echo $this->getMenuId() ?>" class="vertical-menu nav nav-pills nav-main">
        <?php if (count($megaMenu) > 0): ?>
            <?php foreach ($megaMenu as $item): ?>
                <li class="<?php echo $this->getClass($item) ?>">
                    <?php echo $this->getMenuHtml($item) ?>
                </li>
            <?php endforeach ?>
        <?php endif ?>
    </ul>
	<script type="text/javascript">
		require([
			'jquery'
		], function ($) {
			$(document).ready(function(){
				if($(window).width() > 1199){
					setWidth();
				}else {
					$('.vertical-menu li.mega-menu-fullwidth:not(.menu-2columns) > .dropdown-menu').css("width", "");
				}
			});
			$(window) .resize(function(){
				if($(this).width() > 1199){
					setWidth();
				}else {
					$('.vertical-menu li.mega-menu-fullwidth:not(.menu-2columns) > .dropdown-menu').css("width", "");
				}
			});
		});
		function setWidth(el){
			require([
				'jquery'
			], function( $ ) {
				var containerW = $('#check_width').width() - 60;
				var menuW = $('#vertical-menu-<?php echo $this->getMenuId() ?>').width();
				var menuCtW = containerW - menuW;
				$('.vertical-menu li.mega-menu-fullwidth:not(.menu-2columns) > .dropdown-menu').width(menuCtW);
			});
		}
   </script>
<?php endif ?>
