From 0a810695c50dff2a3cb9549bfd6ff492f6211dea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane?= <stephane.savona@gmail.com>
Date: Tue, 24 Oct 2023 21:49:18 +0200
Subject: [PATCH] CLS header

---
 .../components/atoms/header/ToolbarPicto.html |  2 +-
 assets/less/component/common.less             | 10 +++
 templates/components/common/navbar.html.twig  | 78 +++++++++++--------
 3 files changed, 56 insertions(+), 34 deletions(-)

diff --git a/assets/components/atoms/header/ToolbarPicto.html b/assets/components/atoms/header/ToolbarPicto.html
index 14172ca26..a54febdc3 100644
--- a/assets/components/atoms/header/ToolbarPicto.html
+++ b/assets/components/atoms/header/ToolbarPicto.html
@@ -1,5 +1,5 @@
 <a :href="href"
-   class="relative flex items-center justify-center p-2 hover:bg-stone-700"
+   class="relative flex items-center justify-center h-[36px] w-[36px]"
    :title="title">
 	<slot></slot>
 </a>
diff --git a/assets/less/component/common.less b/assets/less/component/common.less
index e8fa9141f..c60f2c46c 100755
--- a/assets/less/component/common.less
+++ b/assets/less/component/common.less
@@ -69,6 +69,16 @@ input {
 	}
 }
 
+.navbar-header li {
+	width: 36px;
+	height: 36px;
+	display: flex;
+	justify-items: center;
+	align-items: center;
+	padding: .5rem;
+	@apply hover:bg-stone-700;
+}
+
 .component h3 {
 	width: 100%;
 	margin: 0;
diff --git a/templates/components/common/navbar.html.twig b/templates/components/common/navbar.html.twig
index ac3e4d5c2..b97383f04 100644
--- a/templates/components/common/navbar.html.twig
+++ b/templates/components/common/navbar.html.twig
@@ -46,40 +46,52 @@
 				</div>
 			</div>
 			<div class="lg:divide-y lg:divide-gray-400 grow">
-				<div id="global-toolbar"  class="relative flex justify-between">
+				<div id="global-toolbar"  class="relative flex justify-between h-[36px] navbar-header">
 					<div class="relative z-10 px-2 flex grow lg:px-0">
-						<div class="flex-shrink-0 flex justify-left items-center bg-stone-900">
-							<toolbar-picto href="{{ path('profile') }}" route="profile">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
-								</svg>
-							</toolbar-picto>
-							<toolbar-picto href="{{ path('fleet_headquarters') }}" route="fleet_headquarters" alt="amirauté">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414 0zm0-6a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 5.414 5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-								</svg>
-							</toolbar-picto>
-							<toolbar-picto href="{{ path('map') }}" route="map" alt="galaxie">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
-								</svg>
-							</toolbar-picto>
-							<toolbar-picto href="{{ path('financial_investments') }}" route="financial_investments" :routes="['financial_investments', 'financial_transfers']" alt="finances">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7.858 5.485a1 1 0 00-1.715 1.03L7.633 9H7a1 1 0 100 2h1.834l.166.277V12H7a1 1 0 100 2h2v1a1 1 0 102 0v-1h2a1 1 0 100-2h-2v-.723l.166-.277H13a1 1 0 100-2h-.634l1.492-2.486a1 1 0 10-1.716-1.029L10.034 9h-.068L7.858 5.485z" clip-rule="evenodd" />
-								</svg>
-							</toolbar-picto>
-							<toolbar-picto href="{{ path('university') }}" route="university" alt="université">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
-								</svg>
-							</toolbar-picto>
-							<toolbar-picto href="{{ path('faction_overview') }}" route="faction_overview" alt="faction">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
-									<path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd" />
-								</svg>
-							</toolbar-picto>
-						</div>
+						<ul class="flex-shrink-0 flex justify-left items-center bg-stone-900">
+							<li>
+								<toolbar-picto href="{{ path('profile') }}" route="profile">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+									</svg>
+								</toolbar-picto>
+							</li>
+							<li>
+								<toolbar-picto href="{{ path('fleet_headquarters') }}" route="fleet_headquarters" alt="amirauté">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414 0zm0-6a1 1 0 010-1.414l5-5a1 1 0 011.414 0l5 5a1 1 0 01-1.414 1.414L10 5.414 5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+									</svg>
+								</toolbar-picto>
+							</li>
+							<li>
+								<toolbar-picto href="{{ path('map') }}" route="map" alt="galaxie">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd" />
+									</svg>
+								</toolbar-picto>
+							</li>
+							<li>
+								<toolbar-picto href="{{ path('financial_investments') }}" route="financial_investments" :routes="['financial_investments', 'financial_transfers']" alt="finances">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7.858 5.485a1 1 0 00-1.715 1.03L7.633 9H7a1 1 0 100 2h1.834l.166.277V12H7a1 1 0 100 2h2v1a1 1 0 102 0v-1h2a1 1 0 100-2h-2v-.723l.166-.277H13a1 1 0 100-2h-.634l1.492-2.486a1 1 0 10-1.716-1.029L10.034 9h-.068L7.858 5.485z" clip-rule="evenodd" />
+									</svg>
+								</toolbar-picto>
+							</li>
+							<li>
+								<toolbar-picto href="{{ path('university') }}" route="university" alt="université">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
+									</svg>
+								</toolbar-picto>
+							</li>
+							<li>
+								<toolbar-picto href="{{ path('faction_overview') }}" route="faction_overview" alt="faction">
+									<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
+										<path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd" />
+									</svg>
+								</toolbar-picto>
+							</li>
+						</ul>
 						<div class="w-10 h-full bg-stone-800"></div>
 						<div class="flex flex-shrink-0 justify-right items-center justify-self-end bg-stone-900">
 							<toolbar-picto href="{{ path('player_rankings') }}" route="player_rankings" alt="classements">