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

frontend/main.ts

@@ -1,8 +1,9 @@
+import { Sidebar } from './js/sidebar';
 import './scss/app.scss'
 
 document.addEventListener('DOMContentLoaded', function() {
-  console.log("init");
   initSearch();
+  initSidebar();
 });
 
  function initSearch() {
@@ -40,3 +41,20 @@ function filterElements(input: string) {
     resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '<strong>' + amountShownElements + '</strong>' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden');
   }
 }
+
+function initSidebar() {
+  const sidebarTrigger = <NodeListOf<HTMLElement>>document.querySelectorAll('[data-trigger]');
+
+  if(sidebarTrigger) {
+    Array.prototype.forEach.call(sidebarTrigger, (triggerElement: HTMLElement) => {
+      if(triggerElement.dataset.trigger) {
+        const sidebar = new Sidebar(triggerElement.dataset.trigger);
+
+        triggerElement.addEventListener('click', () => {
+          sidebar.toggle();
+        });
+        
+      }
+    });
+  }
+}

frontend/scss/app.scss

@@ -1,3 +1,87 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* purgecss start ignore */
+.sidebar {
+  position: fixed;
+  overflow-y: scroll;
+  top: 0;
+  background: white;
+  z-index: 2000;
+  width: 0;
+  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
+
+  &.open {
+      background-color: rgba(255, 255, 255, 100%);
+      display: block;
+      height: 100vh;
+      right: 0;
+      top: 0;
+      width: 375px;
+      z-index: 40000;
+  }
+
+  &.slide-in {
+      transition-duration: 75ms;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  &.from-right {
+      right: -24rem;
+
+      &.open {
+          right: 0;
+      }
+  }
+
+  &.from-left {
+      left: -24rem;
+
+      &.open {
+          left: 0;
+      }
+  }
+
+  &-overlay {
+      display: none;
+
+      &.show {
+          background-color: rgba(0, 0, 0, 0.2);
+          content: '';
+          display: block;
+          height: 100%;
+          left: 0;
+          position: fixed;
+          top: 0;
+          width: 100%;
+          z-index: 1025;
+      }
+  }
+
+  &-close {
+      border-radius: 100%;
+      width: 27.5px;
+
+      &:focus {
+          background: white !important;
+      }
+  }
+
+  &-footer {
+      position: fixed;
+      margin: 0 -8px -4px;
+      width: 374px;
+      bottom: 0;
+  }
+
+  &-header {
+      position: fixed;
+      width: 375px;
+      top: 0;
+      z-index: 1;
+  }
+}
+/* purgecss end ignore */