[TASK] add overlays sidebar

frontend/js/sidebar.ts

@@ -0,0 +1,47 @@
+export class Sidebar {
+  element: HTMLElement | null;
+  trigger: string;
+  contentWrapper: HTMLElement| null;
+  closeBtn: any;
+  overlay: HTMLElement| null;
+  isOpen: boolean;
+
+  constructor(trigger: string) {
+      this.trigger = trigger;
+      this.element = document.getElementById(trigger);
+      this.contentWrapper = document.querySelector('body');
+      this.overlay = document.querySelector('.sidebar-overlay[data-trigger='+ this.trigger + ']');
+      if(this.element) {
+        this.closeBtn = this.element.querySelector('[data-trigger='+ this.trigger + ']');
+      }
+      this.isOpen = false;
+  }
+
+  checkStatus() {
+      return this.isOpen;
+  }
+
+  toggle() {
+      this.isOpen = !this.isOpen;
+      if(this.trigger) {
+        document.getElementById(this.trigger)?.classList.toggle('open');
+      }
+      if( this.contentWrapper) {
+        this.contentWrapper.classList.toggle('overlay');
+      }
+      if(this.overlay) {
+        this.overlay.classList.toggle('show');
+      }
+      if(this.element) {
+        this.element.ariaModal = (this.element.ariaModal === 'true') ? 'false' : 'true';
+        if(this.isOpen){
+            const focusElement= this.element.querySelector('.focus-js') as HTMLElement | null;
+            if(focusElement) {
+                focusElement.focus();
+            } else {
+                this.closeBtn.focus();
+            }
+        }
+      }
+  }
+}