kowalski
/
Obvody
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design menu

master
Kowalski 2026-10-12 18:56:10 +02:00
parent 2c0d5039a1
commit d81b8715ff
2 changed files with 138 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/Presentation/@layout.latte
View File

@ -52,33 +52,30 @@
</div> </div>
{* navigační panel *} {* navigační panel *}
<nav id="menu" class="navbar navbar-expand-lg navbar-light mb-0 pb-0" style="background-color: #e3f2fd;"> <nav id="menu" class="navbar navbar-expand-lg">
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand"> <a class="navbar-brand" n:href=":Home:">
{if $user->isLoggedIn()} <span class="menu-znacka" aria-hidden="true"></span>
Obvody Obvody
{else} </a>
Obvody <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Menu">
{/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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <div class="navbar-nav ms-lg-auto">
{if $user->isLoggedIn()} {if $user->isLoggedIn()}
<a class='nav-link' n:href=':Home:'>Home</a> <a n:href=":Home:" n:class="$presenter->getName() === 'Home' ? 'nav-link is-aktivni' : 'nav-link'">Home</a>
<a class='nav-link' n:href=':Mapa:'>Mapa</a> <a n:href=":Mapa:" n:class="$presenter->getName() === 'Mapa' ? 'nav-link is-aktivni' : 'nav-link'">Mapa</a>
<a class='nav-link' n:href=':Obvod:list'>Obvody</a> <a n:href=":Obvod:list" n:class="$presenter->getName() === 'Obvod' ? 'nav-link is-aktivni' : 'nav-link'">Obvody</a>
<a class='nav-link' n:href=':Zvestovatel:'>Zvěstovatelé</a> <a n:href=":Zvestovatel:" n:class="$presenter->getName() === 'Zvestovatel' ? 'nav-link is-aktivni' : 'nav-link'">Zvěstovatelé</a>
<a class='nav-link' n:href=':Nastaveni:'>Nastavení</a> <a n:href=":Nastaveni:" n:class="$presenter->getName() === 'Nastaveni' ? 'nav-link is-aktivni' : 'nav-link'">Nastavení</a>
<a n:if="$jeAdmin ?? false" class='nav-link' n:href=':Administrace:'>Administrace</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" class='nav-link' n:href=':Logy:'>Logy</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' n:href=":Sign:out">Odhlásit</a> <a class="nav-link menu-vedlejsi" n:href=":Sign:out">Odhlásit</a>
{else} {else}
<a class='nav-link' n:href=':Home:'>Home</a> <a n:href=":Home:" n:class="$presenter->getName() === 'Home' ? 'nav-link is-aktivni' : 'nav-link'">Home</a>
<a class='nav-link' n:href=':Nastaveni:'>Nastavení</a> <a n:href=":Nastaveni:" n:class="$presenter->getName() === 'Nastaveni' ? 'nav-link is-aktivni' : 'nav-link'">Nastavení</a>
<a class='nav-link' n:href=":Sign:in, backlink: (isset($navrat) ? $navrat : '')">Přihlásit</a> <a class="nav-link menu-vstup" n:href=":Sign:in, backlink: (isset($navrat) ? $navrat : '')">Přihlásit</a>
{/if} {/if}
</div> </div>
</div> </div>

116
www/css/base.css
View File

@ -509,26 +509,124 @@ body:has(#map[data-max]) {
min-height: 2.85rem; min-height: 2.85rem;
} }
@media (max-width: 991.98px) { #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 { #menu .navbar-brand {
font-size: 1.25rem; display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-right: 0.5rem;
color: #1d4f91;
font-size: 1.2rem;
font-weight: 800; 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; color: #1d4f91;
} }
#menu .menu-vstup:hover,
#menu .menu-vstup:focus-visible {
background: #2652a8;
color: #fff;
}
#menu .navbar-toggler { #menu .navbar-toggler {
min-width: 3rem; min-width: 2.9rem;
min-height: 3rem; min-height: 2.9rem;
padding: 0.45rem 0.6rem; 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-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-nav {
align-items: stretch;
width: 100%;
} }
#menu .nav-link { #menu .nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 3rem; min-height: 2.9rem;
padding: 0.75rem 0.2rem; padding: 0.55rem 0.9rem;
font-size: 1.125rem; font-size: 1.05rem;
font-weight: 600;
} }
} }