Full width top bar dropdowns on mobile (#3765)

* Improve consistency of top bar dropdowns HTML

And fix "click away to close" not working on List Server Info and List Weblog.

* Refactor top bar dropdowns to be full width on mobile

web/css/src/themes/dark.css

@@ -51,7 +51,10 @@
 
 .top-bar-notifications-panel {
 	background-color: rgb(50 50 50 / 99%);
-	border: 1px solid #404040;
+
+	@media (--viewport-small) {
+		border-color: #404040;
+	}
 }
 
 .top-bar-notifications-empty {
@@ -82,7 +85,7 @@
 	border-top-color: #282828;
 }
 
-.top-bar-menu-list {
+.top-bar-menu-panel {
 	background-color: #454545;
 }
 

web/css/src/themes/default.css

@@ -137,26 +137,32 @@
 
 .top-bar-notifications {
 	display: flex;
-	position: relative;
+
+	@media (--viewport-small) {
+		position: relative;
+	}
 }
 
 .top-bar-notifications-panel {
 	background-color: #fff;
 	box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
-	max-height: 500px;
+	max-height: 50vh;
 	overflow-y: auto;
 	position: absolute;
 	top: 100%;
-	right: 0;
-	width: 280px;
+	left: 0;
+	width: 100%;
 	z-index: 1;
-	border-bottom-left-radius: 6px;
-	border-bottom-right-radius: 6px;
-	border: 1px solid #fff;
-	border-top: none;
 
 	@media (--viewport-small) {
-		width: 330px;
+		left: initial;
+		right: 0;
+		width: 350px;
+		max-height: 500px;
+		border-bottom-left-radius: 6px;
+		border-bottom-right-radius: 6px;
+		border: 1px solid #fff;
+		border-top: none;
 	}
 
 	@media (--viewport-medium) {
@@ -180,7 +186,7 @@
 	color: #6f6f6f;
 	font-size: 0.8rem;
 	border-bottom: 1px solid #e9e4e4;
-	padding: 15px;
+	padding: 15px 20px;
 
 	&:last-child {
 		border-bottom: none;
@@ -199,6 +205,11 @@
 	& a {
 		font-weight: 600;
 	}
+
+	@media (--viewport-small) {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
 }
 
 .top-bar-notification-timestamp {
@@ -279,24 +290,59 @@
 
 .top-bar-menu {
 	display: flex;
-	position: relative;
+
+	@media (--viewport-small) {
+		position: relative;
+	}
 }
 
-.top-bar-menu-list {
+.top-bar-menu-panel {
 	display: block;
 	background-color: #4673b6;
 	box-shadow: 0 3px 20px 0 rgb(0 0 0 / 40%);
 	position: absolute;
 	top: 100%;
-	right: 0;
-	animation-duration: var(--animate-duration);
+	left: 0;
+	width: 100%;
+	z-index: 1;
+
+	@media (--viewport-small) {
+		left: initial;
+		right: 0;
+		width: 350px;
+		border-bottom-left-radius: 6px;
+		border-bottom-right-radius: 6px;
+	}
 
 	@media (--viewport-medium) {
 		display: flex !important; /* NOTE: Overrides inline style set by JS */
+		width: auto;
 		background-color: transparent;
 		box-shadow: none;
 		position: static;
-		animation-duration: 0s;
+	}
+}
+
+.top-bar-menu-list {
+	& .top-bar-menu-link {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+
+	@media (--viewport-small) {
+		& .top-bar-menu-link {
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+	}
+
+	@media (--viewport-medium) {
+		display: flex;
+
+		& .top-bar-menu-link {
+			padding-left: 10px;
+			padding-right: 10px;
+		}
 	}
 }
 
@@ -371,7 +417,6 @@
 
 .top-bar-menu-link-label {
 	margin-left: 6px;
-	white-space: nowrap;
 
 	@media (--viewport-medium) {
 		display: none;

web/css/src/themes/flat.css

@@ -25,8 +25,10 @@
 }
 
 .top-bar-notifications-panel {
-	box-shadow: none;
-	border-color: #ccc;
+	@media (--viewport-small) {
+		box-shadow: none;
+		border-color: #ccc;
+	}
 }
 
 .top-bar-menu-link {

web/css/src/themes/vestia.css

@@ -30,10 +30,12 @@ h1 {
 }
 
 .top-bar-notifications-panel {
-	border-color: #ccc;
-	border-bottom-left-radius: 2px;
-	border-bottom-right-radius: 2px;
-	box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
+	@media (--viewport-small) {
+		box-shadow: 0 2px 10px 0 rgb(0 0 0 / 25%);
+		border-color: #ccc;
+		border-bottom-left-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
 }
 
 .top-bar-notification-item {
@@ -48,7 +50,7 @@ h1 {
 	}
 }
 
-.top-bar-menu-list {
+.top-bar-menu-panel {
 	background-color: #5d5d5d;
 }
 

web/templates/includes/panel.php

@@ -149,91 +149,93 @@
 						</span>
 					</button>
 
-					<ul x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-list">
+					<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
+						<ul class="top-bar-menu-list">
 
-						<!-- File Manager -->
-						<?php if (isset($_SESSION["FILE_MANAGER"]) && !empty($_SESSION["FILE_MANAGER"]) && $_SESSION["FILE_MANAGER"] == "true") { ?>
-							<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $_SESSION["look"] === "admin" && $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] == "yes")) { ?>
-								<!-- Hide file manager when impersonating admin-->
-							<?php } else { ?>
-								<li class="top-bar-menu-item">
-									<a title="<?= _("File manager") ?>" class="top-bar-menu-link <?php if ($TAB == 'FM') echo 'active' ?>" href="/fm/">
-										<i class="fas fa-folder-open"></i>
-										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("File manager") ?></span>
-									</a>
-								</li>
+							<!-- File Manager -->
+							<?php if (isset($_SESSION["FILE_MANAGER"]) && !empty($_SESSION["FILE_MANAGER"]) && $_SESSION["FILE_MANAGER"] == "true") { ?>
+								<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $_SESSION["look"] === "admin" && $_SESSION["POLICY_SYSTEM_PROTECTED_ADMIN"] == "yes")) { ?>
+									<!-- Hide file manager when impersonating admin-->
+								<?php } else { ?>
+									<li class="top-bar-menu-item">
+										<a title="<?= _("File manager") ?>" class="top-bar-menu-link <?php if ($TAB == 'FM') echo 'active' ?>" href="/fm/">
+											<i class="fas fa-folder-open"></i>
+											<span class="top-bar-menu-link-label u-hide-desktop"><?= _("File manager") ?></span>
+										</a>
+									</li>
+								<?php } ?>
 							<?php } ?>
-						<?php } ?>
 
-						<!-- Server Settings -->
-						<?php if (($_SESSION["userContext"] === "admin" && $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes") || $_SESSION["user"] === "admin") { ?>
-							<?php if ($_SESSION["userContext"] === "admin" && !empty($_SESSION["look"])) { ?>
-								<!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
-							<?php } else { ?>
+							<!-- Server Settings -->
+							<?php if (($_SESSION["userContext"] === "admin" && $_SESSION["POLICY_SYSTEM_HIDE_SERVICES"] !== "yes") || $_SESSION["user"] === "admin") { ?>
+								<?php if ($_SESSION["userContext"] === "admin" && !empty($_SESSION["look"])) { ?>
+									<!-- Hide 'Server Settings' button when impersonating 'admin' or other users -->
+								<?php } else { ?>
+									<li class="top-bar-menu-item">
+										<a title="<?= _("Server settings") ?>" class="top-bar-menu-link <?php if (in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
+											<i class="fas fa-gear"></i>
+											<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server settings") ?></span>
+										</a>
+									</li>
+								<?php } ?>
+							<?php } ?>
+
+							<!-- Edit User -->
+							<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $user == "admin")) { ?>
+								<!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
 								<li class="top-bar-menu-item">
-									<a title="<?= _("Server settings") ?>" class="top-bar-menu-link <?php if (in_array($TAB, ['SERVER', 'IP', 'RRD', 'FIREWALL'])) echo 'active' ?>" href="/list/server/">
-										<i class="fas fa-gear"></i>
-										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Server settings") ?></span>
+									<a title="<?= _("Logs") ?>" class="top-bar-menu-link <?php if ($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
+										<i class="fas fa-clock-rotate-left"></i>
+										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Logs") ?></span>
 									</a>
 								</li>
+							<?php } else { ?>
+								<?php if ($panel[$user]["SUSPENDED"] === "no") { ?>
+									<li class="top-bar-menu-item">
+										<a title="<?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)" class="top-bar-menu-link" href="/edit/user/?user=<?= $user ?>&token=<?= $_SESSION["token"] ?>">
+											<i class="fas fa-circle-user"></i>
+											<span class="top-bar-menu-link-label u-hide-desktop"><?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)</span>
+										</a>
+									</li>
+								<?php } ?>
 							<?php } ?>
-						<?php } ?>
 
-						<!-- Edit User -->
-						<?php if ($_SESSION["userContext"] === "admin" && (isset($_SESSION["look"]) && $user == "admin")) { ?>
-							<!-- Hide 'edit user' entry point from other administrators for default 'admin' account-->
+							<!-- Statistics -->
 							<li class="top-bar-menu-item">
-								<a title="<?= _("Logs") ?>" class="top-bar-menu-link <?php if ($TAB == 'LOG') echo 'active' ?>" href="/list/log/">
-									<i class="fas fa-clock-rotate-left"></i>
-									<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Logs") ?></span>
+								<a title="<?= _("Statistics") ?>" class="top-bar-menu-link <?php if ($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
+									<i class="fas fa-chart-line"></i>
+									<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Statistics") ?></span>
 								</a>
 							</li>
-						<?php } else { ?>
-							<?php if ($panel[$user]["SUSPENDED"] === "no") { ?>
+							<?php if ( $_SESSION['HIDE_DOCS'] != 'yes'){
+							?>
+								<!-- Help / Documentation -->
 								<li class="top-bar-menu-item">
-									<a title="<?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)" class="top-bar-menu-link" href="/edit/user/?user=<?= $user ?>&token=<?= $_SESSION["token"] ?>">
-										<i class="fas fa-circle-user"></i>
-										<span class="top-bar-menu-link-label u-hide-desktop"><?= htmlspecialchars($user) ?> (<?= htmlspecialchars($panel[$user]["NAME"]) ?>)</span>
+									<a title="<?= _("Help") ?>" class="top-bar-menu-link" href="https://hestiacp.com/docs/" target="_blank" rel="noopener">
+										<i class="fas fa-circle-question"></i>
+										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Help") ?></span>
+									</a>
+								</li>
+							<?php } ?>
+							<!-- Logout -->
+							<?php if (isset($_SESSION["look"]) && !empty($_SESSION["look"])) { ?>
+								<li class="top-bar-menu-item">
+									<a title="<?= _("Log out") ?> (<?= $user ?>)" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
+										<i class="fas fa-circle-up"></i>
+										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?> (<?= $user ?>)</span>
+									</a>
+								</li>
+							<?php } else { ?>
+								<li class="top-bar-menu-item">
+									<a title="<?= _("Log out") ?>" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
+										<i class="fas fa-right-from-bracket"></i>
+										<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?></span>
 									</a>
 								</li>
 							<?php } ?>
-						<?php } ?>
-
-						<!-- Statistics -->
-						<li class="top-bar-menu-item">
-							<a title="<?= _("Statistics") ?>" class="top-bar-menu-link <?php if ($TAB == 'STATS') echo 'active' ?>" href="/list/stats/">
-								<i class="fas fa-chart-line"></i>
-								<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Statistics") ?></span>
-							</a>
-						</li>
-						<?php if ( $_SESSION['HIDE_DOCS'] != 'yes'){
-						?>
-							<!-- Help / Documentation -->
-							<li class="top-bar-menu-item">
-								<a title="<?= _("Help") ?>" class="top-bar-menu-link" href="https://hestiacp.com/docs/" target="_blank" rel="noopener">
-									<i class="fas fa-circle-question"></i>
-									<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Help") ?></span>
-								</a>
-							</li>
-						<?php } ?>
-						<!-- Logout -->
-						<?php if (isset($_SESSION["look"]) && !empty($_SESSION["look"])) { ?>
-							<li class="top-bar-menu-item">
-								<a title="<?= _("Log out") ?> (<?= $user ?>)" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
-									<i class="fas fa-circle-up"></i>
-									<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?> (<?= $user ?>)</span>
-								</a>
-							</li>
-						<?php } else { ?>
-							<li class="top-bar-menu-item">
-								<a title="<?= _("Log out") ?>" class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>">
-									<i class="fas fa-right-from-bracket"></i>
-									<span class="top-bar-menu-link-label u-hide-desktop"><?= _("Log out") ?></span>
-								</a>
-							</li>
-						<?php } ?>
 
-					</ul>
+						</ul>
+					</div>
 				</nav>
 
 			</div>

web/templates/pages/list_server_info.php

@@ -28,82 +28,84 @@
 								<?= _("Open menu") ?>
 							</span>
 						</button>
-						<ul x-cloak x-show="open" class="top-bar-menu-list">
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link" href="/list/rrd/" title="<?= _("Back") ?>">
-									<i class="fas fa-circle-left"></i>
-									<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if (isset($_GET['cpu'])) echo 'active' ?>" href="/list/server/?cpu">
-									<i class="fas fa-microchip"></i>
-									<span class="top-bar-menu-link-label"><?= _("CPU") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if (isset($_GET['mem'])) echo 'active' ?>" href="/list/server/?mem">
-									<i class="fas fa-memory"></i>
-									<span class="top-bar-menu-link-label"><?= _("RAM") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if (isset($_GET['disk'])) echo 'active' ?>" href="/list/server/?disk">
-									<i class="fas fa-hard-drive"></i>
-									<span class="top-bar-menu-link-label"><?= _("Disk") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if (isset($_GET['net'])) echo 'active' ?>" href="/list/server/?net">
-									<i class="fas fa-hard-drive"></i>
-									<span class="top-bar-menu-link-label"><?= _("Network") ?></span>
-								</a>
-							</li>
-							<?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) { ?>
+						<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
+							<ul class="top-bar-menu-list">
 								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['web'])) echo 'active' ?>" href="/list/server/?web">
-										<i class="fas fa-earth-europe"></i>
-										<span class="top-bar-menu-link-label"><?= _("Web") ?></span>
+									<a class="top-bar-menu-link" href="/list/rrd/" title="<?= _("Back") ?>">
+										<i class="fas fa-circle-left"></i>
+										<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
 									</a>
 								</li>
-							<?php } ?>
-							<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) { ?>
 								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['dns'])) echo 'active' ?>" href="/list/server/?dns">
-										<i class="fas fa-book-atlas"></i>
-										<span class="top-bar-menu-link-label"><?= _("DNS") ?></span>
+									<a class="top-bar-menu-link <?php if (isset($_GET['cpu'])) echo 'active' ?>" href="/list/server/?cpu">
+										<i class="fas fa-microchip"></i>
+										<span class="top-bar-menu-link-label"><?= _("CPU") ?></span>
 									</a>
 								</li>
-							<?php } ?>
-							<?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) { ?>
 								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['mail'])) echo 'active' ?>" href="/list/server/?mail">
-										<i class="fas fa-envelopes-bulk"></i>
-										<span class="top-bar-menu-link-label"><?= _("Mail") ?></span>
+									<a class="top-bar-menu-link <?php if (isset($_GET['mem'])) echo 'active' ?>" href="/list/server/?mem">
+										<i class="fas fa-memory"></i>
+										<span class="top-bar-menu-link-label"><?= _("RAM") ?></span>
 									</a>
 								</li>
-							<?php } ?>
-							<?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) { ?>
 								<li class="top-bar-menu-item">
-									<a class="top-bar-menu-link <?php if (isset($_GET['db'])) echo 'active' ?>" href="/list/server/?db">
-										<i class="fas fa-database"></i>
-										<span class="top-bar-menu-link-label"><?= _("DB") ?></span>
+									<a class="top-bar-menu-link <?php if (isset($_GET['disk'])) echo 'active' ?>" href="/list/server/?disk">
+										<i class="fas fa-hard-drive"></i>
+										<span class="top-bar-menu-link-label"><?= _("Disk") ?></span>
 									</a>
 								</li>
-							<?php } ?>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
-									<i class="fas fa-arrow-rotate-right"></i>
-									<span class="u-hidden"><?= _("Refresh") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
-									<i class="fas fa-right-from-bracket"></i>
-									<span class="u-hidden"><?= _("Log out") ?></span>
-								</a>
-							</li>
-						</ul>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link <?php if (isset($_GET['net'])) echo 'active' ?>" href="/list/server/?net">
+										<i class="fas fa-hard-drive"></i>
+										<span class="top-bar-menu-link-label"><?= _("Network") ?></span>
+									</a>
+								</li>
+								<?php if ((isset($_SESSION['WEB_SYSTEM'])) && (!empty($_SESSION['WEB_SYSTEM']))) { ?>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if (isset($_GET['web'])) echo 'active' ?>" href="/list/server/?web">
+											<i class="fas fa-earth-europe"></i>
+											<span class="top-bar-menu-link-label"><?= _("Web") ?></span>
+										</a>
+									</li>
+								<?php } ?>
+								<?php if ((isset($_SESSION['DNS_SYSTEM'])) && (!empty($_SESSION['DNS_SYSTEM']))) { ?>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if (isset($_GET['dns'])) echo 'active' ?>" href="/list/server/?dns">
+											<i class="fas fa-book-atlas"></i>
+											<span class="top-bar-menu-link-label"><?= _("DNS") ?></span>
+										</a>
+									</li>
+								<?php } ?>
+								<?php if ((isset($_SESSION['MAIL_SYSTEM'])) && (!empty($_SESSION['MAIL_SYSTEM']))) { ?>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if (isset($_GET['mail'])) echo 'active' ?>" href="/list/server/?mail">
+											<i class="fas fa-envelopes-bulk"></i>
+											<span class="top-bar-menu-link-label"><?= _("Mail") ?></span>
+										</a>
+									</li>
+								<?php } ?>
+								<?php if ((isset($_SESSION['DB_SYSTEM'])) && (!empty($_SESSION['DB_SYSTEM']))) { ?>
+									<li class="top-bar-menu-item">
+										<a class="top-bar-menu-link <?php if (isset($_GET['db'])) echo 'active' ?>" href="/list/server/?db">
+											<i class="fas fa-database"></i>
+											<span class="top-bar-menu-link-label"><?= _("DB") ?></span>
+										</a>
+									</li>
+								<?php } ?>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
+										<i class="fas fa-arrow-rotate-right"></i>
+										<span class="u-hidden"><?= _("Refresh") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
+										<i class="fas fa-right-from-bracket"></i>
+										<span class="u-hidden"><?= _("Log out") ?></span>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</nav>
 				</div>
 			</div>

