From cbbb348c769e024483431e58135122a12eeb6ce2 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 3 Mar 2016 10:32:26 +0100
Subject: [PATCH] Added basic mobile support for ACP

---
 com.woltlab.wcf/templates/headInclude.tpl     |  14 +-
 wcfsetup/install/files/acp/style/layout.scss  | 242 ++++++++++--------
 .../install/files/acp/templates/footer.tpl    |   2 +
 .../install/files/acp/templates/header.tpl    |  17 +-
 .../files/acp/templates/pageMenuMobile.tpl    |  78 ++++++
 .../files/js/WoltLab/WCF/Acp/Bootstrap.js     |  12 +-
 .../install/files/js/WoltLab/WCF/Bootstrap.js |  22 +-
 .../install/files/js/WoltLab/WCF/Ui/Mobile.js |  33 ++-
 .../js/WoltLab/WCF/Ui/Page/Menu/Abstract.js   |  20 +-
 .../files/style/layout/pageHeaderSticky.scss  |   4 +
 .../install/files/style/ui/menuMobile.scss    |   1 +
 11 files changed, 300 insertions(+), 145 deletions(-)
 create mode 100644 wcfsetup/install/files/acp/templates/pageMenuMobile.tpl

diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl
index 88da640b5c..c684a3545b 100644
--- a/com.woltlab.wcf/templates/headInclude.tpl
+++ b/com.woltlab.wcf/templates/headInclude.tpl
@@ -1,8 +1,8 @@
-<base href="{$baseHref}" />
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="format-detection" content="telephone=no" />
-{if $allowSpidersToIndexThisPage|empty}<meta name="robots" content="noindex,nofollow" />{/if}
+<base href="{$baseHref}">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="format-detection" content="telephone=no">
+{if $allowSpidersToIndexThisPage|empty}<meta name="robots" content="noindex,nofollow">{/if}
 {implode from=$__wcf->getMetaTagHandler() item=__metaTag glue="\n"}{@$__metaTag}{/implode}
 {event name='metaTags'}
 
@@ -27,8 +27,8 @@
 {event name='javascriptInclude'}
 
 <!-- Icons -->
-<link rel="icon" href="{@$__wcf->getFavicon()}" type="image/x-icon" />
-<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
+<link rel="icon" href="{@$__wcf->getFavicon()}" type="image/x-icon">
+<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png">
 
 <script data-relocate="true">
 	//<![CDATA[
diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 3511f2c29c..56067ec51b 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -16,45 +16,56 @@
 	right: 0;
 	top: 0;
 	
