0ef0b106f6
gates / gates (push) Failing after 6m51s
Reported from his own screens. Five defects, two design.
1. THE CATEGORY ANCHORS WERE DEAD - all 100 of them. The sidebar's five app-category
links pointed at #fajlkezeles-irodai and friends; the ids are #fajlkezeles and
friends. The sidebar is copied into every page, so one wrong fragment was wrong
twenty times, and a dead fragment raises no error anywhere: the browser stays put.
New gate 23 resolves every in-site #fragment against the page it names (360 today).
It convicted two more on its first run: the home page's four hero tiles pointed at
/alkalmazasok#immich, which no page had ever carried, and the FAQ's contact button
pointed at a home-page section that had moved out. Every app card now carries its
slug as an id - taken from the card's own logo file, which gate 21 already ties to
the catalog, so the ids cannot drift from it silently.
Decoy site/dead-fragment puts the operator's own bug back and the gate convicts.
2. SZOLGALTATASOK IS A PAGE: /szolgaltatasok + /en/services, registered in TWINS, URL
and SHELL. The ten capability items moved VERBATIM out of the home page; the home
keeps the promise sentence, the three group names as links and a button, and is 345
Hungarian / 434 English words shorter. The .caps rules stopped being .page-index-
scoped, because the block now lives on a page with a different body class.
3. THE HOME HEADLINE is back in the hero column beside the picture, two lines with the
second in --blue-bright at clamp(2.1rem, 4.4vw, 3.2rem). M3 had moved it into
.page-header - the INNER pages' heading - so it shrank to 2.1rem and the domain
badge was stranded beside it.
4. THE HERO PICTURE is the real dashboard in a laptop. The frame is the operator's own
supplied render; the screen is dashboard-start-{hu,en}.webp composited into it, so a
visitor sees a real box's Launcher rather than a drawing of one - the supplied
screens are AI-drawn and misspell app names. 57 KB, named dashboard-laptop-<lang>
so gate 19 holds it to the page's language.
5. .page-lede HAD NO CSS AT ALL on 16 pages: a bare paragraph, full width of the
content column, hard against the box beneath it. 760px measure, centred over the
box, air beneath; left-aligned on /szolgaltatasok, which has no centred box.
6. THE SIDEBAR LOGO: the wordmark shipped at 0.67x the mark's width where the real
lockup (assets/logo.png, measured: mark 492px wide, wordmark 631px) has it at 1.28x.
Mark 112px, wordmark 25px tall, 28px less vertical padding.
7. SCROLLBARS are the page's own now. The first attempt missed the viewport's: it is
painted from <html>, and a `body.shell ::-webkit-...` rule only reaches scrollers
inside the page.
Also: the two Latin font subsets are preloaded. With font-display: swap the page
reflowed after first paint - measured at 1339px on /alkalmazasok#media.
Checked at 390px and 1440px on all 21 pages: no sideways scrolling, footer inside the
content column everywhere, drawer opens with all 13 items. site.css?v=24.
377 lines
24 KiB
HTML
377 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="hu" class="no-js">
|
||
<head>
|
||
<script>document.documentElement.className=document.documentElement.className.replace('no-js','js');</script>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Biztonsági mentés — 3-2-1 mentési stratégia otthoni szerverekhez | Felhom.eu</title>
|
||
<meta name="description" content="Professzionális 3-2-1 biztonsági mentés otthoni szerverhez. Automatikus backup három szinten: a dobozon, egy második meghajtón és titkosítva egy távoli tárhelyen.">
|
||
<meta name="keywords" content="biztonsági mentés, backup, 3-2-1 mentési szabály, offsite backup, adatmentés, otthoni szerver backup, titkosított mentés, automatikus mentés">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://felhom.eu/biztonsagimentes">
|
||
<link rel="alternate" hreflang="hu" href="https://felhom.eu/biztonsagimentes">
|
||
<link rel="alternate" hreflang="en" href="https://felhom.eu/en/backups">
|
||
<link rel="alternate" hreflang="x-default" href="https://felhom.eu/biztonsagimentes">
|
||
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://felhom.eu/biztonsagimentes">
|
||
<meta property="og:title" content="3-2-1 biztonsági mentés otthoni szerverhez">
|
||
<meta property="og:description" content="Professzionális szintű adatbiztonság otthon. Automatikus backup, és egy titkosított másolat távol is.">
|
||
<meta property="og:image" content="https://felhom.eu/assets/og-image.png">
|
||
<meta property="og:locale" content="hu_HU">
|
||
<meta property="og:site_name" content="Felhom.eu">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="3-2-1 biztonsági mentés otthoni szerverhez">
|
||
<meta name="twitter:description" content="Professzionális adatvédelem otthoni szerveredre. Automatikus backup, offsite mentés.">
|
||
<meta name="twitter:image" content="https://felhom.eu/assets/og-image.png">
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Article",
|
||
"headline": "3-2-1 biztonsági mentési stratégia otthoni szerverekhez",
|
||
"description": "Hogyan védd meg az adataidat professzionális mentési stratégiával otthoni környezetben.",
|
||
"author": {"@type": "Organization", "name": "Felhom.eu"},
|
||
"publisher": {"@type": "Organization", "name": "Felhom.eu", "logo": {"@type": "ImageObject", "url": "https://felhom.eu/assets/logo.png"}},
|
||
"mainEntityOfPage": "https://felhom.eu/biztonsagimentes"
|
||
}
|
||
</script>
|
||
<link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/pjs-latin.woff2">
|
||
<link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/pjs-latin-ext.woff2">
|
||
<!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
|
||
<link rel="stylesheet" href="/assets/site.css?v=24">
|
||
<link rel="stylesheet" href="/assets/shell.css?v=24">
|
||
<link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
|
||
<script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
|
||
</head>
|
||
<body class="shell page-biztonsagimentes">
|
||
<header class="mobile-topbar">
|
||
<a href="/" class="mobile-topbar-logo"><img src="/assets/logo_notext_white.svg" alt="Felhom.eu"></a>
|
||
<button type="button" class="nav-burger" id="navBurger" aria-expanded="false" aria-controls="sidebar" aria-label="Menü">
|
||
<span class="hamburger-box"><span class="hamburger-line"></span><span class="hamburger-line"></span><span class="hamburger-line"></span></span>
|
||
</button>
|
||
</header>
|
||
<div class="nav-backdrop" id="navBackdrop" hidden></div>
|
||
<nav class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<a href="/" class="sidebar-logo-link">
|
||
<img src="/assets/logo_notext_white.svg" alt="" class="sidebar-logo" aria-hidden="true">
|
||
<img src="/assets/logo-wordmark.png" alt="felhom.eu" class="sidebar-word">
|
||
</a>
|
||
</div>
|
||
<ul class="nav-links">
|
||
<li><a href="/"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg>Kezdőlap</a></li>
|
||
<li><a href="/szolgaltatasok"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rocket"/></svg>Szolgáltatások</a></li>
|
||
<li class="nav-group">
|
||
<button type="button" class="nav-group-toggle" aria-expanded="false" aria-controls="nav-group-apps"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>Alkalmazások<svg class="ico nav-chevron" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chevron-down"/></svg></button>
|
||
<ul id="nav-group-apps" class="nav-links nav-links-sub nav-links-nested">
|
||
<li><a href="/alkalmazasok">Minden alkalmazás</a></li>
|
||
<li><a href="/alkalmazasok#fajlkezeles">Fájlkezelés & Irodai</a></li>
|
||
<li><a href="/alkalmazasok#media">Média & Szórakozás</a></li>
|
||
<li><a href="/alkalmazasok#otthon">Otthon & Életmód</a></li>
|
||
<li><a href="/alkalmazasok#produktivitas">Produktivitás & Tudáskezelés</a></li>
|
||
<li><a href="/alkalmazasok#rendszer">Rendszer & Fejlesztés</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="/technologiak"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg>Technológiák</a></li>
|
||
<li><a href="/biztonsagimentes" class="active"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg>Biztonsági mentés</a></li>
|
||
</ul>
|
||
<div class="sidebar-bottom">
|
||
<a href="/teszteles" class="btn btn-outline sidebar-cta">Jelentkezem tesztelőnek →</a>
|
||
<div class="nav-group-label">A Felhomról</div>
|
||
<ul class="nav-links nav-links-sub">
|
||
<li><a href="/#hogyan-mukodik">Hogyan működik</a></li>
|
||
<li><a href="/gyik">GYIK</a></li>
|
||
<li><a href="/kapcsolat">Kapcsolat</a></li>
|
||
</ul>
|
||
<div class="sidebar-footer">
|
||
<details class="lang-globe"><summary class="lang-globe-btn" aria-label="Nyelv" title="Nyelv"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></summary><ul class="lang-globe-menu"><li><a href="/biztonsagimentes" lang="hu" hreflang="hu" class="lang-globe-item current" aria-current="true">Magyar</a></li><li><a href="/en/backups" lang="en" hreflang="en" class="lang-globe-item">English</a></li></ul></details>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<main class="content">
|
||
<div class="page-header">
|
||
<h1>Biztonsági <span>Mentés</span></h1>
|
||
</div>
|
||
<p class="page-lede">Az adataid biztonsága az első. Professzionális mentési stratégiával gondoskodunk róla, hogy egy hiba vagy baleset után is legyen honnan visszahozni.</p>
|
||
|
||
|
||
<!-- Bevezető -->
|
||
<section class="content-section">
|
||
<div class="container">
|
||
<div class="info-card">
|
||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-circle-help"/></svg> Miért fontos ez?</h3>
|
||
<p>Amikor valaki felhőszolgáltatást választ – legyen az Google Drive, iCloud, vagy bármilyen más – az egyik legfontosabb szempont az <strong>adatbiztonság</strong>. Nem az a kérdés, hogy valaki hozzáfér-e az adatainkhoz, hanem hogy <strong>megmaradnak-e</strong>.</p>
|
||
<p>A nagy szolgáltatók ezt milliárd dolláros infrastruktúrával oldják meg: több adatközpont, redundáns tárolás, automatikus mentések. De vajon otthoni szerveren is elérhető ugyanez a biztonság?</p>
|
||
<div class="highlight-box">
|
||
<p><strong>A válasz: igen.</strong> A megfelelő mentési stratégiával az otthoni szervered ugyanolyan biztonságos lehet, mint bármely felhőszolgáltató – sőt, te irányítasz mindent.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3-2-1 szabály -->
|
||
<section class="content-section alt-bg">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>A 3-2-1 <span>Mentési Szabály</span></h2>
|
||
<p>Az iparági szabvány, amit a professzionális rendszergazdák és vállalatok használnak világszerte</p>
|
||
</div>
|
||
|
||
<div class="backup-rule">
|
||
<div class="rule-number">3</div>
|
||
<div class="rule-content">
|
||
<h3>Három másolat az adataidból</h3>
|
||
<p>Mindig legyen legalább három példány minden fontos adatodból: az eredeti, és két biztonsági másolat. Ha az egyik sérül vagy elvész, még mindig van kettő tartalékban.</p>
|
||
<div class="example-box">
|
||
<div class="label">Példa</div>
|
||
<p>A családi fotóid megvannak a szerveren (1), egy külső merevlemezen (2), és egy távoli helyen (3).</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="backup-rule">
|
||
<div class="rule-number">2</div>
|
||
<div class="rule-content">
|
||
<h3>Két különböző tárolótípus</h3>
|
||
<p>Az adatokat legalább kétféle tárolóeszközön tartsd. A különböző eszközök különböző meghibásodási módokkal rendelkeznek – ha az egyik típus elromlik, a másik valószínűleg rendben lesz.</p>
|
||
<div class="example-box">
|
||
<div class="label">Példa</div>
|
||
<p>A szerver belső SSD-jén tárolod az adatokat, de a mentés külső HDD-re vagy NAS-ra kerül.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="backup-rule">
|
||
<div class="rule-number">1</div>
|
||
<div class="rule-content">
|
||
<h3>Egy offsite (távoli) másolat</h3>
|
||
<p>Legalább egy másolat legyen fizikailag más helyen. Ez véd a lokális katasztrófák ellen: tűz, vízkár, betörés, vagy akár egy villámcsapás sem veszélyeztetheti az összes adatodat.</p>
|
||
<div class="example-box">
|
||
<div class="label">Példa</div>
|
||
<p>A mentés automatikusan átmásolódik egy barát/rokon szerverére, vagy titkosítva felhőbe kerül.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="backup-diagram">
|
||
<h3>Így néz ki a gyakorlatban</h3>
|
||
<div class="diagram-visual">
|
||
<div class="diagram-node primary">
|
||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg></div>
|
||
<div class="label">Szerver</div>
|
||
<div class="sublabel">Eredeti adat</div>
|
||
</div>
|
||
<div class="diagram-arrow">→</div>
|
||
<div class="diagram-node">
|
||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-hard-drive"/></svg></div>
|
||
<div class="label">Helyi backup</div>
|
||
<div class="sublabel">Külső HDD/NAS</div>
|
||
</div>
|
||
<div class="diagram-arrow">→</div>
|
||
<div class="diagram-node">
|
||
<div class="icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></div>
|
||
<div class="label">Offsite backup</div>
|
||
<div class="sublabel">Távoli hely</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Offsite megoldások -->
|
||
<section class="content-section">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>Offsite <span>Mentési Megoldások</span></h2>
|
||
<p>Az "1" a 3-2-1 szabályban – a legfontosabb, és sokszor a legelhanyagoltabb</p>
|
||
</div>
|
||
|
||
<div class="methods-grid">
|
||
<div class="method-card">
|
||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-users"/></svg></div>
|
||
<h3>„Haver rendszer"</h3>
|
||
<p>A legegyszerűbb és legolcsóbb megoldás: cserélj mentéseket egy megbízható ismerőssel. Te mentesz az ő szerverére, ő ment a tiédre.</p>
|
||
<ul class="method-pros">
|
||
<li>Nincs havi díj</li>
|
||
<li>Teljes kontroll az adatok felett</li>
|
||
<li>Kölcsönös biztonság</li>
|
||
<li>End-to-end titkosítás lehetséges</li>
|
||
</ul>
|
||
<div class="example-box">
|
||
<div class="label">Hogyan működik?</div>
|
||
<p>Titkosított mentések automatikusan szinkronizálódnak VPN kapcsolaton keresztül.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="method-card">
|
||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-building-2"/></svg></div>
|
||
<h3>Otthon ↔ Iroda</h3>
|
||
<p>Ha van munkahelyed vagy saját irodád, használd ki! A két helyszín természetes földrajzi távolságot biztosít.</p>
|
||
<ul class="method-pros">
|
||
<li>Meglévő infrastruktúra használata</li>
|
||
<li>Biztonságos, ismert környezet</li>
|
||
<li>Gyors helyreállítás szükség esetén</li>
|
||
</ul>
|
||
<div class="example-box">
|
||
<div class="label">Tipp</div>
|
||
<p>Egy kis, csendes mini PC az iroda sarkában tökéletes backup célpont lehet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="method-card">
|
||
<div class="method-icon"><svg class="ico-tile" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-cloud"/></svg></div>
|
||
<h3>Titkosított felhő backup</h3>
|
||
<p>Ha nincs megbízható ismerős vagy második helyszín, a felhő a megoldás. Fontos: az adatokat a feltöltés előtt titkosítjuk!</p>
|
||
<ul class="method-pros">
|
||
<li>Professzionális infrastruktúra</li>
|
||
<li>Földrajzilag elosztott tárolás</li>
|
||
<li>Nincs szükség hardverre</li>
|
||
</ul>
|
||
<ul class="method-pros method-cons">
|
||
<li>Havi/éves díj (tárolás méretétől függően)</li>
|
||
</ul>
|
||
<div class="example-box">
|
||
<div class="label">Megjegyzés</div>
|
||
<p>A tárhely díja a mentett adatmennyiségtől függ. A Felhom dobozon ezt a megoldást használjuk.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Mi hogyan csináljuk -->
|
||
<section class="content-section alt-bg">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2>Mi Hogyan <span>Oldjuk Meg?</span></h2>
|
||
<p>Minden általunk telepített szerveren alapértelmezetten beállítjuk a mentéseket</p>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg> Automatizált mentési rendszer</h3>
|
||
<p>A szerver minden éjjel magától készít mentéseket, három szinten: <strong>a dobozon</strong>, egy <strong>második meghajtón</strong> (ha van), és <strong>titkosítva egy távoli tárhelyen</strong>. Nem kell semmire sem emlékezned – a rendszer gondoskodik róla.</p>
|
||
<p>A mentések inkrementálisak, ami azt jelenti, hogy csak a változások kerülnek mentésre. Ez helyet és időt takarít meg, miközben a teljes visszaállítási lehetőség megmarad.</p>
|
||
|
||
<div class="highlight-box">
|
||
<p><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-monitor"/></svg> <strong>Nem csak az adatok:</strong> a Proxmox alapnak köszönhetően nem csupán a fájljaid és adatbázisaid menthetők, hanem az <strong>egész rendszered</strong> is – a teljes doboz is biztonsági mentésbe kerül, és ebből visszaállítható. Ha maga a doboz megy tönkre, az újratelepített rendszerre a titkosított távoli mentésből visszahozhatók az alkalmazásaid adatai – a helyreállítási kóddal.</p>
|
||
</div>
|
||
|
||
<div class="highlight-box">
|
||
<p><strong>A távoli mentés helye:</strong> a Felhom dobozon a távoli másolat egy általunk biztosított tárhelyre kerül, titkosítva. A „haver rendszer” és az iroda általános lehetőségek a 3-2-1 szabályhoz – ezeket ma nem állítjuk be.</p>
|
||
</div>
|
||
|
||
<h3 style="margin-top: 24px;"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-lock"/></svg> A helyreállítási kód – amit csak te ismersz</h3>
|
||
<p>A távoli mentésed titkosított, és a titkosítás kulcsa egy <strong>helyreállítási kód</strong>. Ez a kód pontosan egyszer jelenik meg: a te képernyődön, a beállításkor. Nálunk nem marad belőle másolat.</p>
|
||
<p>Ez tudatos döntés, és két oldala van. Az egyik, hogy a távoli mentésedet rajtad kívül <strong>senki</strong> nem tudja elolvasni – mi sem. A másik, hogy ha a doboz megsemmisül és a kód is elveszett, akkor a távoli mentés <strong>nekünk sem visszaállítható</strong>. Ezért a kód papírra kerül, és jó helyre.</p>
|
||
|
||
<h3 style="margin-top: 24px;"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg> Monitoring és értesítések</h3>
|
||
<p>A mentéseket folyamatosan figyeljük. Ha probléma van – sikertelen mentés, betelő tárhely, kapcsolati hiba – az a felügyeleti rendszerünkben megjelenik, és e-mail értesítés is indul róla. A zárt teszt egyik célja épp az, hogy ezeket az értesítéseket éles körülmények között csiszoljuk.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>Kérdésed van a <span>mentésekről?</span></h2>
|
||
<p>Beszéljük át, mi a legjobb megoldás a te helyzetedben. Segítünk megtalálni az egyensúlyt a biztonság és a költségek között.</p>
|
||
<a href="/kapcsolat" class="cta-button">Kapcsolatfelvétel →</a>
|
||
</div>
|
||
</section>
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2026 felhom.eu – Saját felhőd, saját szabályaid</p>
|
||
<p class="footer-legal">Üzemeltető: Nagyfenyvesi Viktor · <a href="mailto:info@felhom.eu">info@felhom.eu</a> · <a href="/adatkezeles">Adatkezelési tájékoztató</a> · <a href="/feltetelek">Feltételek</a></p>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
<script>
|
||
(function() {
|
||
var hamburger = document.getElementById('hamburger');
|
||
var navLinks = document.querySelector('.nav-links');
|
||
var overlay = document.getElementById('mobileOverlay');
|
||
var body = document.body;
|
||
|
||
if (!hamburger || !navLinks || !overlay) {
|
||
console.warn('[mobile-menu] Missing elements:', {
|
||
hamburger: !!hamburger,
|
||
navLinks: !!navLinks,
|
||
overlay: !!overlay
|
||
});
|
||
return;
|
||
}
|
||
|
||
function openMenu() {
|
||
hamburger.classList.add('is-active');
|
||
navLinks.classList.add('is-open');
|
||
overlay.classList.add('is-visible');
|
||
body.classList.add('menu-open');
|
||
hamburger.setAttribute('aria-expanded', 'true');
|
||
hamburger.setAttribute('aria-label', 'Menü bezárása');
|
||
}
|
||
|
||
function closeMenu() {
|
||
hamburger.classList.remove('is-active');
|
||
navLinks.classList.remove('is-open');
|
||
overlay.classList.remove('is-visible');
|
||
body.classList.remove('menu-open');
|
||
hamburger.setAttribute('aria-expanded', 'false');
|
||
hamburger.setAttribute('aria-label', 'Menü megnyitása');
|
||
}
|
||
|
||
hamburger.addEventListener('click', function() {
|
||
if (navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
} else {
|
||
openMenu();
|
||
}
|
||
});
|
||
|
||
overlay.addEventListener('click', closeMenu);
|
||
|
||
navLinks.querySelectorAll('a').forEach(function(link) {
|
||
link.addEventListener('click', closeMenu);
|
||
});
|
||
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
}
|
||
});
|
||
|
||
window.addEventListener('resize', function() {
|
||
if (window.innerWidth > 900 && navLinks.classList.contains('is-open')) {
|
||
closeMenu();
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
<script>
|
||
(function(){
|
||
var b=document.getElementById('navBurger'),s=document.getElementById('sidebar'),k=document.getElementById('navBackdrop');
|
||
if(!b||!s||!k)return;
|
||
function open(){s.classList.add('is-open');k.hidden=false;document.body.classList.add('nav-open');b.setAttribute('aria-expanded','true');}
|
||
function close(){s.classList.remove('is-open');k.hidden=true;document.body.classList.remove('nav-open');b.setAttribute('aria-expanded','false');}
|
||
b.addEventListener('click',function(){s.classList.contains('is-open')?close():open();});
|
||
k.addEventListener('click',close);
|
||
document.addEventListener('keydown',function(e){if(e.key==='Escape'&&s.classList.contains('is-open')){close();b.focus();}});
|
||
s.querySelectorAll('a').forEach(function(l){l.addEventListener('click',close);});
|
||
window.addEventListener('resize',function(){if(window.innerWidth>768)close();});
|
||
})();
|
||
document.addEventListener('click',function(e){
|
||
var btn=e.target.closest?e.target.closest('.nav-group-toggle'):null;
|
||
if(!btn)return;
|
||
var g=btn.closest('.nav-group');if(!g)return;
|
||
var willOpen=!g.classList.contains('is-open');
|
||
document.querySelectorAll('.nav-group.is-open').forEach(function(x){
|
||
x.classList.remove('is-open');
|
||
var t=x.querySelector('.nav-group-toggle');if(t)t.setAttribute('aria-expanded','false');
|
||
});
|
||
if(willOpen){g.classList.add('is-open');btn.setAttribute('aria-expanded','true');}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|