Improved: navigation menu structure (#4937)

29 files changed, 377 insertions, 253 deletions

diff --git a/app/layout/aside_configure.phtml b/app/layout/aside_configure.phtml
index f4a05a47c..03b8108f7 100644
--- a/app/layout/aside_configure.phtml
+++ b/app/layout/aside_configure.phtml
@@ -2,71 +2,89 @@
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 
 	<ul>
-		<li class="nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></li>
-		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
-			<a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a>
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.account') ?>: <?= htmlspecialchars(Minz_Session::param('currentUser', '_'), ENT_NOQUOTES, 'UTF-8')?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'profile' ? ' active' : '' ?>">
+					<a href="<?= _url('user', 'profile') ?>"><?= _t('gen.menu.user_profile') ?></a>
+				</li>
+				<li class="item">
+					<a class="signout" href="<?= _url('auth', 'logout') ?>">
+						<?php
+						echo _t('gen.auth.logout'); ?> <?= _i('logout') ?></a>
+				</li>
+			</ul>
 		</li>
-		<li class="item">
-			<a class="signout" href="<?= _url('auth', 'logout') ?>">
-				<?php
-				echo _t('gen.auth.logout'); ?> <?= _i('logout') ?></a>
-		</li>
-		<li class="nav-header"><?= _t('gen.menu.configuration') ?></li>
-		<li class="item<?= Minz_Request::actionName() === 'display' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'reading' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'archiving' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'integration' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'shortcut' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'queries' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'extension' ? ' active' : '' ?>">
-			<a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a>
-		</li>
-		<?php if (!FreshRSS_Auth::hasAccess('admin')) { ?>
-		<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.configuration') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'display' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'display') ?>"><?= _t('gen.menu.display') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'reading' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'reading') ?>"><?= _t('gen.menu.reading') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'archiving' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'archiving') ?>"><?= _t('gen.menu.archiving') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'integration' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'integration') ?>"><?= _t('gen.menu.sharing') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'shortcut' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'shortcut') ?>"><?= _t('gen.menu.shortcuts') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'queries' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'queries') ?>"><?= _t('gen.menu.queries') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'extension' ? ' active' : '' ?>">
+					<a href="<?= _url('extension', 'index') ?>"><?= _t('gen.menu.extensions') ?></a>
+				</li>
+				<?php if (!FreshRSS_Auth::hasAccess('admin')) { ?>
+				<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+				</li>
+				<?php } ?>
+				<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
+			</ul>
 		</li>
-		<?php } ?>
-		<?= Minz_ExtensionManager::callHook('menu_configuration_entry') ?>
 
 		<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-		<li class="nav-header"><?= _t('gen.menu.admin') ?></li>
-		<li class="item<?= Minz_Request::actionName() === 'system' ? ' active' : '' ?>">
-			<a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'manage' ? ' active' : '' ?>">
-			<a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'auth' ? ' active' : '' ?>">
-			<a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'checkInstall' ? ' active' : '' ?>">
-			<a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a>
-		</li>
-		<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
-		<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+		<li class="item nav-section">
+			<div class="item nav-header"><?= _t('gen.menu.admin') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'system' ? ' active' : '' ?>">
+					<a href="<?= _url('configure', 'system') ?>"><?= _t('gen.menu.system') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'user' && Minz_Request::actionName() === 'manage' ? ' active' : '' ?>">
+					<a href="<?= _url('user', 'manage') ?>"><?= _t('gen.menu.user_management') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'auth' ? ' active' : '' ?>">
+					<a href="<?= _url('auth', 'index') ?>"><?= _t('gen.menu.authentication') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'checkInstall' ? ' active' : '' ?>">
+					<a href="<?= _url('update', 'checkInstall') ?>"><?= _t('gen.menu.check_install') ?></a>
+				</li>
+				<?php if (!FreshRSS_Context::$system_conf->disable_update) { ?>
+				<li class="item<?= Minz_Request::controllerName() === 'update' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('update', 'index') ?>"><?= _t('gen.menu.update') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() === 'logs' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'logs') ?>"><?= _t('gen.menu.logs') ?></a>
+				</li>
+				<?php } ?>
+				<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
+			</ul>
 		</li>
 		<?php } ?>