web/templates/pages/list_weblog.php

@@ -28,56 +28,58 @@
 								<?= _("Open menu") ?>
 							</span>
 						</button>
-						<ul x-cloak x-show="open" class="top-bar-menu-list">
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link" href="/list/web/" title="<?= _("Back") ?>">
-									<i class="fas fa-circle-left"></i>
-									<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&token=<?= $_SESSION['token'] ?>" title="<?= _("Access Log") ?>">
-									<i class="fas fa-eye"></i>
-									<span class="top-bar-menu-link-label"><?= _("Access Log") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
-									<i class="fas fa-download"></i>
-									<span class="u-hidden"><?= _("Download") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Error Log") ?>">
-									<i class="fas fa-circle-exclamation"></i>
-									<span class="top-bar-menu-link-label"><?= _("Error Log") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
-									<i class="fas fa-download"></i>
-									<span class="u-hidden"><?= _("Download") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
-									<i class="fas fa-arrow-rotate-right"></i>
-									<span class="u-hidden"><?= _("Refresh") ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link" href="/list/user/" title="<?= htmlentities($user) ?>">
-									<i class="fas fa-circle-user"></i>
-									<span class="u-hidden"><?= htmlentities($user) ?></span>
-								</a>
-							</li>
-							<li class="top-bar-menu-item">
-								<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
-									<i class="fas fa-right-from-bracket"></i>
-									<span class="u-hidden"><?= _("Log out") ?></span>
-								</a>
-							</li>
-						</ul>
+						<div x-cloak x-show="open" x-on:click.outside="open = false" class="top-bar-menu-panel">
+							<ul class="top-bar-menu-list">
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link" href="/list/web/" title="<?= _("Back") ?>">
+										<i class="fas fa-circle-left"></i>
+										<span class="top-bar-menu-link-label"><?= _("Back") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&token=<?= $_SESSION['token'] ?>" title="<?= _("Access Log") ?>">
+										<i class="fas fa-eye"></i>
+										<span class="top-bar-menu-link-label"><?= _("Access Log") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'access') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=access&&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
+										<i class="fas fa-download"></i>
+										<span class="u-hidden"><?= _("Download") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/list/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Error Log") ?>">
+										<i class="fas fa-circle-exclamation"></i>
+										<span class="top-bar-menu-link-label"><?= _("Error Log") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link <?php if ($_GET['type'] == 'error') echo 'active' ?>" href="/download/web-log/?domain=<?= htmlentities($_GET['domain']) ?>&type=error&token=<?= $_SESSION['token'] ?>" title="<?= _("Download") ?>">
+										<i class="fas fa-download"></i>
+										<span class="u-hidden"><?= _("Download") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link" href="javascript:location.reload();" title="<?= _("Refresh") ?>">
+										<i class="fas fa-arrow-rotate-right"></i>
+										<span class="u-hidden"><?= _("Refresh") ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link" href="/list/user/" title="<?= htmlentities($user) ?>">
+										<i class="fas fa-circle-user"></i>
+										<span class="u-hidden"><?= htmlentities($user) ?></span>
+									</a>
+								</li>
+								<li class="top-bar-menu-item">
+									<a class="top-bar-menu-link top-bar-menu-link-logout" href="/logout/?token=<?= $_SESSION["token"] ?>" title="<?= _("Log out") ?>">
+										<i class="fas fa-right-from-bracket"></i>
+										<span class="u-hidden"><?= _("Log out") ?></span>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</nav>
 				</div>
 			</div>