update navigation for better mobile handling

Signed-off-by: Maurice Preuß (envoyr) <envoyr@froxlor.org>

lib/Froxlor/UI/Panel/UI.php

@@ -93,7 +93,7 @@ class UI
 	public static function sendHeaders()
 	{
 		session_set_cookie_params([
-			'lifetime' => 600, // will be renewed based on settings in lib/init.php
+			'lifetime' => self::$install_mode ? 7200 : 600, // will be renewed based on settings in lib/init.php
 			'path' => '/',
 			'domain' => $_SERVER['HTTP_HOST'],
 			'secure' => self::requestIsHttps(),

templates/Froxlor/src/scss/components/_navbar.scss

@@ -3,7 +3,7 @@
 }
 
 .navbar-brand {
-	padding: 1rem;
+	padding: 1rem 0;
 }
 
 @include media-breakpoint-up(md) {
@@ -21,9 +21,12 @@
 
 @include media-breakpoint-down(md) {
 	.navbar {
-		background: darken($navbar-bg, 90);
+		background: $navbar-bg-mobile;
 
 		.navbar-nav {
+			flex-direction: row;
+			gap: .75rem;
+
 			.nav-link {
 				color: $white;
 
@@ -31,6 +34,18 @@
 					color: rgba(255,255,255,.45);
 				}
 			}
+
+			.dropdown-menu {
+				position: absolute;
+			}
+		}
+
+		#collapseSearch {
+			border-top: solid 1px $dark;
+
+			#search {
+				margin-bottom: 1.125rem;
+			}
 		}
 	}
 

templates/Froxlor/src/scss/variables/_dark.scss

@@ -25,6 +25,7 @@ $list-group-action-color: $body-color;
 
 // Navbar
 $navbar-bg: $gray-800;
+$navbar-bg-mobile: $navbar-bg;
 $navbar-light-color: $gray-200;
 $navbar-light-hover-color: $gray-500;
 $navbar-light-active-color: $gray-500;

templates/Froxlor/src/scss/variables/_main.scss

@@ -67,6 +67,7 @@ $link-color: $froxlor-800;
 
 // Navbar
 $navbar-bg: $white;
+$navbar-bg-mobile: $gray-900;
 
 // Sidebar
 $sidebar-width: 256px;

templates/Froxlor/userarea.html.twig

@@ -19,28 +19,19 @@
 
 	<nav class="navbar navbar-expand-md navbar-light p-0 {% if not block('heading') %}shadow-sm{% endif %}">
 		<div class="container-fluid gx-0">
-			<a class="navbar-brand {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
+			<div>
-				<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top">
-			</a>
-			<div class="me-3 me-sm-0">
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-					<span class="navbar-toggler-icon"></span>
-				</button>
 				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar"  aria-expanded="false" aria-label="Toggle sidebar">
 					<span class="navbar-toggler-icon"></span>
 				</button>
 			</div>
-			<div class="collapse navbar-collapse px-3 px-lg-5" id="navbar">
+			<a class="navbar-brand me-0 {% if block('heading') %}shadow-sm{% endif %}" href="{{ linker({'section': 'index'}) }}">
-				<form id="search" method="post">
+				<img src="{{ header_logo }}" alt="" width="auto" height="24" class="d-inline-block align-text-top ms-md-3">
-					<div class="d-flex align-items-center">
+			</a>
+			<div class="order-0 order-md-1 d-flex flex-grow-0 flex-md-grow-1" id="navbar">
+				<ul class="navbar-nav ms-md-auto me-3 me-lg-5">
+					<a class="nav-link d-md-none" data-bs-toggle="collapse" href="#collapseSearch" role="button" aria-expanded="false" aria-controls="collapseSearch">
 						<i class="fa-solid fa-search text-muted"></i>
-						<input title="search" type="search" class="search-input" placeholder="{{ lng('panel.search') }}...">
+					</a>
-					</div>
-					<div class="search-results-box p-2 shadow" style="display:none;">
-						<div class="search-results list-group-flush"></div>
-					</div>
-				</form>
-				<ul class="navbar-nav ms-auto">
 					{% if call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is not empty and call_static('\\Froxlor\\CurrentUser', 'getField', ['switched_user']) is iterable %}
 						<a class="nav-link text-success" href="{{ linker({'section': 'index', 'action': 'suback'}) }}">
 							<i class="fa-solid fa-reply me-1"></i><span class="d-none d-xl-inline">{{ userinfo.switched_user.loginname }}</span>
@@ -91,12 +82,23 @@
 						</ul>
 					</li>
 					<li class="nav-item">
-						<a class="btn btn-link pe-0" title="{{ lng('login.logout') }}" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
+						<a class="nav-link text-primary" title="{{ lng('login.logout') }}" href="{{ linker({'section': 'index', 'action': 'logout'}) }}">
 							<i class="fas fa-power-off"></i>
 						</a>
 					</li>
 				</ul>
 			</div>
+			<div class="order-1 order-md-0 collapse navbar-collapse" id="collapseSearch">
+				<form class="ms-3 mt-3 ms-lg-5 my-md-0" id="search" method="post">
+					<div class="d-flex align-items-center">
+						<i class="fa-solid fa-search text-muted"></i>
+						<input class="search-input" title="search" type="search" placeholder="{{ lng('panel.search') }}...">
+					</div>
+					<div class="search-results-box p-2 shadow" style="display:none;">
+						<div class="search-results list-group-flush"></div>
+					</div>
+				</form>
+			</div>
 		</div>
 	</nav>
 {% endblock %}