-		<?= Minz_ExtensionManager::callHook('menu_admin_entry') ?>
-		<?php } ?>
-		<li class="nav-header"><!-- empty headline --></li>
-		<li class="item<?= Minz_Request::actionName() === 'about' ? ' active' : '' ?>">
-			<a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a>
+
+		<li class="item nav-section">
+			<div class="item nav-header"><!-- empty headline --></div>
+			<ul>
+				<li class="item<?= Minz_Request::actionName() === 'about' ? ' active' : '' ?>">
+					<a href="<?= _url('index', 'about') ?>"><?= _t('gen.menu.about') ?></a>
+				</li>
+			</ul>
 		</li>
 	</ul>
 </nav>
diff --git a/app/layout/aside_subscription.phtml b/app/layout/aside_subscription.phtml
index aa7857f74..e1f520f34 100644
--- a/app/layout/aside_subscription.phtml
+++ b/app/layout/aside_subscription.phtml
@@ -1,38 +1,45 @@
 <nav class="nav nav-list aside" id="aside_feed">
 	<a class="toggle_aside" href="#close"><?= _i('close') ?></a>
 	<ul>
-		<li class="nav-header"><?= _t('sub.menu.subscription_management') ?></li>
+		<li class="item nav-section">
+			<div class="nav-header"><?= _t('sub.menu.subscription_management') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'add' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.menu.add') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'add' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.menu.add') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'index') ?>"><?= _t('sub.menu.subscription_management') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'index') ?>"><?= _t('sub.menu.subscription_management') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'tag' ? ' active' : '' ?>">
+					<a href="<?= _url('tag', 'index') ?>"><?= _t('sub.menu.label_management') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'tag' ? ' active' : '' ?>">
-			<a href="<?= _url('tag', 'index') ?>"><?= _t('sub.menu.label_management') ?></a>
-		</li>
+				<li class="item<?= Minz_Request::controllerName() === 'importExport' ? ' active' : '' ?>">
+					<a href="<?= _url('importExport', 'index') ?>"><?= _t('sub.menu.import_export') ?></a>
+				</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'importExport' ? ' active' : '' ?>">
-			<a href="<?= _url('importExport', 'index') ?>"><?= _t('sub.menu.import_export') ?></a>
+				<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'bookmarklet' ? ' active' : '' ?>">
+					<a href="<?= _url('subscription', 'bookmarklet') ?>"><?= _t('sub.menu.subscription_tools') ?></a>
+				</li>
+			</ul>
 		</li>
 
-		<li class="item<?= Minz_Request::controllerName() === 'subscription' && Minz_Request::actionName() === 'bookmarklet' ? ' active' : '' ?>">
-			<a href="<?= _url('subscription', 'bookmarklet') ?>"><?= _t('sub.menu.subscription_tools') ?></a>
-		</li>
-		<li class="nav-header"><?= _t('admin.stats') ?></li>
-		<li class="item<?= Minz_Request::controllerName() == 'stats' && Minz_Request::actionName() == 'index' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'index') ?>"><?= _t('sub.menu.stats.main') ?></a>
+		<li class="item nav-section">
+			<div class="nav-header"><?= _t('admin.stats') ?></div>
+			<ul>
+				<li class="item<?= Minz_Request::controllerName() == 'stats' && Minz_Request::actionName() == 'index' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'index') ?>"><?= _t('sub.menu.stats.main') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() == 'idle' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'idle') ?>"><?= _t('sub.menu.stats.idle') ?></a>
+				</li>
+				<li class="item<?= Minz_Request::actionName() == 'repartition' ? ' active' : '' ?>">
+					<a href="<?= _url('stats', 'repartition') ?>"><?= _t('sub.menu.stats.repartition') ?></a>
+				</li>
+			</ul>
 		</li>
