menu-panel.html

<i id="lms-ui-menu-panel-toggle" class="fas fa-angle-left"></i>
<nav id="lms-ui-menu-panel" class="no-print">
	<div id="lms-ui-menu-panel-container">
	<div id="lms-ui-logo">
		<img src="{ConfigHelper::getConfig('phpui.logo', 'img/logo-40.png')}" title="LMS {$layout.lmsv}">
		<span>{$layout.lmsv}</span>
	</div>
	<div id="lms-ui-main-menu">
		<script>

			var mainMenuVisible = getCookie('main-menu-visible');
			mainMenuVisible = mainMenuVisible === null || mainMenuVisible == 'true';
			if (mainMenuVisible) {
				$('#lms-ui-menu-panel-toggle').addClass('visible');
			} else {
				$('#lms-ui-menu-panel').hide();
				$('#lms-ui-menu-panel-toggle').switchClass('fa-angle-left', 'fa-angle-right');
			}


			$('#lms-ui-menu-panel-toggle').click(function () {
				var mainMenuVisible = $('#lms-ui-menu-panel').toggle().is(':visible');
				if (mainMenuVisible) {
					$('#lms-ui-menu-panel-toggle').addClass('visible')
						.switchClass('fa-angle-right', 'fa-angle-left');
				} else {
					$('#lms-ui-menu-panel-toggle').removeClass('visible')
						.switchClass('fa-angle-left', 'fa-angle-right');
				}
				setCookie('main-menu-visible', mainMenuVisible);
			});

			if ($(window).width() <= 900) {
				$('#lms-ui-menu-panel').addClass('mobile').css({
					'min-width': 'unset',
					'width' : '3em'
				});
			} else {
				$('#lms-ui-menu-panel').removeClass('mobile').css({
					'width': '12em',
					'min-width': '12em'
				});
			}

			$(window).resize(function() {
				if ($(window).width() <= 900) {
					if (!$('#lms-ui-menu-panel').is('.mobile')) {
						$('#lms-ui-menu-panel').addClass('mobile').css('min-width', 'unset')
							.stop(true).animate({
							width: '3em'
						});
					}
				} else {
					if ($('#lms-ui-menu-panel').is('.mobile')) {
						$('#lms-ui-menu-panel').removeClass('mobile')
							.stop(true).animate({
							width: '12em'
						}, {
							complete: function () {
								$(this).css('min-width', '12em');
							}
						});
					}
				}
			});

		</script>
		<div id="main-menu" class="click-menu">
			{foreach $newmenu as $menuindex => $menuitem}
			<div id="menu-{$menuindex}" class="lms-ui-menu-item">
				<div class="click-menu bottomline">
					<div{if $menuitem.tip} {tip class="tip" text="\$a" a=$menuitem.tip bold=1}{else} class="tip"{/if}{if ! $menuitem.submenu} onClick="{if $menuitem.windowopen}window.open('{$menuitem.link}'); {else}return self.location.href = '{$menuitem.link}'; {/if}"{/if}>
						<div class="box1">
							{if isset($menuitem.img)}
								<img src="img/{$menuitem.img}">
							{else}
								<i class="lms-ui-menu-item-icon {$menuitem.css}"></i>
							{/if}
							{$menuitem.name}
						</div>
					</div>
					<div class="section">
						{if $menuitem.submenu}
							{foreach from=$menuitem.submenu item=submenuitem}
								<div{if $submenuitem.tip} {tip class="tip" text="\$a" a=$submenuitem.tip bold="1"}{else} class="tip"{/if}>
									<div class="box2">
										<a href="{$submenuitem.link|replace:"&":"&amp;"}">{$submenuitem.name}</a>
									</div>
								</div>
							{/foreach}
						{/if}
					</div>
				</div>
			</div>
			{/foreach}
			<div id="menu-logout" class="lms-ui-menu-item">
				<div class="click-menu bottomline">
					<div {tip class="tip" text="Allows you to logout" bold=1} onClick="{if ConfigHelper::getConfig('phpui.logout_confirmation')}if (confirm('{trans("Are you sure that you want to logout?")}')) { return self.location.href='?m=logout&amp;is_sure=1'; }{else}self.location.href='?m=logout&amp;is_sure=1';{/if}">
						<div class="box1">
							<i class="lms-ui-menu-item-icon lms-ui-icon-logout"></i>
							{trans("Logout")} {$layout.logname|truncate:10:"..."}
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>

		var mainMenu = new ClickShowHideMenu({
			id: 'main-menu',
			maxOpened: {intval(ConfigHelper::getConfig('phpui.max_opened_menus', 3))}
		});
		mainMenu.init();

		$('#main-menu').sortable({
			items: ".lms-ui-menu-item",
			handle: "i,img",
			axis: "y",
			opacity: 0.9,
			update: function (event, ui) {
				data = {};
				data['main-menu-order'] = $(this).sortable("toArray").join(';');
				savePersistentSettings(data);
			}
		});

		restoreSortable('main-menu', '{$main_menu_sortable_order}');

		</script>
	</div>
	<div id="lms-ui-copyrights">
		&copy; 2001-{$smarty.now|date_format:'%Y'}<br>
		DB: {$layout.lmsdbv}<br>
		<A href="?m=copyrights">LMS Developers</A>
	</div>
	</div>
</nav>
<script>

	var menuPanelContainer = $('#lms-ui-menu-panel-container');
	menuPanelContainer.css('margin-right', menuPanelContainer[0].clientWidth - menuPanelContainer[0].offsetWidth + 'px');

	$(function() {
		$('#lms-ui-menu-panel').on('mouseenter touchstart', function () {
			if ($('#lms-ui-menu-panel').is('.mobile')) {
				$(this).stop(true).animate({
					width: '12em'
				});
			}
		}).on('mouseleave', function () {
			if ($('#lms-ui-menu-panel').is('.mobile')) {
				$(this).stop(true).animate({
					width: '3em'
				});
			}
		});
		$('#lms-ui-contents').on('mouseenter touchstart', function () {
			if ($('#lms-ui-menu-panel').is('.mobile')) {
				$('#lms-ui-menu-panel').stop(true).animate({
					width: '3em'
				});
			}
		});
	});

</script>