-	.pageHeader > div > div {
-		height: 50px;
-		padding: 10px 10px 10px 0;
-	}
-	
-	.pageHeaderLogo {
-		flex: 0 0 120px;
-		margin: 0;
-		order: 1;
-		text-align: center;
+	@include large-screen-only {
+		.pageHeader .layoutBoundary {
+			height: 50px;
+			padding: 10px 10px 10px 0;
+		}
 		
-		.pageHeaderLogoLarge {
-			display: none;
+		.pageHeaderLogo {
+			flex: 0 0 120px;
+			margin: 0;
+			order: 1;
+			text-align: center;
+			
+			.pageHeaderLogoLarge {
+				display: none;
+			}
+			
+			.pageHeaderLogoSmall {
+				display: inline;
+			}
 		}
 		
-		.pageHeaderLogoSmall {
-			display: inline;
+		.mainMenu {
+			flex: 0 0 auto;
+			order: 2;
 		}
-	}
-	
-	.mainMenu {
-		flex: 0 0 auto;
-		order: 2;
-	}
-	
-	.pageHeaderSearch {
-		flex: 0 0 auto;
-		order: 3;
 		
-		.pageHeaderSearchInput {
-			border-width: 0 !important;
-			height: 50px;
-			width: 300px;
+		.pageHeaderSearch {
+			flex: 0 0 auto;
+			margin-bottom: 0;
+			order: 3;
+			
+			// force to take up the full available height
+			position: relative;
+			top: -10px;
+			
+			.pageHeaderSearchInput {
+				border-width: 0 !important;
+				height: 50px;
+				width: 300px;
+			}
+		}
+		
+		.userPanel {
+			flex: 1 1 auto;
+			order: 4;
 		}
 	}
 	
-	.userPanel {
-		flex: 1 1 auto;
-		order: 4;
+	@include small-screen-only {
+		max-width: 100vw;
 	}
 }
 
@@ -75,109 +86,124 @@
 	flex: 1 0 auto;
 }
 
-.acpPageMenu .icon, .acpPageSubMenu .icon {
-	color: inherit;
-}
-
-.acpPageMenu {
-	background-color: rgb(52, 73, 94);
-	flex: 0 0 120px;
-	text-align: center;
-	overflow: hidden;
+@include large-screen-only {
+	.acpPageMenu .icon, .acpPageSubMenu .icon {
+		color: inherit;
+	}
 	
-	.acpPageMenuLink {
-		color: rgb(192, 192, 192);
-		display: block;
-		padding: 20px 10px;
+	.acpPageMenu {
+		background-color: rgb(52, 73, 94);
+		flex: 0 0 120px;
+		text-align: center;
+		overflow: hidden;
 		
-		&.active {
-			background-color: rgb(65, 86, 107);
-			color: rgb(255, 255, 255);
+		.acpPageMenuLink {
+			color: rgb(192, 192, 192);
+			display: block;
+			padding: 20px 10px;
+			
+			&.active {
+				background-color: rgb(65, 86, 107);
+				color: rgb(255, 255, 255);
+				
+				> .icon {
+					transform: scale(1);
+				}
+			}
 			
 			> .icon {
-				transform: scale(1);
+				transform: scale(.8);
+				transition: transform .12s linear;
 			}
 		}
 		
-		> .icon {
-			transform: scale(.8);
-			transition: transform .12s linear;
+		.acpPageMenuItemLabel {
+			display: block;
+			margin-top: 5px;
 		}
 	}
 	
-	.acpPageMenuItemLabel {
-		display: block;
-		margin-top: 5px;
-	}
-}
-
-
-.acpPageSubMenu {
-	background-color: rgb(65, 86, 107);
-	flex: 0 0 auto;
-}
-
-.acpPageSubMenuCategoryList{
-	flex: 0 0 300px;
-	overflow: hidden;
-	width: 300px;
-	
-	&:not(.active) {
-		display: none;
+	.acpPageSubMenu {
+		background-color: rgb(65, 86, 107);
+		flex: 0 0 auto;
 	}
 	
-	> .acpPageSubMenuCategory {
-		margin-top: 20px;
-		padding-left: 20px;
+	.acpPageSubMenuCategoryList {
+		flex: 0 0 300px;
+		overflow: hidden;
+		width: 300px;
 		
-		> span {
-			color: rgb(169, 169, 169);
+		&:not(.active) {
+			display: none;
+		}
+		
+		> .acpPageSubMenuCategory {
+			margin-top: 20px;
+			padding-left: 20px;
+			
+			> span {
+				color: rgb(169, 169, 169);
+				display: block;
+				padding: 5px 20px;
+				text-transform: uppercase;
+			}
+		}
+		
+		.acpPageSubMenuLink,
+		.acpPageSubMenuIcon {
+			color: rgb(255, 255, 255);
 			display: block;
+			overflow: hidden;
 			padding: 5px 20px;
-			text-transform: uppercase;
+			text-overflow: ellipsis;
+			white-space: nowrap;
 		}
-	}
-	
-	.acpPageSubMenuLink,
-	.acpPageSubMenuIcon {
-		color: rgb(255, 255, 255);
-		display: block;
-		overflow: hidden;
-		padding: 5px 20px;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	
-	.acpPageSubMenuLink:hover,
-	.acpPageSubMenuLink:hover ~ .acpPageSubMenuIcon:not(.active),
-	.acpPageSubMenuIcon:hover {
-		background-color: rgb(52, 73, 94);
-	}
-	
-	.acpPageSubMenuLinkWrapper {
-		display: flex;
 		
-		> .acpPageSubMenuLink {
-			flex: 1 1 auto;
+		.acpPageSubMenuLink:hover,
+		.acpPageSubMenuLink:hover ~ .acpPageSubMenuIcon:not(.active),
+		.acpPageSubMenuIcon:hover {
+			background-color: rgb(52, 73, 94);
 		}
 		
-		> .acpPageSubMenuIcon {
-			flex: 0 0 auto;
+		.acpPageSubMenuLinkWrapper {
+			display: flex;
+			
+			> .acpPageSubMenuLink {
+				flex: 1 1 auto;
+			}
+			
+			> .acpPageSubMenuIcon {
+				flex: 0 0 auto;
+			}
+		}
+		
+		.acpPageSubMenuItemList > .active > a,
+		.acpPageSubMenuLink.active,
+		.acpPageSubMenuLink.active ~ .acpPageSubMenuIcon,
+		.acpPageSubMenuIcon.active {
+			background-color: rgb(255, 255, 255) !important;
+			color: rgb(44, 62, 80) !important;
 		}
 	}
-	
-	.acpPageSubMenuItemList > .active > a,
-	.acpPageSubMenuLink.active,
-	.acpPageSubMenuLink.active ~ .acpPageSubMenuIcon,
-	.acpPageSubMenuIcon.active {
-		background-color: rgb(255, 255, 255) !important;
-		color: rgb(44, 62, 80) !important;
+}
+
+@include small-screen-only {
+	.acpPageMenu,
+	.acpPageSubMenu {
+		display: none;
 	}
 }
 
 .main {
 	flex: 1 1 auto;
-	padding: 40px 0 40px 20px;
+	
+	@include large-screen-only {
+		padding: 40px 0 40px 20px;
+	}
+	
+	@include small-screen-only {
+		padding: 20px 0;
+	}
 }
 
 .pageFooter {
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index af0a6a5370..443ef8bfe1 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -5,6 +5,8 @@
 			
 	{include file='pageFooter'}		
 </div>
+
+{include file='pageMenuMobile'}
 			
 {event name='footer'}
 	
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 7781aba195..4e6bd3e478 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html dir="{@$__wcf->getLanguage()->getPageDirection()}" lang="{@$__wcf->getLanguage()->getFixedLanguageCode()}">
 <head>
-	<base href="{$baseHref}" />
-	<meta charset="utf-8" />
-	<meta name="robots" content="noindex" />
+	<base href="{$baseHref}">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="robots" content="noindex">
 	<title>{if $pageTitle|isset}{@$pageTitle|language} - {/if}{lang}wcf.global.acp{/lang}{if PACKAGE_ID} - {PAGE_TITLE|language}{/if}</title>
 	
 	<!-- Stylesheets -->
@@ -12,8 +13,8 @@
 	{event name='stylesheets'}
 	
 	<!-- Icons -->
-	<link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico" />
-	<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png" />
+	<link rel="shortcut icon" href="{@$__wcf->getPath()}images/favicon.ico">
+	<link rel="apple-touch-icon" href="{@$__wcf->getPath()}images/apple-touch-icon.png">
 	
 	<script>
 		var SID_ARG_2ND = '{@SID_ARG_2ND_NOT_ENCODED}';
@@ -96,7 +97,11 @@
 				{event name='javascriptLanguageImport'}
 			});
 			
-			AcpBootstrap.setup();
+			AcpBootstrap.setup({
+				bootstrap: {
+					enableMobileMenu: {if $__isLogin|empty}true{else}false{/if}
+				}
+			});
 		});
 		});
 	</script>
diff --git a/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl b/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl
new file mode 100644
index 0000000000..e47f368b84
--- /dev/null
+++ b/wcfsetup/install/files/acp/templates/pageMenuMobile.tpl
@@ -0,0 +1,78 @@
+{* main menu *}
+<div id="pageMainMenuMobile" class="pageMainMenuMobile menuOverlayMobile" data-page-logo="{$__wcf->getPath()}images/default-logo.png">
+	<ol class="menuOverlayItemList" data-title="TODO: menu">
+		<li class="menuOverlayTitle">TODO: menu</li>
+		{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=_sectionMenuItem}
+			<li class="menuOverlayItem">
+				<a href="#" class="menuOverlayItemLink box24{if $_sectionMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}">
+					<span class="icon icon24 {$_sectionMenuItem->icon}"></span>
+					<span class="menuOverlayItemTitle">{@$_sectionMenuItem}</span>
+				</a>
+				<ol class="menuOverlayItemList">
+					{foreach from=$__wcf->getACPMenu()->getMenuItems($_sectionMenuItem->menuItem) item=_menuItemCategory}
+						<li class="menuOverlayTitle">{@$_menuItemCategory}</li>
+						{foreach from=$__wcf->getACPMenu()->getMenuItems($_menuItemCategory->menuItem) item=_menuItem}
+							{assign var=_subMenuItems value=$__wcf->getACPMenu()->getMenuItems($_menuItem->menuItem)}
+							
+							{if $_subMenuItems|empty}
+								<li class="menuOverlayItem{if $_menuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><a href="{$_menuItem->getLink()}" class="menuOverlayItemLink">{@$_menuItem}</a></li>
+							{else}
+								{if $_menuItem->menuItem === 'wcf.acp.menu.link.option.category'}
+									{* handle special option categories *}
+									{foreach from=$_subMenuItems item=_subMenuItem}
+										<li class="menuOverlayItem{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><a href="{$_subMenuItem->getLink()}" class="menuOverlayItemLink">{@$_subMenuItem}</a></li>
+									{/foreach}
+								{else}
+									<li class="menuOverlayItem">
+										<a href="{$_menuItem->getLink()}" class="menuOverlayItemLink{if $_menuItem->menuItem|in_array:$_activeMenuItems && $_activeMenuItems[0] === $_menuItem->menuItem} active{/if}">{@$_menuItem}</a>
+										
+										{foreach from=$_subMenuItems item=_subMenuItem}
+											<a href="{$_subMenuItem->getLink()}" class="menuOverlayItemLinkIcon{if $_subMenuItem->menuItem|in_array:$_activeMenuItems} active{/if}"><span class="icon icon24 {$_subMenuItem->icon}"></span></a>
+										{/foreach}
+									</li>
+								{/if}
+							{/if}
+						{/foreach}
+					{/foreach}
+				</ol>
+			</li>
+		{/foreach}
+	</ol>
+</div>
+
+{* user menu *}
+<div id="pageUserMenuMobile" class="pageUserMenuMobile menuOverlayMobile" data-page-logo="{$__wcf->getPath()}images/default-logo.png">
+	<ol class="menuOverlayItemList" data-title="TODO: user menu">
+		<li class="menuOverlayTitle">TODO: user menu</li>
+		<li class="menuOverlayItem">
+			<a href="#" class="menuOverlayItemLink box24">
+				<span class="icon icon24 fa-home"></span>
+				<span class="menuOverlayItemTitle">{lang}wcf.global.jumpToPage{/lang}</span>
+			</a>
+			<ol class="menuOverlayItemList">
+				{foreach from=$__wcf->getPageMenu()->getMenuItems('header') item=_menuItem}
+					<li class="menuOverlayItem"><a href="{$_menuItem->getProcessor()->getLink()}" class="menuOverlayItemLink">{lang}{$_menuItem->menuItem}{/lang}</a></li>
+				{/foreach}
+			</ol>
+		</li>
+		<li class="menuOverlayItem">
+			<a href="#" class="menuOverlayItemLink box24">
+				<span class="icon icon24 fa-info"></span>
+				<span class="menuOverlayItemTitle">WoltLab&reg;</span>
+			</a>
+			<ol class="menuOverlayItemList">
+				<li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.website{/lang}</a></li>
+				<li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://community.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.forums{/lang}</a></li>
+				<li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://www.woltlab.com/ticket-add/"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.tickets{/lang}</a></li>
+				<li class="menuOverlayItem"><a href="{@$__wcf->getPath()}acp/dereferrer.php?url={"https://pluginstore.woltlab.com"|rawurlencode}" class="menuOverlayItemLink"{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>{lang}wcf.acp.index.woltlab.pluginStore{/lang}</a></li>
+			</ol>
+		</li>
+		<li class="menuOverlayTitle">{$__wcf->user->username}</li>
+		<li class="menuOverlayItem">
+			<a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="menuOverlayItemLink box24">
+				<span class="icon icon24 fa-sign-out"></span>
+				<span class="menuOverlayItemTitle">{lang}wcf.user.logout{/lang}</span>
+			</a>
+		</li>
+	</ol>
+</div>
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js
index eb788acfed..7cf435c317 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Bootstrap.js
@@ -6,7 +6,7 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Acp/Bootstrap
  */
-define(['WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Bootstrap, UiPageMenu) {
+define(['Core', 'WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Core, Bootstrap, UiPageMenu) {
 	"use strict";
 	
 	/**
@@ -16,10 +16,16 @@ define(['WoltLab/WCF/Bootstrap', './Ui/Page/Menu'], function(Bootstrap, UiPageMe
 		/**
 		 * Bootstraps general modules and frontend exclusive ones.
 		 * 
-		 * @param	{Object}	options		bootstrap options
+		 * @param	{Object=}	options		bootstrap options
 		 */
 		setup: function(options) {
-			Bootstrap.setup();
+			options = Core.extend({
+				bootstrap: {
+					enableMobileMenu: true
+				}
+			}, options);
+			
+			Bootstrap.setup(options.bootstrap);
 			UiPageMenu.init();
 		}
 	};
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
index 1300d76445..43a7925128 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Bootstrap.js
@@ -4,7 +4,7 @@
  * and runs modules that are needed on page load.
  * 
  * @author	Tim Duesterhus
- * @copyright	2001-2015 WoltLab GmbH
+ * @copyright	2001-2016 WoltLab GmbH
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Bootstrap
  */
@@ -13,13 +13,13 @@ define(
 		'favico',                  'enquire',                'perfect-scrollbar',      'WoltLab/WCF/Date/Time/Relative',
 		'Ui/SimpleDropdown',       'WoltLab/WCF/Ui/Mobile',  'WoltLab/WCF/Ui/TabMenu', 'WoltLab/WCF/Ui/FlexibleMenu',
 		'Ui/Dialog',               'WoltLab/WCF/Ui/Tooltip', 'WoltLab/WCF/Language',   'WoltLab/WCF/Environment',
-		'WoltLab/WCF/Date/Picker', 'EventHandler'
+		'WoltLab/WCF/Date/Picker', 'EventHandler',           'Core'
 	], 
 	function(
 		 favico,                   enquire,                  perfectScrollbar,         DateTimeRelative,
 		 UiSimpleDropdown,         UiMobile,                 UiTabMenu,                UiFlexibleMenu,
 		 UiDialog,                 UiTooltip,                Language,                 Environment,
-		 DatePicker,               EventHandler
+		 DatePicker,               EventHandler,             Core
 	)
 {
 	"use strict";
@@ -40,18 +40,26 @@ define(
 	/**
 	 * @exports	WoltLab/WCF/Bootstrap
 	 */
-	var Bootstrap = {
+	return {
 		/**
 		 * Initializes the core UI modifications and unblocks jQuery's ready event.
+		 * 
+		 * @param       {Object=}       options         initialization options
 		 */
-		setup: function() {
+		setup: function(options) {
+			options = Core.extend({
+				enableMobileMenu: true
+			}, options);
+			
 			Environment.setup();
 			
 			DateTimeRelative.setup();
 			DatePicker.init();
 			
 			UiSimpleDropdown.setup();
-			UiMobile.setup();
+			UiMobile.setup({
+				enableMobileMenu: options.enableMobileMenu
+			});
 			UiTabMenu.setup();
 			//UiFlexibleMenu.setup();
 			UiDialog.setup();
@@ -80,6 +88,4 @@ define(
 			}, 20);
 		}
 	};
-	
-	return Bootstrap;
 });
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
index ff41be0b28..1c63da83ff 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Mobile.js
@@ -7,14 +7,15 @@
  * @module	WoltLab/WCF/Ui/Mobile
  */
 define(
-	[       'Environment', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
-	function(Environment,   Language,   DomChangeListener,    UiCloseOverlay,    UiScreen,    UiPageMenuMain,     UiPageMenuUser)
+	[        'Core', 'Environment', 'Language', 'Dom/ChangeListener', 'Ui/CloseOverlay', 'Ui/Screen', './Page/Menu/Main', './Page/Menu/User'],
+	function(Core,    Environment,   Language,   DomChangeListener,    UiCloseOverlay,    UiScreen,    UiPageMenuMain,     UiPageMenuUser)
 {
 	"use strict";
 	
 	var _buttonGroupNavigations = null;
 	var _enabled = false;
 	var _main = null;
+	var _options = {};
 	var _pageMenuMain = null;
 	var _pageMenuUser = null;
 	var _sidebar = null;
@@ -24,9 +25,15 @@ define(
 	 */
 	return {
 		/**
-		 * Initializes the mobile UI using enquire.js.
+		 * Initializes the mobile UI.
+		 * 
+		 * @param       {Object=}       options         initialization options
 		 */
-		setup: function() {
+		setup: function(options) {
+			_options = Core.extend({
+				enableMobileMenu: true
+			}, options);
+			
 			_buttonGroupNavigations = elByClass('buttonGroupNavigation');
 			_main = elById('main');
 			_sidebar = elBySel('#main > div > div > .sidebar', _main);
@@ -52,8 +59,10 @@ define(
 		enable: function() {
 			_enabled = true;
 			
-			_pageMenuMain.enable();
-			_pageMenuUser.enable();
+			if (_options.enableMobileMenu) {
+				_pageMenuMain.enable();
+				_pageMenuUser.enable();
+			}
 		},
 		
 		/**
@@ -62,8 +71,10 @@ define(
 		disable: function() {
 			_enabled = false;
 			
-			_pageMenuMain.disable();
-			_pageMenuUser.disable();
+			if (_options.enableMobileMenu) {
+				_pageMenuMain.disable();
+				_pageMenuUser.disable();
+			}
 		},
 		
 		_init: function() {
@@ -165,8 +176,10 @@ define(
 		},
 		
 		_initMobileMenu: function() {
-			_pageMenuMain = new UiPageMenuMain();
-			_pageMenuUser = new UiPageMenuUser();
+			if (_options.enableMobileMenu) {
+				_pageMenuMain = new UiPageMenuMain();
+				_pageMenuUser = new UiPageMenuUser();
+			}
 		},
 		
 		_closeAllMenus: function() {
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
index 46ad9b68a6..526c8035fa 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Menu/Abstract.js
@@ -127,13 +127,27 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Ui/Screen']
 		 * @protected
 		 */
 		_initItem: function(item) {
-			var itemList = item.nextElementSibling;
+			var itemList = item.nextElementSibling, parent = item.parentNode, wrapper;
 			if (itemList === null) {
 				return;
 			}
 			
+			// handle static items with an icon-type button next to it (acp menu)
+			if (itemList.nodeName !== 'OL' && itemList.classList.contains('menuOverlayItemLinkIcon')) {
+				// add wrapper
+				wrapper = elCreate('span');
+				wrapper.className = 'menuOverlayItemWrapper';
+				parent.insertBefore(wrapper, item);
+				wrapper.appendChild(item);
+				
+				while (wrapper.nextElementSibling) {
+					wrapper.appendChild(wrapper.nextElementSibling);
+				}
+				
+				return;
+			}
+			
 			var isLink = (elAttr(item, 'href') !== '#');
-			var parent = item.parentNode;
 			var parentItemList = parent.parentNode;
 			var itemTitle = elData(itemList, 'title');
 			
@@ -147,7 +161,7 @@ define(['Environment', 'EventHandler', 'ObjectMap', 'Dom/Traverse', 'Ui/Screen']
 				elData(itemList, 'title', itemTitle);
 			}
 			
-			var callbackLink = this._showItemList.bind(this, item), wrapper;
+			var callbackLink = this._showItemList.bind(this, item);
 			if (isLink) {
 				wrapper = elCreate('span');
 				wrapper.className = 'menuOverlayItemWrapper';
diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index c48120ab05..c7ba512486 100644
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -18,6 +18,10 @@
 		top: 0;
 		right: 0;
 		z-index: 301;
+		
+		@include small-screen-only {
+			max-width: 100vw;
+		}
 	}
 	
 	@include large-screen-only {
diff --git a/wcfsetup/install/files/style/ui/menuMobile.scss b/wcfsetup/install/files/style/ui/menuMobile.scss
index 5615ef45b2..fa51ed543f 100644
--- a/wcfsetup/install/files/style/ui/menuMobile.scss
+++ b/wcfsetup/install/files/style/ui/menuMobile.scss
@@ -26,6 +26,7 @@
 .menuOverlayMobile {
 	bottom: 0;
 	left: 0;
+	max-width: 100vw;
 	overflow: hidden;
 	position: fixed;
 	right: 0;
-- 
2.20.1