OTSSignsTheme/custom/otssignange/js/theme.js

/**
 * OTS Signage Modern Theme - Client-Side Utilities
 * Sidebar toggle, dropdown menus, and UI interactions
 */

(function() {
  'use strict';

  const STORAGE_KEYS = {
    sidebarCollapsed: 'otsTheme:sidebarCollapsed'
  };

  /**
   * Initialize sidebar toggle functionality
   */
  function initSidebarToggle() {
    const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]');
    const sidebar = document.querySelector('.ots-sidebar');

    if (!toggleBtn || !sidebar) return;

    toggleBtn.addEventListener('click', function(e) {
      e.preventDefault();
      sidebar.classList.toggle('active');
    });

    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', function(e) {
      if (window.innerWidth <= 768) {
        const isClickInsideSidebar = sidebar.contains(e.target);
        const isClickOnToggle = toggleBtn.contains(e.target);
        
        if (!isClickInsideSidebar && !isClickOnToggle && sidebar.classList.contains('active')) {
          sidebar.classList.remove('active');
        }
      }
    });
  }

  /**
   * Initialize dropdown menus
   */
  function initDropdowns() {
    const dropdowns = document.querySelectorAll('.dropdown');
    
    dropdowns.forEach(dropdown => {
      const button = dropdown.querySelector('.dropdown-menu');
      
      if (!button) return;
      
      const menu = dropdown.querySelector('.dropdown-menu');
      
      // Toggle menu on button click
      dropdown.addEventListener('click', function(e) {
        if (e.target.closest('.user-btn') || e.target.closest('[aria-label="User menu"]')) {
          e.preventDefault();
          dropdown.classList.toggle('active');
        }
      });
      
      // Close menu when clicking outside
      document.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target)) {
          dropdown.classList.remove('active');
        }
      });
    });
  }

  /**
   * Initialize search functionality
   */
  function initSearch() {
    const searchForm = document.querySelector('.topbar-search');
    if (!searchForm) return;

    const input = searchForm.querySelector('.search-input');
    if (input) {
      input.addEventListener('focus', function() {
        searchForm.style.borderColor = 'var(--color-primary)';
      });
      input.addEventListener('blur', function() {
        searchForm.style.borderColor = 'var(--color-border)';
      });
    }
  }

  /**
   * Initialize page specific interactions
   */
  function initPageInteractions() {
    // Displays page - folder selection
    const folderItems = document.querySelectorAll('.folder-item');
    folderItems.forEach(item => {
      item.addEventListener('click', function() {
        folderItems.forEach(f => f.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // Media page - item selection
    const mediaItems = document.querySelectorAll('.media-item');
    mediaItems.forEach(item => {
      item.addEventListener('click', function() {
        this.style.opacity = '0.7';
        setTimeout(() => this.style.opacity = '1', 200);
      });
    });
  }

  /**
   * Make sidebar responsive
   */
  function makeResponsive() {
    const sidebar = document.querySelector('.ots-sidebar');
    const main = document.querySelector('.ots-main');
    
    if (!sidebar) return;
    
    // Add toggle button for mobile
    if (window.innerWidth <= 768) {
      sidebar.classList.add('mobile');
    }
    
    window.addEventListener('resize', function() {
      if (window.innerWidth > 768) {
        sidebar.classList.remove('mobile', 'active');
      } else {
        sidebar.classList.add('mobile');
      }
    });
  }

  /**
   * Initialize all features when DOM is ready
   */
  function init() {
    initSidebarToggle();
    initDropdowns();
    initSearch();
    initPageInteractions();
    makeResponsive();
  }

  // Wait for DOM to be ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

    themeBtn.addEventListener('click', function() {
      const currentTheme = html.getAttribute('data-theme') || 'light';
      const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

      html.setAttribute('data-theme', newTheme);
      localStorage.setItem(STORAGE_KEYS.themeMode, newTheme);
      themeBtn.setAttribute('aria-pressed', newTheme === 'dark');
    });
  }

  /**
   * Initialize page on DOM ready
   */
  function init() {
    initSidebarToggle();
    initThemeToggle();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();