From d81b8715ff4ddd1c056f2e1eb4d957f58154c3f5 Mon Sep 17 00:00:00 2001
From: Kowalski <kmet.p@seznam.cz>
Date: Mon, 12 Oct 2026 18:56:10 +0200
Subject: [PATCH] Design menu

---
 app/Presentation/@layout.latte |  59 ++++++++--------
 www/css/base.css               | 122 +++++++++++++++++++++++++++++----
 2 files changed, 138 insertions(+), 43 deletions(-)

diff --git a/app/Presentation/@layout.latte b/app/Presentation/@layout.latte
index fb18e53..f8ae3c6 100644
--- a/app/Presentation/@layout.latte
+++ b/app/Presentation/@layout.latte
@@ -52,37 +52,34 @@
 	</div>
 
 	{* navigační panel *}
-	<nav id="menu" class="navbar navbar-expand-lg navbar-light mb-0 pb-0" style="background-color: #e3f2fd;">            
-		<div class="container-fluid">                
-				<span class="navbar-brand">
-				{if $user->isLoggedIn()}
-					Obvody
-				{else}
-					Obvody
-				{/if}
-				</span>                
-				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">                    
-						<span class="navbar-toggler-icon"></span>                
-				</button>                
-				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">                             
-					<div class="navbar-nav">
-						{if $user->isLoggedIn()}
-							<a class='nav-link' n:href=':Home:'>Home</a>
-							<a class='nav-link' n:href=':Mapa:'>Mapa</a>	
-							<a class='nav-link' n:href=':Obvod:list'>Obvody</a>
-							<a class='nav-link' n:href=':Zvestovatel:'>Zvěstovatelé</a>
-							<a class='nav-link' n:href=':Nastaveni:'>Nastavení</a>
-							<a n:if="$jeAdmin ?? false" class='nav-link' n:href=':Administrace:'>Administrace</a>
-							<a n:if="$jeAdmin ?? false" class='nav-link' n:href=':Logy:'>Logy</a>
-							<a class='nav-link' n:href=":Sign:out">Odhlásit</a>
-						{else}
-							<a class='nav-link' n:href=':Home:'>Home</a>
-							<a class='nav-link' n:href=':Nastaveni:'>Nastavení</a>
-							<a class='nav-link' n:href=":Sign:in, backlink: (isset($navrat) ? $navrat : '')">Přihlásit</a>
-						{/if}  																	
-					</div>                       
-				</div>                     
-		</div>             
+	<nav id="menu" class="navbar navbar-expand-lg">
+		<div class="container-fluid">
+			<a class="navbar-brand" n:href=":Home:">
+				<span class="menu-znacka" aria-hidden="true"></span>
+				Obvody
+			</a>
+			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Menu">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+			<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+				<div class="navbar-nav ms-lg-auto">
+					{if $user->isLoggedIn()}
+						<a n:href=":Home:" n:class="$presenter->getName() === 'Home' ? 'nav-link is-aktivni' : 'nav-link'">Home</a>
+						<a n:href=":Mapa:" n:class="$presenter->getName() === 'Mapa' ? 'nav-link is-aktivni' : 'nav-link'">Mapa</a>
+						<a n:href=":Obvod:list" n:class="$presenter->getName() === 'Obvod' ? 'nav-link is-aktivni' : 'nav-link'">Obvody</a>
+						<a n:href=":Zvestovatel:" n:class="$presenter->getName() === 'Zvestovatel' ? 'nav-link is-aktivni' : 'nav-link'">Zvěstovatelé</a>
+						<a n:href=":Nastaveni:" n:class="$presenter->getName() === 'Nastaveni' ? 'nav-link is-aktivni' : 'nav-link'">Nastavení</a>
+						<a n:if="$jeAdmin ?? false" n:href=":Administrace:" n:class="$presenter->getName() === 'Administrace' ? 'nav-link is-aktivni' : 'nav-link'">Administrace</a>
+						<a n:if="$jeAdmin ?? false" n:href=":Logy:" n:class="$presenter->getName() === 'Logy' ? 'nav-link is-aktivni' : 'nav-link'">Logy</a>
+						<a class="nav-link menu-vedlejsi" n:href=":Sign:out">Odhlásit</a>
+					{else}
+						<a n:href=":Home:" n:class="$presenter->getName() === 'Home' ? 'nav-link is-aktivni' : 'nav-link'">Home</a>
+						<a n:href=":Nastaveni:" n:class="$presenter->getName() === 'Nastaveni' ? 'nav-link is-aktivni' : 'nav-link'">Nastavení</a>
+						<a class="nav-link menu-vstup" n:href=":Sign:in, backlink: (isset($navrat) ? $navrat : '')">Přihlásit</a>
+					{/if}
+				</div>
+			</div>
+		</div>
 	</nav>
 
 	{include content}
