SnippetsCode Snippet
Unnamed
No description
wr-centered-header
<header-context (loaded)="hdr = $event" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap");
.wr-header-shell {
width: 100%;
background: rgba(14, 22, 16, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
position: sticky;
top: 0;
z-index: 10000;
border-bottom: 1px solid rgba(194, 168, 100, 0.18);
}
.wr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6%;
height: 72px;
max-width: 1400px;
margin: 0 auto;
box-sizing: border-box;
font-family: "DM Sans", sans-serif;
}
.wr-logo { height: 46px; display: block; }
.wr-left {
display: flex;
align-items: center;
gap: 0;
}
.wr-right {
display: flex;
align-items: center;
gap: 28px;
justify-content: flex-end;
}
.wr-nav {
display: flex;
gap: 0;
margin-left: 48px;
}
.wr-nav-link {
text-decoration: none;
color: rgba(237, 228, 207, 0.65);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: color 0.2s;
padding: 6px 18px;
position: relative;
}
.wr-nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 18px;
right: 18px;
height: 1px;
background: #c2a864;
transform: scaleX(0);
transition: transform 0.25s;
}
.wr-nav-link:hover { color: #c2a864; }
.wr-nav-link:hover::after { transform: scaleX(1); }
.wr-user {
font-size: 12px;
color: rgba(237, 228, 207, 0.45);
font-weight: 400;
letter-spacing: 0.04em;
}
.wr-admin-link,
.wr-login-link {
text-decoration: none;
color: #c2a864;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid rgba(194, 168, 100, 0.35);
padding: 8px 20px;
border-radius: 2px;
transition: background 0.2s, color 0.2s;
}
.wr-admin-link:hover,
.wr-login-link:hover {
background: #c2a864;
color: #0e1610;
}
.wr-burger {
display: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
padding: 4px;
}
.wr-burger span {
display: block;
width: 22px;
height: 1.5px;
background: #c2a864;
border-radius: 1px;
}
/* ── OVERLAY behind drawer ── */
.wr-drawer-bg {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10001;
}
/* ── DRAWER PANEL — fully solid black ── */
.wr-drawer {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: fit-content;
background: #000000; /* solid black — no transparency */
opacity: 1;
border-left: 2px solid #c2a864;
z-index: 10002;
padding: 88px 36px 40px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── CLOSE BUTTON — gold, visible ── */
.wr-drawer-close {
position: absolute;
top: 26px;
right: 26px;
font-size: 22px;
cursor: pointer;
color: #c2a864; /* solid gold */
line-height: 1;
transition: color 0.2s;
}
.wr-drawer-close:hover { color: #dfc896; }
/* ── NAV LINKS — solid ivory text on black ── */
.wr-drawer-link {
display: block;
padding: 16px 0;
text-decoration: none;
color: #ede4cf; /* solid ivory — fully visible */
font-size: 16px;
font-weight: 400;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(194, 168, 100, 0.2);
transition: color 0.2s, padding-left 0.2s;
background: transparent;
}
.wr-drawer-link:hover {
color: #c2a864;
padding-left: 8px;
}
/* ── LOGIN / ADMIN / USER in drawer ── */
.wr-drawer-login,
.wr-drawer-admin,
.wr-drawer-user {
display: none;
text-decoration: none;
color: #c2a864; /* solid gold */
font-weight: 600;
font-size: 12px;
padding: 0 0 16px;
border-bottom: 1px solid rgba(194, 168, 100, 0.2);
letter-spacing: 0.12em;
text-transform: uppercase;
background: transparent;
}
@media (max-width: 880px) {
.wr-nav { display: none; }
.wr-burger { display: flex; }
.wr-right .wr-login-link,
.wr-right .wr-admin-link,
.wr-right .wr-user { display: none; }
.wr-drawer-login,
.wr-drawer-admin,
.wr-drawer-user { display: block; }
}
</style>
<if [condition]="hdr">
<div class="wr-header-shell">
<div class="wr-header">
<div class="wr-left">
<a [href]="hdr.navigation.homeUrl">
<img [src]="hdr.branding.logoUrl" class="wr-logo" />
</a>
<div class="wr-nav">
<loop [data]="hdr.navigation.entries" let="item">
<a [href]="item.url" class="wr-nav-link"><print [value]="item.title" /></a>
</loop>
</div>
</div>
<div></div>
<div class="wr-right">
<if [condition]="hdr.user.isLoggedIn" not>
<a href="/login" class="wr-login-link">Belépés</a>
</if>
<if [condition]="hdr.user.isLoggedIn">
<if [condition]="hdr.user.isAdmin">
<a href="/admin" class="wr-admin-link">
<print [value]="hdr.user.name" /> · Admin
</a>
</if>
<if [condition]="hdr.user.isAdmin" not>
<span class="wr-user">
<print [value]="hdr.user.name" />
</span>
</if>
</if>
<cart-button-1></cart-button-1>
<div class="wr-burger" (click)="hdr.menuOpen = true">
<span></span><span></span><span></span>
</div>
</div>
<if [condition]="hdr.menuOpen">
<div class="wr-drawer-bg" (click)="hdr.menuOpen = false"></div>
<div class="wr-drawer">
<div class="wr-drawer-close" (click)="hdr.menuOpen = false">✕</div>
<if [condition]="hdr.user.isLoggedIn" not>
<a href="/login" class="wr-drawer-login">Belépés</a>
</if>
<if [condition]="hdr.user.isLoggedIn">
<if [condition]="hdr.user.isAdmin">
<a href="/admin" class="wr-drawer-admin">
<print [value]="hdr.user.name" /> · Admin
</a>
</if>
<if [condition]="hdr.user.isAdmin" not>
<span class="wr-drawer-user">
<print [value]="hdr.user.name" />
</span>
</if>
</if>
<loop [data]="hdr.navigation.entries" let="m">
<a [href]="m.url" class="wr-drawer-link" (click)="hdr.menuOpen = false">
<print [value]="m.title" />
</a>
</loop>
</div>
</if>
</div>
</div>
</if>