panel

frontend/static/js/panel/index.js

@@ -0,0 +1,67 @@
+export const run = () => {
+  const html = document.documentElement;
+  const body = document.body;
+  const menuLinks = document.querySelectorAll('.admin-menu a');
+  const collapseBtn = document.querySelector('.admin-menu .collapse-btn');
+  const toggleMobileMenu = document.querySelector('.toggle-mob-menu');
+  const switchInput = document.querySelector('.switch input');
+  const switchLabel = document.querySelector('.switch label');
+  const switchLabelText = switchLabel.querySelector('span:last-child');
+  const collapsedClass = 'collapsed';
+  const lightModeClass = 'light-mode';
+
+  /*TOGGLE HEADER STATE*/
+  collapseBtn.addEventListener('click', function() {
+    body.classList.toggle(collapsedClass);
+    this.getAttribute('aria-expanded') == 'true'
+      ? this.setAttribute('aria-expanded', 'false')
+      : this.setAttribute('aria-expanded', 'true');
+    this.getAttribute('aria-label') == 'collapse menu'
+      ? this.setAttribute('aria-label', 'expand menu')
+      : this.setAttribute('aria-label', 'collapse menu');
+  });
+
+  /*TOGGLE MOBILE MENU*/
+  toggleMobileMenu.addEventListener('click', function() {
+    body.classList.toggle('mob-menu-opened');
+    this.getAttribute('aria-expanded') == 'true'
+      ? this.setAttribute('aria-expanded', 'false')
+      : this.setAttribute('aria-expanded', 'true');
+    this.getAttribute('aria-label') == 'open menu'
+      ? this.setAttribute('aria-label', 'close menu')
+      : this.setAttribute('aria-label', 'open menu');
+  });
+
+  /*SHOW TOOLTIP ON MENU LINK HOVER*/
+  for (const link of menuLinks) {
+    link.addEventListener('mouseenter', function() {
+      if (
+        body.classList.contains(collapsedClass) &&
+        window.matchMedia('(min-width: 768px)').matches
+      ) {
+        const tooltip = this.querySelector('span').textContent;
+        this.setAttribute('title', tooltip);
+      } else {
+        this.removeAttribute('title');
+      }
+    });
+  }
+
+  /*TOGGLE LIGHT/DARK MODE*/
+  if (localStorage.getItem('dark-mode') === 'false') {
+    html.classList.add(lightModeClass);
+    switchInput.checked = false;
+    switchLabelText.textContent = 'Light';
+  }
+
+  switchInput.addEventListener('input', function() {
+    html.classList.toggle(lightModeClass);
+    if (html.classList.contains(lightModeClass)) {
+      switchLabelText.textContent = 'Light';
+      localStorage.setItem('dark-mode', 'false');
+    } else {
+      switchLabelText.textContent = 'Dark';
+      localStorage.setItem('dark-mode', 'true');
+    }
+  });
+};