93 lines
4.8 KiB
HTML
93 lines
4.8 KiB
HTML
{{define "topbar"}}
|
|
<header class="topbar">
|
|
<button class="hamburger" id="hamburger-topbar" aria-label="Otvori meni"
|
|
style="display:none;margin-right:8px;"
|
|
onclick="document.getElementById('hamburger').click()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="6" x2="21" y2="6"/>
|
|
<line x1="3" y1="12" x2="21" y2="12"/>
|
|
<line x1="3" y1="18" x2="21" y2="18"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<span class="topbar-naslov">{{.NaslovStranice}}</span>
|
|
|
|
{{if not .AppPozadina}}
|
|
<div class="topbar-teme" style="display:flex;align-items:center;gap:8px;">
|
|
<form method="POST" action="/podesavanja/tema" style="margin:0;padding:0;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="tema" value="tamna">
|
|
<button type="submit" class="tema-krug {{if eq .Tema "tamna"}}tema-krug-aktivan{{end}}"
|
|
style="background:#1a1d27;border:none;padding:0;cursor:pointer;" title="Tamna"></button>
|
|
</form>
|
|
<form method="POST" action="/podesavanja/tema" style="margin:0;padding:0;">
|
|
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
|
|
<input type="hidden" name="tema" value="svetla">
|
|
<button type="submit" class="tema-krug {{if eq .Tema "svetla"}}tema-krug-aktivan{{end}}"
|
|
style="background:#f0f2f5;border:1px solid #e2e6ed;padding:0;cursor:pointer;" title="Svetla"></button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div style="position:relative;" id="avatar-wrapper">
|
|
<div class="avatar-korisnik" id="avatar-dugme" style="cursor:pointer;" title="{{.Korisnik}}">
|
|
{{if .Korisnik}}{{slice .Korisnik 0 2}}{{else}}NT{{end}}
|
|
</div>
|
|
<div id="avatar-meni" style="display:none;position:fixed;background:var(--kartica);backdrop-filter:none;-webkit-backdrop-filter:none;border:0.5px solid var(--ivica);border-radius:10px;box-shadow:var(--senka);min-width:160px;z-index:9999;overflow:hidden;transform-origin:top right;">
|
|
<a href="/admin/profil" style="display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:var(--tekst-glavni);text-decoration:none;transition:background 0.15s;"
|
|
onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background=''">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
Moj profil
|
|
</a>
|
|
<div style="height:0.5px;background:var(--ivica);margin:0 10px;"></div>
|
|
<a href="/odjava" style="display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;color:#dc2626;text-decoration:none;transition:background 0.15s;"
|
|
onmouseover="this.style.background='var(--pozadina)'" onmouseout="this.style.background=''">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
|
Odjava
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<style>
|
|
@keyframes avatarMeniOtvori {
|
|
from { opacity: 0; transform: scale(0.92) translateY(-6px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
</style>
|
|
<script>
|
|
(function() {
|
|
var dugme = document.getElementById('avatar-dugme');
|
|
var meni = document.getElementById('avatar-meni');
|
|
|
|
// premesti meni na kraj body — izlazi iz stacking contexta topbara
|
|
document.body.appendChild(meni);
|
|
|
|
function pozicioniraj() {
|
|
var r = dugme.getBoundingClientRect();
|
|
meni.style.top = (r.bottom + 8) + 'px';
|
|
meni.style.right = (window.innerWidth - r.right) + 'px';
|
|
meni.style.left = 'auto';
|
|
}
|
|
|
|
dugme.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
if (meni.style.display === 'none' || meni.style.display === '') {
|
|
pozicioniraj();
|
|
meni.style.display = 'block';
|
|
meni.style.animation = 'avatarMeniOtvori 0.15s ease both';
|
|
} else {
|
|
meni.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function() {
|
|
meni.style.display = 'none';
|
|
});
|
|
|
|
window.addEventListener('resize', function() {
|
|
if (meni.style.display !== 'none') pozicioniraj();
|
|
});
|
|
})();
|
|
</script>
|
|
{{end}}
|