diff --git a/Resources/Private/Build/TypeScript/app.ts b/Resources/Private/Build/TypeScript/app.ts index 2251998..2ff11cb 100644 --- a/Resources/Private/Build/TypeScript/app.ts +++ b/Resources/Private/Build/TypeScript/app.ts @@ -1,17 +1,3 @@ +import MenuButtonToggleComponent from './components/menu-button-toggle/menu-button-toggle.component' -function headerComponent(){ - const header = document.querySelector('.header') - const headerMenuButtonToggle = header?.querySelector('.header__mobile-burger') - const headerNavigationContainer = header?.querySelector('.header__menu') - - if (headerMenuButtonToggle){ - headerMenuButtonToggle.addEventListener('click', ()=>{ - if (headerNavigationContainer){ - headerNavigationContainer.classList.toggle('active') - headerMenuButtonToggle.classList.toggle('active') - } - }) - } -} - -headerComponent(); \ No newline at end of file +new MenuButtonToggleComponent(); diff --git a/Resources/Private/Build/TypeScript/components/menu-button-toggle/menu-button-toggle.component.ts b/Resources/Private/Build/TypeScript/components/menu-button-toggle/menu-button-toggle.component.ts new file mode 100644 index 0000000..1c43799 --- /dev/null +++ b/Resources/Private/Build/TypeScript/components/menu-button-toggle/menu-button-toggle.component.ts @@ -0,0 +1,29 @@ +export default class MenuButtonToggle { + private readonly header: HTMLElement | null; + private readonly headerMenuButtonToggle: Element | null | undefined; + private readonly headerNavigationContainer: Element | null | undefined; + + + constructor() { + this.header = document.querySelector('.header'); + + if (!this.header) return; + + this.headerMenuButtonToggle = this.header.querySelector('.header__mobile-burger') || null; + this.headerNavigationContainer = this.header.querySelector('.header__menu') || null; + this.#initialize(); + } + + #initialize(): void { + if (this.headerMenuButtonToggle) { + this.headerMenuButtonToggle.addEventListener('click', () => this.#toggleMenu()); + } + } + + #toggleMenu(): void { + if (this.headerNavigationContainer && this.headerMenuButtonToggle) { + this.headerNavigationContainer.classList.toggle('active'); + this.headerMenuButtonToggle.classList.toggle('active'); + } + } +}