Collapse main menu on mobile (#3104)

web/css/src/themes/dark.css

@@ -118,35 +118,29 @@ strong {
 	color: #e7e7e7;
 }
 
-/* Alerts
+/* Main menu
    ========================================================================== */
 
-.alert-danger {
-	background-color: #d13535;
+.main-menu-toggle {
+	&:hover {
+		& .main-menu-toggle-label {
+			color: #d7d7d7;
+		}
+	}
 
 	& .fas {
-		color: #d13535;
+		color: #d7d7d7;
 	}
 }
 
-/* Cards
-   ========================================================================== */
-
-.card {
-	background: #454545;
-	color: #fafafa;
-	text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
-	border-color: #606060;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
+.main-menu-toggle-label {
+	color: #bcbcbc;
 }
 
-.card-title {
-	color: #fafafa;
+.main-menu-list {
+	border-top-color: #454545;
 }
 
-/* Main menu
-   ========================================================================== */
-
 .main-menu-item-link {
 	&:hover {
 		& .main-menu-item-label {
@@ -186,6 +180,32 @@ strong {
 	}
 }
 
+/* Alerts
+   ========================================================================== */
+
+.alert-danger {
+	background-color: #d13535;
+
+	& .fas {
+		color: #d13535;
+	}
+}
+
+/* Cards
+   ========================================================================== */
+
+.card {
+	background: #454545;
+	color: #fafafa;
+	text-shadow: 0 1px rgb(0 0 0 / 95%) !important;
+	border-color: #606060;
+	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 60px rgb(0 0 0 / 25%);
+}
+
+.card-title {
+	color: #fafafa;
+}
+
 .toolbar {
 	border-color: #454545;
 	background-color: #282828;

web/css/src/themes/default.css

@@ -374,6 +374,153 @@
 	}
 }
 
+/* Main menu
+   ========================================================================== */
+
+.main-menu {
+	@media (--viewport-medium) {
+		padding-top: 10px;
+	}
+}
+
+.main-menu-toggle {
+	border: 0;
+	background-color: transparent;
+	padding: 10px;
+	display: block;
+	width: 100%;
+
+	&:hover {
+		background-color: rgb(0 0 0 / 5%);
+
+		& .main-menu-toggle-label {
+			color: #c36;
+		}
+	}
+
+	& .fas {
+		color: #999;
+		margin-right: 5px;
+	}
+
+	@media (--viewport-small) {
+		display: none;
+	}
+}
+
+.main-menu-toggle-label {
+	color: #5b5b5b;
+	font-weight: 600;
+}
+
+.main-menu-list {
+	display: none;
+	border-top: 1px solid #ddd;
+
+	@media (--viewport-small) {
+		border-top: 0;
+		display: flex !important; /* NOTE: Overrides inline style set by JS */
+		justify-content: space-evenly;
+	}
+}
+
+.main-menu-item {
+	@media (--viewport-small) {
+		flex-grow: 1;
+	}
+
+	@media (--viewport-medium) {
+		flex-grow: 0;
+		display: flex;
+
+		&.focus {
+			& .main-menu-item-link {
+				border-bottom-color: #5edad0;
+			}
+
+			& .main-menu-item-label {
+				color: #5edad0;
+			}
+		}
+	}
+}
+
+.main-menu-item-link {
+	display: block;
+	text-align: center;
+	padding: 10px;
+
+	&:hover {
+		background-color: rgb(0 0 0 / 5%);
+
+		& .main-menu-item-label {
+			color: #c36;
+		}
+	}
+
+	&.active {
+		& .main-menu-item-label {
+			color: #c36;
+
+			& .fas {
+				color: #c36;
+			}
+		}
+	}
+
+	@media (--viewport-small) {
+		padding-top: 20px;
+		padding-bottom: 20px;
+	}
+
+	@media (--viewport-medium) {
+		border-bottom: 4px solid #fff;
+
+		&:hover,
+		&.active {
+			background-color: transparent;
+			border-bottom-color: #c36;
+			transition: 0.3s;
+		}
+	}
+
+	@media (--viewport-large) {
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+}
+
+.main-menu-item-label {
+	color: #5b5b5b;
+	font-weight: 600;
+
+	& .fas {
+		color: #999;
+		margin-left: 5px;
+	}
+
+	@media (--viewport-medium) {
+		font-size: 1rem;
+
+		& .fas {
+			margin-left: 10px;
+		}
+	}
+}
+
+.main-menu-stats {
+	display: none;
+
+	@media (--viewport-medium) {
+		display: block;
+		font-size: 0.75rem;
+		text-transform: lowercase;
+		line-height: 1.8;
+		padding-top: 10px;
+		padding-bottom: 10px;
+	}
+}
+
 /* Alerts
    ========================================================================== */
 
@@ -507,102 +654,6 @@
 	}
 }
 
-/* Main menu
-   ========================================================================== */
-
-.main-menu {
-	margin-top: 10px;
-	margin-bottom: 10px;
-
-	@media (--viewport-medium) {
-		margin-top: 20px;
-		margin-bottom: 0;
-	}
-}
-
-.main-menu-list {
-	@media (--viewport-medium) {
-		display: flex;
-		justify-content: space-evenly;
-	}
-}
-
-.main-menu-item {
-	@media (--viewport-medium) {
-		display: flex;
-
-		&.focus {
-			& .main-menu-item-link {
-				border-bottom-color: #5edad0;
-			}
-
-			& .main-menu-item-label {
-				color: #5edad0;
-			}
-		}
-	}
-}
-
-.main-menu-item-link {
-	display: block;
-	text-align: center;
-	padding: 10px;
-
-	&:hover {
-		& .main-menu-item-label {
-			color: #c36;
-		}
-	}
-
-	&.active {
-		& .main-menu-item-label {
-			color: #c36;
-
-			& .fas {
-				color: #c36;
-			}
-		}
-	}
-
-	@media (--viewport-medium) {
-		border-bottom: 4px solid #fff;
-
-		&:hover,
-		&.active {
-			border-bottom-color: #c36;
-			transition: 0.3s;
-		}
-	}
-
-	@media (--viewport-large) {
-		padding-left: 30px;
-		padding-right: 30px;
-	}
-}
-
-.main-menu-item-label {
-	color: #5b5b5b;
-	font-weight: 600;
-	font-size: 1rem;
-
-	& .fas {
-		color: #999;
-	}
-}
-
-.main-menu-stats {
-	display: none;
-
-	@media (--viewport-medium) {
-		display: block;
-		font-size: 0.75rem;
-		text-transform: lowercase;
-		line-height: 1.8;
-		padding-top: 10px;
-		padding-bottom: 20px;
-	}
-}
-
 .toolbar {
 	background-color: #fff;
 	border-top: 1px solid #ddd;

web/css/src/themes/vestia.css

@@ -66,6 +66,43 @@ strong {
 	}
 }
 
+/* Main menu
+   ========================================================================== */
+
+.main-menu-item-link {
+	&:hover {
+		& .main-menu-item-label {
+			color: #ff791f;
+		}
+	}
+
+	&.active {
+		& .main-menu-item-label {
+			color: #ff791f;
+		}
+	}
+
+	& .fas {
+		display: none;
+	}
+
+	@media (--viewport-medium) {
+		text-align: left;
+
+		&:hover {
+			border-bottom-color: #ff791f;
+		}
+
+		&.active {
+			border-bottom-color: #ff791f;
+		}
+	}
+}
+
+.main-menu-item-label {
+	font-size: 0.9rem;
+}
+
 .table-header {
 	box-shadow: none;
 	background: #fafafa;
@@ -188,43 +225,6 @@ strong {
 	border-radius: 0;
 }
 
-/* Main menu
-   ========================================================================== */
-
-.main-menu-item-link {
-	&:hover {
-		& .main-menu-item-label {
-			color: #ff791f;
-		}
-	}
-
-	&.active {
-		& .main-menu-item-label {
-			color: #ff791f;
-		}
-	}
-
-	& .fas {
-		display: none;
-	}
-
-	@media (--viewport-medium) {
-		text-align: left;
-
-		&:hover {
-			border-bottom-color: #ff791f;
-		}
-
-		&.active {
-			border-bottom-color: #ff791f;
-		}
-	}
-}
-
-.main-menu-item-label {
-	font-size: 0.9rem;
-}
-
 .form-control:focus {
 	border-color: #ff6701;
 	background-color: #fff4ed;

web/js/init.js

@@ -696,6 +696,21 @@ $(document).ready(function () {
 		$(this).siblings('.top-bar-menu-list').toggle();
 	});
 
+	$('.js-toggle-main-menu').click(function (evt) {
+		var $mainMenuList = $('.main-menu-list');
+		var $toggleLabel = $('.main-menu-toggle-label');
+		var openLabel = $toggleLabel.data('open-label');
+		var closeLabel = $toggleLabel.data('close-label');
+
+		$mainMenuList.slideToggle(200, function () {
+			if ($mainMenuList.is(':visible')) {
+				$toggleLabel.text(closeLabel);
+			} else {
+				$toggleLabel.text(openLabel);
+			}
+		});
+	});
+
 	$('.button.cancel').attr('title', 'ctrl+Backspace');
 
 	VE.core.register();

web/templates/includes/panel.php

@@ -159,6 +159,12 @@
 
 	<nav class="main-menu">
 		<div class="container">
+			<button type="button" class="main-menu-toggle js-toggle-main-menu">
+				<i class="fas fa-bars"></i>
+				<span class="main-menu-toggle-label" data-open-label="<?=_('Expand main menu');?>" data-close-label="<?=_('Collapse main menu');?>">
+					<?=_('Expand main menu');?>
+				</span>
+			</button>
 			<ul class="main-menu-list">
 
 				<!-- Users tab -->
@@ -172,7 +178,7 @@
 					?>
 					<li class="main-menu-item">
 						<a class="main-menu-item-link <?php if(in_array($TAB, ['USER', 'LOG'])) echo 'active' ?>" href="/list/user/" title="<?=_('Users');?>: <?=$user_count;?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_USERS']?>">
-							<p class="main-menu-item-label"><?=_('USER');?><i class="fas fa-users u-ml10"></i></p>
+							<p class="main-menu-item-label"><?=_('USER');?><i class="fas fa-users"></i></p>
 							<ul class="main-menu-stats">
 								<li>
 									<?=_('users');?>: <span><?=htmlspecialchars($user_count);?></span>
@@ -190,7 +196,7 @@
 					<?php if($panel[$user]['WEB_DOMAINS'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'WEB') echo 'active' ?>" href="/list/web/" title="<?=_('Domains');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Aliases');?>: <?=$panel[$user]['U_WEB_ALIASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['WEB_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_WEB']?>">
-								<p class="main-menu-item-label"><?=_('WEB');?><i class="fas fa-earth-americas u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('WEB');?><i class="fas fa-earth-americas"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('domains');?>: <span><?=$panel[$user]['U_WEB_DOMAINS']?> / <?=$panel[$user]['WEB_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['WEB_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_WEB']?>)</span>
@@ -209,7 +215,7 @@
 					<?php if($panel[$user]['DNS_DOMAINS'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'DNS') echo 'active' ?>" href="/list/dns/" title="<?=_('Domains');?>: <?=$panel[$user]['U_DNS_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['DNS_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DNS']?>">
-								<p class="main-menu-item-label"><?=_('DNS');?><i class="fas fa-book-atlas u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('DNS');?><i class="fas fa-book-atlas"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('zones');?>: <span><?=$panel[$user]['U_DNS_DOMAINS']?> / <?=$panel[$user]['DNS_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DNS_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_DNS']?>)</span>
@@ -228,7 +234,7 @@
 					<?php if($panel[$user]['MAIL_DOMAINS'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'MAIL') echo 'active' ?>" href="/list/mail/" title="<?=_('Domains');?>: <?=$panel[$user]['U_MAIL_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "∞" : $panel[$user]['MAIL_DOMAINS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_MAIL']?>">
-								<p class="main-menu-item-label"><?=_('MAIL');?><i class="fas fa-envelopes-bulk u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('MAIL');?><i class="fas fa-envelopes-bulk"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('domains');?>: <span><?=$panel[$user]['U_MAIL_DOMAINS']?> / <?=$panel[$user]['MAIL_DOMAINS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['MAIL_DOMAINS']?> (<?=$panel[$user]['SUSPENDED_MAIL']?>)</span>
@@ -247,7 +253,7 @@
 					<?php if($panel[$user]['DATABASES'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'DB') echo 'active' ?>" href="/list/db/" title="<?=_('Databases');?>: <?=$panel[$user]['U_DATABASES']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['DATABASES']=='unlimited' ? "∞" : $panel[$user]['DATABASES']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_DB']?>">
-								<p class="main-menu-item-label"><?=_('DB');?><i class="fas fa-database u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('DB');?><i class="fas fa-database"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('databases');?>: <span><?=$panel[$user]['U_DATABASES']?> / <?=$panel[$user]['DATABASES']=='unlimited' ? "<b>∞</b>" : $panel[$user]['DATABASES']?> (<?=$panel[$user]['SUSPENDED_DB']?>)</span>
@@ -263,7 +269,7 @@
 					<?php if($panel[$user]['CRON_JOBS'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'CRON') echo 'active' ?>" href="/list/cron/" title="<?=_('Jobs');?>: <?=$panel[$user]['U_WEB_DOMAINS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "∞" : $panel[$user]['CRON_JOBS']?>&#13;<?=_('Suspended');?>: <?=$panel[$user]['SUSPENDED_CRON']?>">
-								<p class="main-menu-item-label"><?=_('CRON');?><i class="fas fa-clock u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('CRON');?><i class="fas fa-clock"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('jobs');?>: <span><?=$panel[$user]['U_CRON_JOBS']?> / <?=$panel[$user]['CRON_JOBS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['CRON_JOBS']?> (<?=$panel[$user]['SUSPENDED_CRON']?>)</span>
@@ -279,7 +285,7 @@
 					<?php if($panel[$user]['BACKUPS'] != "0") { ?>
 						<li class="main-menu-item">
 							<a class="main-menu-item-link <?php if($TAB == 'BACKUP') echo 'active' ?>" href="/list/backup/" title="<?=_('Backups');?>: <?=$panel[$user]['U_BACKUPS']?>&#13;<?=_('Limit')?>: <?=$panel[$user]['BACKUPS']=='unlimited' ? "∞" : $panel[$user]['BACKUPS']?>">
-								<p class="main-menu-item-label"><?=_('BACKUP');?><i class="fas fa-file-zipper u-ml10"></i></p>
+								<p class="main-menu-item-label"><?=_('BACKUP');?><i class="fas fa-file-zipper"></i></p>
 								<ul class="main-menu-stats">
 									<li>
 										<?=_('backups');?>: <span><?=$panel[$user]['U_BACKUPS']?> / <?=$panel[$user]['BACKUPS']=='unlimited' ? "<b>∞</b>" : $panel[$user]['BACKUPS']?></span>