diff --git a/src/_includes/header/header.ejs b/src/_includes/header/header.ejs index e12fa3f..2796fcd 100644 --- a/src/_includes/header/header.ejs +++ b/src/_includes/header/header.ejs @@ -34,7 +34,7 @@ <%# External links %> -
+
Community:
@@ -52,7 +52,7 @@
-
+
diff --git a/src/assets/script/nav-links.js b/src/assets/script/nav-links.js index 33f4017..6aed9a7 100644 --- a/src/assets/script/nav-links.js +++ b/src/assets/script/nav-links.js @@ -1,18 +1,42 @@ class NavLinks extends HTMLElement { constructor() { super(); + this._burger = null; } - + connectedCallback() { - const burger = this.querySelector('#menu-toggle'); - if (!burger) return; + this._burger = this.querySelector('#menu-toggle'); + + if (!this._burger) { + return; + } + + this._handleResize(); + window.addEventListener('resize', this._handleResize); this.addEventListener('click', (e) => { const link = e.target.closest('a'); + if (link) { - burger.checked = false; + this._burger.checked = false; + document.body.classList.remove('Ov-h'); } }); + + this._burger.addEventListener('change', () => { + document.body.classList.toggle('Ov-h', this._burger.checked); + }); + } + + disconnectedCallback() { + window.removeEventListener('resize', this._handleResize); + } + + _handleResize = () => { + if (window.innerWidth > 768 && this._burger && this._burger.checked) { + this._burger.checked = false; + document.body.classList.remove('Ov-h'); + } } } diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 36bf08a..80f0862 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -70,6 +70,7 @@ a { --ml-core740: rgba(249, 207, 103, 0.00); --ml-core745: #394EB6; --ml-core750: rgb(253, 173, 245, 0.6); + --ml-core760: #D2B5D0; --ml-core650: rgba(240, 67, 140, 0); --ml-core600: rgba(249, 207, 103, 0); --ml-primary800: rgba(239,246,255,1); @@ -156,6 +157,7 @@ a { --ml-core740: rgba(249, 207, 103, 0.00); --ml-core745: #394EB6; --ml-core750: #121828; + --ml-core760: #5865A2; --ml-core650: rgba(57, 78, 182, 0); --ml-core600: rgba(129, 200, 241, 0); --ml-core500: #2e2e2e;