diff --git a/www/css/base.css b/www/css/base.css
index 629cc74..ceda774 100644
--- a/www/css/base.css
+++ b/www/css/base.css
@@ -509,26 +509,124 @@ body:has(#map[data-max]) {
     min-height: 2.85rem;
 }
 
+#menu {
+    background: rgba(255, 255, 255, 0.94);
+    border-bottom: 1px solid #c5ddf6;
+    box-shadow: 0 8px 22px rgba(29, 79, 145, 0.08);
+    padding-top: 0.45rem;
+    padding-bottom: 0.45rem;
+}
+
+#menu .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    margin-right: 0.5rem;
+    color: #1d4f91;
+    font-size: 1.2rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+}
+
+.menu-znacka {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: 2px solid #1d4f91;
+    background: #2652a8;
+    box-shadow: 0 3px 8px rgba(29, 79, 145, 0.28);
+}
+
+#menu .navbar-nav {
+    align-items: center;
+    gap: 0.25rem;
+}
+
+#menu .nav-link {
+    color: #1d4f91;
+    font-weight: 700;
+    border-radius: 999px;
+    padding: 0.4rem 0.85rem;
+}
+
+#menu .nav-link:hover,
+#menu .nav-link:focus-visible {
+    background: #e3f2fd;
+    color: #2652a8;
+}
+
+#menu .nav-link.is-aktivni {
+    background: #2652a8;
+    color: #fff;
+}
+
+#menu .nav-link.is-aktivni:hover,
+#menu .nav-link.is-aktivni:focus-visible {
+    background: #1d4f91;
+    color: #fff;
+}
+
+#menu .menu-vedlejsi {
+    color: #6f5410;
+}
+
+#menu .menu-vedlejsi:hover,
+#menu .menu-vedlejsi:focus-visible {
+    background: #f8efd0;
+    color: #6f5410;
+}
+
+#menu .menu-vstup {
+    background: #c5ddf6;
+    border: 2px solid #1d4f91;
+    color: #1d4f91;
+}
+
+#menu .menu-vstup:hover,
+#menu .menu-vstup:focus-visible {
+    background: #2652a8;
+    color: #fff;
+}
+
+#menu .navbar-toggler {
+    min-width: 2.9rem;
+    min-height: 2.9rem;
+    padding: 0.4rem 0.55rem;
+    border: 2px solid #1d4f91;
+    border-radius: 0.9rem;
+    background: #c5ddf6;
+    box-shadow: 0 4px 12px rgba(29, 79, 145, 0.16);
+}
+
+#menu .navbar-toggler:focus {
+    box-shadow: 0 0 0 0.2rem rgba(38, 82, 168, 0.2);
+}
+
+#menu .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231d4f91' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
 @media (max-width: 991.98px) {
-    #menu .navbar-brand {
-        font-size: 1.25rem;
-        font-weight: 800;
-        color: #1d4f91;
+    #menu .navbar-collapse {
+        margin-top: 0.55rem;
+        padding: 0.45rem;
+        background: #fff;
+        border: 1px solid #c5ddf6;
+        border-radius: 1rem;
+        box-shadow: 0 12px 28px rgba(29, 79, 145, 0.1);
     }
 
-    #menu .navbar-toggler {
-        min-width: 3rem;
-        min-height: 3rem;
-        padding: 0.45rem 0.6rem;
+    #menu .navbar-nav {
+        align-items: stretch;
+        width: 100%;
     }
 
     #menu .nav-link {
         display: flex;
         align-items: center;
-        min-height: 3rem;
-        padding: 0.75rem 0.2rem;
-        font-size: 1.125rem;
-        font-weight: 600;
+        min-height: 2.9rem;
+        padding: 0.55rem 0.9rem;
+        font-size: 1.05rem;
     }
 }