-		<li class="item<?= Minz_Request::actionName() == 'idle' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'idle') ?>"><?= _t('sub.menu.stats.idle') ?></a>
-		</li>
-		<li class="item<?= Minz_Request::actionName() == 'repartition' ? ' active' : '' ?>">
-			<a href="<?= _url('stats', 'repartition') ?>"><?= _t('sub.menu.stats.repartition') ?></a>
-		</li>
-
 	</ul>
 </nav>
 <a class="close-aside" href="#close">❌</a>
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index 8106f775b..38135720a 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -280,13 +280,17 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	line-height: 2.5;
+.nav-list {
 	color: var(--font-color-light);
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a {
 	color: var(--font-color-middle);
 }
@@ -302,7 +306,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -310,7 +314,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index d40403fc8..81ef43765 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -280,13 +280,17 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	line-height: 2.5;
+.nav-list {
 	color: var(--font-color-light);
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a {
 	color: var(--font-color-middle);
 }
@@ -302,7 +306,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -310,7 +314,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: var(--font-color-middle);
 	font-weight: bold;
 }
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss
index d73cf7439..e92dd2ec4 100644
--- a/p/themes/Ansum/_sidebar.scss
+++ b/p/themes/Ansum/_sidebar.scss
@@ -135,15 +135,23 @@
 
 /*=== Navigation */
 .nav-list {
-	.nav-header,
+	font-size: 1rem;
+
+	.item.nav-header,
 	.item {
-		height: 2.5em;
+		min-height: 2.5em;
 		line-height: 2.5em;
-		font-size: 1rem;
 	}
 
 	.item {
 		background: variables.$sid-bg;
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
 
 		a {
 			padding: 0 1rem;
@@ -152,11 +160,9 @@
 			@include mixins.transition(all, 0.15s, ease-in-out);
 		}
 
-		&:hover {
-			a {
-				background: variables.$sid-bg-dark;
-				text-decoration: none;
-			}
+		a:hover {
+			background: variables.$sid-bg-dark;
+			text-decoration: none;
 		}
 
 		&.active {
@@ -172,7 +178,7 @@
 	}
 
 	.nav-header {
-		padding: 0 10px;
+		padding: 0 1rem;
 		font-weight: bold;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 5c7433fce..6789320b5 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -552,21 +552,29 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #fbf9f6;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #363330;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #efe3d3;
 	text-decoration: none;
 }
@@ -580,7 +588,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #766556;
 	text-transform: uppercase;
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index d8e6eaa99..82ea37a3c 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -552,21 +552,29 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #fbf9f6;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #363330;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #efe3d3;
 	text-decoration: none;
 }
@@ -580,7 +588,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #766556;
 	text-transform: uppercase;
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index e37f35228..31bf28d06 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -265,13 +265,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -286,7 +289,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -295,7 +298,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index faa7250f3..f971dbace 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -265,13 +265,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -286,7 +289,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -295,7 +298,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 3ddb59755..dfcc1b2e7 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -261,13 +261,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	background: #26303f;
 }
@@ -282,7 +285,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #111;
 	border-bottom: 1px solid #333;
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index faea0df5e..0ef5f06b4 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -261,13 +261,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	background: #26303f;
 }
@@ -282,7 +285,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #111;
 	border-bottom: 1px solid #333;
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index c6c2a6aec..fa667c899 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -250,13 +250,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover,
 .nav-list .item.active {
 	background: #2980b9;
@@ -268,7 +271,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -276,7 +279,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #34495e;
 	color: #fff;
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 2ef0e42ea..da3722f18 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -250,13 +250,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover,
 .nav-list .item.active {
 	background: #2980b9;
@@ -268,7 +271,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -276,7 +279,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	background: #34495e;
 	color: #fff;
diff --git a/p/themes/Mapco/_sidebar.scss b/p/themes/Mapco/_sidebar.scss
index 9f546da61..a71960b1d 100644
--- a/p/themes/Mapco/_sidebar.scss
+++ b/p/themes/Mapco/_sidebar.scss
@@ -133,16 +133,24 @@
 
 /*=== Navigation */
 .nav-list {
-	.nav-header,
+	font-size: 1rem;
+
+	.item.nav-header,
 	.item {
-		height: 2.5em;
+		min-height: 2.5em;
 		line-height: 2.5em;
-		font-size: 1rem;
 	}
 
 	.item {
 		background: variables.$sid-bg;
 		color: variables.$white;
+		min-height: 2.5em;
+		line-height: 2.5em;
+
+		&.nav-header {
+			min-height: 2.5em;
+			line-height: 2.5em;
+		}
 
 		a {
 			padding: 0 1rem;
@@ -151,11 +159,9 @@
 			@include mixins.transition(all, 0.15s, ease-in-out);
 		}
 
-		&:hover {
-			a {
-				background: variables.$sid-bg-dark;
-				text-decoration: none;
-			}
+		a:hover {
+			background: variables.$sid-bg-dark;
+			text-decoration: none;
 		}
 
 		&.active {
@@ -171,7 +177,7 @@
 	}
 
 	.nav-header {
-		padding: 0 10px;
+		padding: 0 1rem;
 		font-weight: bold;
 		color: variables.$grey-dark;
 		text-transform: uppercase;
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 94be46e9f..c34dc08e0 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -565,22 +565,30 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #303136;
 	color: #fff;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #ffffff;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #17181a;
 	text-decoration: none;
 }
@@ -594,7 +602,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #5b6871;
 	text-transform: uppercase;
@@ -1335,6 +1343,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
-
-/*# sourceMappingURL=mapco.css.map */
+}
\ No newline at end of file
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 5b042c849..112ca94c7 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -565,22 +565,30 @@ form th {
 
 /* Sidebar des pages de configuration */
 /*=== Navigation */
-.nav-list .nav-header,
+.nav-list {
+	font-size: 1rem;
+}
+.nav-list .item.nav-header,
 .nav-list .item {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5em;
-	font-size: 1rem;
 }
 .nav-list .item {
 	background: #303136;
 	color: #fff;
+	min-height: 2.5em;
+	line-height: 2.5em;
+}
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5em;
 }
 .nav-list .item a {
 	padding: 0 1rem;
 	color: #ffffff;
 	transition: all 0.15s ease-in-out;
 }
-.nav-list .item:hover a {
+.nav-list .item a:hover {
 	background: #17181a;
 	text-decoration: none;
 }
@@ -594,7 +602,7 @@ form th {
 	text-decoration: none;
 }
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 	color: #5b6871;
 	text-transform: uppercase;
@@ -1335,4 +1343,4 @@ body.register {
 a, button.as-link {
 	outline: none;
 	color: #36c;
-}
+}
\ No newline at end of file
diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css
index e0eda2af9..5e8004903 100644
--- a/p/themes/Nord/nord.css
+++ b/p/themes/Nord/nord.css
@@ -208,13 +208,6 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	font-size: 0.9rem;
-	line-height: 2.5em;
-}
-
 .dropdown-menu {
 	margin: 5px 0 0;
 	padding: 0.5rem 0 0.25rem 0;
@@ -859,8 +852,18 @@ input.extend {
 }
 
 /*=== Navigation */
+.nav-list {
+	font-size: 0.9rem;
+}
+
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -868,7 +871,7 @@ input.extend {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 }
 
diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css
index d2b5146a1..fd38ef26c 100644
--- a/p/themes/Nord/nord.rtl.css
+++ b/p/themes/Nord/nord.rtl.css
@@ -208,13 +208,6 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	font-size: 0.9rem;
-	line-height: 2.5em;
-}
-
 .dropdown-menu {
 	margin: 5px 0 0;
 	padding: 0.5rem 0 0.25rem 0;
@@ -859,8 +852,18 @@ input.extend {
 }
 
 /*=== Navigation */
+.nav-list {
+	font-size: 0.9rem;
+}
+
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -868,7 +871,7 @@ input.extend {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	font-weight: bold;
 }
 
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index af9d3330a..9e30e429d 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -353,21 +353,22 @@ a:hover .icon {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
-.nav-list .item:hover {
-	background-color: var(--background-color-hover);
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
 }
 
-.nav-list .item:hover a {
+.nav-list .nav-section .item:hover a {
+	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
+.nav-list .nav-section .item.active:hover a,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
@@ -378,8 +379,8 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
-.nav-list .item > span {
-	padding: 0 10px;
+.nav-list .item > div {
+	padding: 0 1rem;
 }
 
 .nav-list .item > span {
@@ -392,7 +393,6 @@ a:hover .icon {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color);
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index 27c381f6a..53e623917 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -353,21 +353,22 @@ a:hover .icon {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
-.nav-list .item:hover {
-	background-color: var(--background-color-hover);
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
 }
 
-.nav-list .item:hover a {
+.nav-list .nav-section .item:hover a {
+	background-color: var(--background-color-hover);
 	color: var(--font-color-link-hover);
 }
 
+.nav-list .nav-section .item.active:hover a,
 .nav-list .item.active {
 	background-color: var(--contrast-background-color-active);
 	color: var(--font-color-light);
@@ -378,8 +379,8 @@ a:hover .icon {
 }
 
 .nav-list .item > a,
-.nav-list .item > span {
-	padding: 0 10px;
+.nav-list .item > div {
+	padding: 0 1rem;
 }
 
 .nav-list .item > span {
@@ -392,7 +393,6 @@ a:hover .icon {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color);
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index 5a7fb876f..8c5b7a9f4 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -294,13 +294,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
@@ -317,7 +320,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -325,7 +328,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-light);
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 0181e60ed..1ff2ea70e 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -294,13 +294,16 @@ a.btn {
 }
 
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	color: var(--font-color-link-general-hover);
 	background-color: var(--background-color-grey-hover);
@@ -317,7 +320,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 }
 
 .nav-list a:hover {
@@ -325,7 +328,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background-color: var(--background-color-grey);
 	color: var(--font-color-grey);
 	border-bottom: 1px solid var(--border-color-grey-light);
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 39d1dd152..e5ca98ab7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -263,13 +263,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -299,7 +302,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index e29b0e1b2..664331ac7 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -263,13 +263,16 @@ a.btn {
 	box-shadow: 0 -1px rgba(255,255,255,0.08) inset;
 }
 /*=== Navigation */
-.nav-list .nav-header,
-.nav-list .item {
-	height: 2.5em;
-	line-height: 2.5em;
+.nav-list {
 	font-size: 0.9rem;
 }
 
+.nav-list .item,
+.nav-list .item.nav-header {
+	min-height: 2.5em;
+	line-height: 2.5;
+}
+
 .nav-list .item a:hover {
 	text-shadow: 0 0 2px rgba(255,255,255,0.28);
 	color: #fff;
@@ -290,7 +293,7 @@ a.btn {
 }
 
 .nav-list .item > a {
-	padding: 0 10px;
+	padding: 0 1rem;
 	color: #ccc;
 }
 
@@ -299,7 +302,7 @@ a.btn {
 }
 
 .nav-list .nav-header {
-	padding: 0 10px;
+	padding: 0 1rem;
 	background: transparent;
 	color: #222;
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 0ebdfa3fb..3bf9d8684 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index f8f031567..d2282f52c 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -54,10 +54,9 @@ select:invalid {
 	box-shadow: none;
 }
 
-.nav-list .item, .nav-list .nav-header {
-	height: 2.5em;
+.nav-list .item .nav-header, .nav-list .item {
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 .dropdown-menu > .item a,
@@ -263,7 +262,10 @@ form th {
 	background-image: url("./icons/disabled-light.svg");
 }
 
-.nav-list .nav-header {
+.nav-list {
+	font-size: 0.9rem;
+}
+.nav-list .item .nav-header {
 	padding: 0 1rem;
 	font-weight: bold;
 	background-color: var(--color-background-aside);
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index a0570bb16..e24e9da7f 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -76,9 +76,8 @@ $color_hover:	#fff;
 }
 
 %nav-list {
-	height: 2.5em;
+	min-height: 2.5em;
 	line-height: 2.5;
-	font-size: 0.9rem;
 }
 
 %dropdown {
@@ -338,20 +337,22 @@ form {
 }
 
 .nav-list {
-	.nav-header {
-
-		@extend %nav-list;
-		padding: 0 1rem;
-		font-weight: bold;
-		background-color: var(--color-background-aside);
-		color: var(--color-text-light);
-		cursor: default;
-	}
+	font-size: 0.9rem;
 
 	.item {
 
 		@extend %nav-list;
 
+		.nav-header {
+
+			@extend %nav-list;
+			padding: 0 1rem;
+			font-weight: bold;
+			background-color: var(--color-background-aside);
+			color: var(--color-text-light);
+			cursor: default;
+		}
+
 		a:hover {
 			background-color: var(--color-background-nav-darker);
 			color: var(--color-text-light);
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index a24d7c32c..56e99ec70 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -559,6 +559,10 @@ input[type="checkbox"]:focus-visible {
 }
 
 /*=== Navigation */
+.nav-list {
+	padding-bottom: 3rem;
+}
+
 .nav-list .nav-header,
 .nav-list .item {
 	display: block;
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 4a8782c7e..4c8326e32 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -559,6 +559,10 @@ input[type="checkbox"]:focus-visible {
 }
 
 /*=== Navigation */
+.nav-list {
+	padding-bottom: 3rem;
+}
+
 .nav-list .nav-header,
 .nav-list .item {
 	display: block;