navigace

app/static/styles.css

@@ -47,7 +47,7 @@ header {
 nav {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 4px;
     flex-wrap: wrap;
 }
 
@@ -74,12 +74,15 @@ nav {
     padding: 6px 8px;
 }
 
-nav a {
+nav a,
+.nav-menu-button {
     color: white;
     text-decoration: none;
     font-weight: 600;
-    padding: 9px 12px;
+    padding: 10px 12px;
     border-radius: 8px;
+    font-size: 14px;
+    line-height: 1.2;
 }
 
 nav a:hover,
@@ -92,19 +95,31 @@ nav a:hover,
 
 .nav-menu {
     position: relative;
+    padding-bottom: 10px;
+    margin-bottom: -10px;
 }
 
 .nav-menu-button {
     background: transparent;
     color: white;
-    padding: 9px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
     min-height: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+}
+
+.nav-menu-button::after {
+    content: "▾";
+    font-size: 10px;
+    line-height: 1;
+    opacity: 0.82;
 }
 
 .nav-menu-panel {
     display: none;
     position: absolute;
-    top: calc(100% + 6px);
+    top: 100%;
     left: 0;
     z-index: 20;
     min-width: 180px;
@@ -115,6 +130,15 @@ nav a:hover,
     box-shadow: 0 12px 28px rgba(10, 31, 42, 0.28);
 }
 
+.nav-menu-panel::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -10px;
+    height: 10px;
+}
+
 .nav-menu:hover .nav-menu-panel,
 .nav-menu:focus-within .nav-menu-panel {
     display: block;
@@ -123,6 +147,7 @@ nav a:hover,
 .nav-menu-panel a {
     display: block;
     margin: 0;
+    padding: 10px 12px;
     white-space: nowrap;
 }
 
@@ -304,16 +329,9 @@ button:hover,
     text-decoration: none;
 }
 
-.nav-menu-button,
 .nav-menu-button:hover {
-    background: transparent;
-    color: white;
-    width: auto;
-}
-
-.nav-menu:hover .nav-menu-button,
-.nav-menu:focus-within .nav-menu-button {
     background: rgba(255, 255, 255, 0.12);
+    color: white;
 }
 
 .btn + .btn {

app/templates/layout.py

@@ -14,8 +14,8 @@ def page(title: str, body: str, user=None) -> str:
         display_name = html.escape(user.get("display_name") or user.get("username", ""))
         nav = """
             <nav>
-                <a href="/portal/operations">Přehled</a>
-                <a href="/portal/apps">Služby</a>
+                <a class="nav-link" href="/portal/operations">Přehled</a>
+                <a class="nav-link" href="/portal/apps">Služby</a>
                 <div class="nav-menu">
                     <button type="button" class="nav-menu-button">Provoz</button>
                     <div class="nav-menu-panel">