[TASK] modularize typescript structure into single components

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();
+new MenuButtonToggleComponent();

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');
+        }
+    }
+}