Skip to content

Commit 85b2e58

Browse files
DevLabStudyDevLabStudy
authored
Refactor navigation styles and scripts for buttons
1 parent 671e82a commit 85b2e58

1 file changed

Lines changed: 44 additions & 54 deletions

File tree

‎_layouts/default.html‎

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
position: relative;
9090
}
9191

92-
.nav-center .nav-link-item {
92+
.nav-link-btn {
9393
text-decoration: none;
9494
color: var(--text-muted);
9595
font-weight: 600;
@@ -108,9 +108,9 @@
108108
position: relative;
109109
}
110110

111-
.nav-center .nav-link-item:hover,
112-
.nav-center .nav-link-item.active-page,
113-
.nav-center .dropdown:hover > .nav-link-item {
111+
.nav-link-btn:hover,
112+
.nav-link-btn.active-page,
113+
.dropdown:hover > .nav-link-btn {
114114
color: var(--accent-blue);
115115
}
116116

@@ -122,10 +122,11 @@
122122
height: 3px;
123123
background: var(--accent-blue);
124124
border-radius: 3px;
125-
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
125+
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
126126
z-index: 1;
127127
box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
128128
pointer-events: none;
129+
opacity: 0;
129130
}
130131

131132
/* DROPDOWN APPS */
@@ -344,14 +345,14 @@
344345
</div>
345346
<div class="nav-center" id="navCenter">
346347
<div class="nav-indicator" id="navIndicator"></div>
347-
<a href="/" class="nav-link-item {% if page.url == '/' %}active-page{% endif %}">Hub</a>
348-
<a href="/newsy" class="nav-link-item {% if page.url contains 'newsy' %}active-page{% endif %}">Newsy</a>
349-
<a href="/blog" class="nav-link-item {% if page.url contains 'blog' %}active-page{% endif %}">Blog</a>
350-
<a href="/homelab" class="nav-link-item {% if page.url contains 'homelab' %}active-page{% endif %}">HomeLab</a>
351-
<a href="/sponsors" class="nav-link-item {% if page.url contains 'sponsors' %}active-page{% endif %}">Sponsors</a>
348+
<a href="/" class="nav-link-btn {% if page.url == '/' %}active-page{% endif %}">Hub</a>
349+
<a href="/newsy" class="nav-link-btn {% if page.url contains 'newsy' %}active-page{% endif %}">Newsy</a>
350+
<a href="/blog" class="nav-link-btn {% if page.url contains 'blog' %}active-page{% endif %}">Blog</a>
351+
<a href="/homelab" class="nav-link-btn {% if page.url contains 'homelab' %}active-page{% endif %}">HomeLab</a>
352+
<a href="/sponsors" class="nav-link-btn {% if page.url contains 'sponsors' %}active-page{% endif %}">Sponsors</a>
352353

353-
<div class="dropdown">
354-
<a href="#" class="nav-link-item dropbtn {% if page.url contains 'orbit' or page.url contains 'homelab-cc' or page.url contains 'phone' or page.url contains 'apps' %}active-page{% endif %}" onclick="return false;">Apps ▾</a>
354+
<div class="dropdown" id="dropdownApps">
355+
<a href="#" class="nav-link-btn dropbtn {% if page.url contains 'orbit' or page.url contains 'homelab-cc' or page.url contains 'phone' or page.url contains 'apps' %}active-page{% endif %}" onclick="return false;">Apps ▾</a>
355356
<div class="dropdown-content">
356357
<div class="dropdown-links-wrapper">
357358
<a href="/orbit">Orbit <span>↗</span></a>
@@ -366,8 +367,8 @@
366367
</div>
367368
</div>
368369

369-
<a href="/benchmarks" class="nav-link-item {% if page.url contains 'benchmarks' %}active-page{% endif %}">Benchmarks</a>
370-
<a href="/kontakt" class="nav-link-item {% if page.url contains 'kontakt' %}active-page{% endif %}">Kontakt</a>
370+
<a href="/benchmarks" class="nav-link-btn {% if page.url contains 'benchmarks' %}active-page{% endif %}">Benchmarks</a>
371+
<a href="/kontakt" class="nav-link-btn {% if page.url contains 'kontakt' %}active-page{% endif %}">Kontakt</a>
371372
</div>
372373
</nav>
373374

@@ -456,60 +457,49 @@ <h4>Follow DevLabStudy</h4>
456457
</div>
457458
</footer>
458459

459-
<!-- SKRYPT WSKAŹNIKA NAWIGACJI -->
460+
<!-- SKRYPT NAWIGACJI -->
460461
<script>
461-
document.addEventListener('DOMContentLoaded', () => {
462+
window.addEventListener('DOMContentLoaded', () => {
462463
const navCenter = document.getElementById('navCenter');
463464
const indicator = document.getElementById('navIndicator');
464-
465-
// Pobieramy aktywne linki widoczne na pasku
466-
const activeLink = navCenter.querySelector('.nav-link-item.active-page') || navCenter.querySelector('.nav-link-item');
465+
const activeLink = navCenter.querySelector('.nav-link-btn.active-page') || navCenter.querySelector('.nav-link-btn');
467466

468-
function moveIndicatorToEl(targetEl) {
467+
function positionIndicator(targetEl) {
469468
if (!targetEl) return;
470-
indicator.style.width = targetEl.offsetWidth + 'px';
471-
indicator.style.left = targetEl.offsetLeft + 'px';
472-
}
469+
const parentRect = navCenter.getBoundingClientRect();
470+
const targetRect = targetEl.getBoundingClientRect();
473471

474-
// Prawidłowe załadowanie pozycji po wyrenderowaniu strony
475-
const savedLeft = sessionStorage.getItem('nav_indicator_left');
476-
const savedWidth = sessionStorage.getItem('nav_indicator_width');
477-
478-
if (savedLeft !== null && savedWidth !== null) {
479-
indicator.style.transition = 'none';
480-
indicator.style.left = savedLeft + 'px';
481-
indicator.style.width = savedWidth + 'px';
482-
483-
// Wymuszenie przeliczenia przez przeglądarkę
484-
void indicator.offsetHeight;
485-
indicator.style.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
486-
} else {
487-
moveIndicatorToEl(activeLink);
472+
const leftOffset = targetRect.left - parentRect.left;
473+
const targetWidth = targetRect.width;
474+
475+
indicator.style.width = `${targetWidth}px`;
476+
indicator.style.transform = `translateX(${leftOffset}px)`;
477+
indicator.style.opacity = '1';
488478
}
489479

490-
// Każdy widoczny element w pasku głównym
491-
const navItems = navCenter.querySelectorAll('.nav-link-item, .dropdown');
492-
navItems.forEach(item => {
493-
const targetHeaderEl = item.classList.contains('dropdown') ? item.querySelector('.dropbtn') : item;
480+
// Ustaw pozycję po pełnym wyrenderowaniu i załadowaniu fontów
481+
document.fonts.ready.then(() => {
482+
positionIndicator(activeLink);
483+
});
484+
485+
// Obsługa najechania na każdy przycisk na pasku
486+
const mainNavBtns = navCenter.querySelectorAll(':scope > .nav-link-btn, :scope > .dropdown');
487+
mainNavBtns.forEach(item => {
488+
const buttonToHighlight = item.classList.contains('dropdown') ? item.querySelector('.dropbtn') : item;
494489

495490
item.addEventListener('mouseenter', () => {
496-
moveIndicatorToEl(targetHeaderEl);
497-
});
498-
499-
// Rejestrujemy kliknięcie w link i zapisujemy pozycję docelową
500-
const allAnchors = item.querySelectorAll('a');
501-
allAnchors.forEach(anchor => {
502-
anchor.addEventListener('click', () => {
503-
if (anchor.getAttribute('href') === '#') return;
504-
sessionStorage.setItem('nav_indicator_left', targetHeaderEl.offsetLeft);
505-
sessionStorage.setItem('nav_indicator_width', targetHeaderEl.offsetWidth);
506-
});
491+
positionIndicator(buttonToHighlight);
507492
});
508493
});
509494

510-
// Po opuszczeniu paska nawigacji powróć do aktywnej strony
495+
// Opuszczenie paska nawigacji -> powrót na aktywny przycisk
511496
navCenter.addEventListener('mouseleave', () => {
512-
moveIndicatorToEl(activeLink);
497+
positionIndicator(activeLink);
498+
});
499+
500+
// Odświeżenie pozycji przy zmianie rozmiaru okna
501+
window.addEventListener('resize', () => {
502+
positionIndicator(activeLink);
513503
});
514504
});
515505
</script>

0 commit comments

Comments
 (0)