npm - adminator-admin-dashboard - Versions diffs - 2.7.0 - Mend

adminator-admin-dashboard 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

package/CLAUDE.md +162 -0
package/LICENSE +21 -0
package/README.md +376 -0
package/RELEASE_NOTES.md +92 -0
package/dist/1e59d2330b4c6deb84b3.ttf +0 -0
package/dist/20fd1704ea223900efa9.woff2 +0 -0
package/dist/29b39089170885ae2967.woff +0 -0
package/dist/404.html +24 -0
package/dist/500.html +24 -0
package/dist/55b07f26c86c8e3d3754.svg +1 -0
package/dist/8b43027f47b20503057d.eot +0 -0
package/dist/9bad94440d49256265a5.eot +0 -0
package/dist/9fad440d8ee7a949a9a9.svg +1 -0
package/dist/assets/c1e38fd9e0e74ba58f7a2b77ef29fdd3.svg +2671 -0
package/dist/assets/f0fc8c798eac5636249c4ea287832422.svg +362 -0
package/dist/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
package/dist/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
package/dist/assets/static/fonts/icons/themify/themify.eot +0 -0
package/dist/assets/static/fonts/icons/themify/themify.svg +362 -0
package/dist/assets/static/fonts/icons/themify/themify.ttf +0 -0
package/dist/assets/static/fonts/icons/themify/themify.woff +0 -0
package/dist/assets/static/images/404.png +0 -0
package/dist/assets/static/images/500.png +0 -0
package/dist/assets/static/images/bg.jpg +0 -0
package/dist/assets/static/images/datatables/sort_asc.png +0 -0
package/dist/assets/static/images/datatables/sort_asc_disabled.png +0 -0
package/dist/assets/static/images/datatables/sort_both.png +0 -0
package/dist/assets/static/images/datatables/sort_desc.png +0 -0
package/dist/assets/static/images/datatables/sort_desc_disabled.png +0 -0
package/dist/assets/static/images/logo-circle.svg +7 -0
package/dist/assets/static/images/logo-gradient.svg +13 -0
package/dist/assets/static/images/logo-outline.svg +7 -0
package/dist/assets/static/images/logo.png +0 -0
package/dist/assets/static/images/logo.svg +5 -0
package/dist/basic-table.html +715 -0
package/dist/blank.html +522 -0
package/dist/buttons.html +467 -0
package/dist/calendar.html +692 -0
package/dist/charts.html +681 -0
package/dist/chat.html +730 -0
package/dist/compose.html +643 -0
package/dist/datatable.html +1009 -0
package/dist/eda8b94308c6f538f04a.ttf +0 -0
package/dist/email.html +992 -0
package/dist/f691f37e57f04c152e23.woff +0 -0
package/dist/forms.html +760 -0
package/dist/google-maps.html +530 -0
package/dist/index.html +1090 -0
package/dist/main.js +61239 -0
package/dist/main.js.map +1 -0
package/dist/signin.html +107 -0
package/dist/signup.html +104 -0
package/dist/test.html +91 -0
package/dist/ui.html +931 -0
package/dist/vector-maps.html +529 -0
package/package.json +112 -0
package/src/404.html +24 -0
package/src/500.html +24 -0
package/src/assets/scripts/app.js +644 -0
package/src/assets/scripts/charts/chartJS/index.js +148 -0
package/src/assets/scripts/charts/easyPieChart/index.js +200 -0
package/src/assets/scripts/charts/index.js +3 -0
package/src/assets/scripts/charts/sparkline/index.js +208 -0
package/src/assets/scripts/chat/index.js +11 -0
package/src/assets/scripts/components/Chart.js +1390 -0
package/src/assets/scripts/components/Sidebar.js +241 -0
package/src/assets/scripts/constants/colors.js +274 -0
package/src/assets/scripts/datatable/index.js +379 -0
package/src/assets/scripts/datepicker/index.js +302 -0
package/src/assets/scripts/email/index.js +25 -0
package/src/assets/scripts/fullcalendar/index.js +86 -0
package/src/assets/scripts/googleMaps/index.js +93 -0
package/src/assets/scripts/index.js +18 -0
package/src/assets/scripts/masonry/index.js +14 -0
package/src/assets/scripts/popover/index.js +109 -0
package/src/assets/scripts/scrollbar/index.js +10 -0
package/src/assets/scripts/search/index.js +15 -0
package/src/assets/scripts/sidebar/index.js +140 -0
package/src/assets/scripts/skycons/index.js +52 -0
package/src/assets/scripts/ui/index.js +412 -0
package/src/assets/scripts/utils/date.js +242 -0
package/src/assets/scripts/utils/dom.js +349 -0
package/src/assets/scripts/utils/index.js +45 -0
package/src/assets/scripts/utils/theme.js +105 -0
package/src/assets/scripts/vectorMaps/index.js +277 -0
package/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf +0 -0
package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot +0 -0
package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.svg +2671 -0
package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf +0 -0
package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff +0 -0
package/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2 +0 -0
package/src/assets/static/fonts/icons/themify/themify.eot +0 -0
package/src/assets/static/fonts/icons/themify/themify.svg +362 -0
package/src/assets/static/fonts/icons/themify/themify.ttf +0 -0
package/src/assets/static/fonts/icons/themify/themify.woff +0 -0
package/src/assets/static/images/404.png +0 -0
package/src/assets/static/images/500.png +0 -0
package/src/assets/static/images/bg.jpg +0 -0
package/src/assets/static/images/datatables/sort_asc.png +0 -0
package/src/assets/static/images/datatables/sort_asc_disabled.png +0 -0
package/src/assets/static/images/datatables/sort_both.png +0 -0
package/src/assets/static/images/datatables/sort_desc.png +0 -0
package/src/assets/static/images/datatables/sort_desc_disabled.png +0 -0
package/src/assets/static/images/logo-circle.svg +7 -0
package/src/assets/static/images/logo-gradient.svg +13 -0
package/src/assets/static/images/logo-outline.svg +7 -0
package/src/assets/static/images/logo.png +0 -0
package/src/assets/static/images/logo.svg +5 -0
package/src/assets/styles/index.scss +801 -0
package/src/assets/styles/spec/components/easyPieChart.scss +11 -0
package/src/assets/styles/spec/components/footer.scss +4 -0
package/src/assets/styles/spec/components/forms.scss +288 -0
package/src/assets/styles/spec/components/index.scss +9 -0
package/src/assets/styles/spec/components/loader.scss +46 -0
package/src/assets/styles/spec/components/masonry.scss +1 -0
package/src/assets/styles/spec/components/pageContainer.scss +255 -0
package/src/assets/styles/spec/components/progressBar.scss +6 -0
package/src/assets/styles/spec/components/sidebar.scss +642 -0
package/src/assets/styles/spec/components/topbar.scss +455 -0
package/src/assets/styles/spec/generic/base.scss +102 -0
package/src/assets/styles/spec/generic/index.scss +1 -0
package/src/assets/styles/spec/index.scss +4 -0
package/src/assets/styles/spec/screens/chat.scss +147 -0
package/src/assets/styles/spec/screens/email.scss +108 -0
package/src/assets/styles/spec/screens/index.scss +2 -0
package/src/assets/styles/spec/settings/baseColors.scss +103 -0
package/src/assets/styles/spec/settings/borders.scss +6 -0
package/src/assets/styles/spec/settings/breakpoints.scss +26 -0
package/src/assets/styles/spec/settings/fonts.scss +4 -0
package/src/assets/styles/spec/settings/index.scss +4 -0
package/src/assets/styles/spec/settings/materialColors.scss +550 -0
package/src/assets/styles/spec/tools/index.scss +1 -0
package/src/assets/styles/spec/tools/mixins/clearfix.scss +15 -0
package/src/assets/styles/spec/tools/mixins/index.scss +3 -0
package/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss +58 -0
package/src/assets/styles/spec/tools/mixins/placeholder.scss +10 -0
package/src/assets/styles/spec/utils/colors.scss +33 -0
package/src/assets/styles/spec/utils/index.scss +2 -0
package/src/assets/styles/spec/utils/layout/helpers/border.scss +78 -0
package/src/assets/styles/spec/utils/layout/helpers/flex.scss +220 -0
package/src/assets/styles/spec/utils/layout/helpers/index.scss +11 -0
package/src/assets/styles/spec/utils/layout/helpers/layout.scss +137 -0
package/src/assets/styles/spec/utils/layout/helpers/lists.scss +23 -0
package/src/assets/styles/spec/utils/layout/helpers/margin.scss +266 -0
package/src/assets/styles/spec/utils/layout/helpers/objects.scss +91 -0
package/src/assets/styles/spec/utils/layout/helpers/padding.scss +147 -0
package/src/assets/styles/spec/utils/layout/helpers/positions.scss +118 -0
package/src/assets/styles/spec/utils/layout/helpers/pseudo.scss +6 -0
package/src/assets/styles/spec/utils/layout/helpers/sizes.scss +157 -0
package/src/assets/styles/spec/utils/layout/helpers/typography.scss +127 -0
package/src/assets/styles/spec/utils/layout/index.scss +3 -0
package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss +25 -0
package/src/assets/styles/spec/utils/layout/mixins/index.scss +2 -0
package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss +28 -0
package/src/assets/styles/spec/utils/layout/utils/center.scss +54 -0
package/src/assets/styles/spec/utils/layout/utils/gap.scss +229 -0
package/src/assets/styles/spec/utils/layout/utils/index.scss +5 -0
package/src/assets/styles/spec/utils/layout/utils/layers.scss +5 -0
package/src/assets/styles/spec/utils/layout/utils/peers.scss +35 -0
package/src/assets/styles/utils/mobile.scss +954 -0
package/src/assets/styles/utils/theme.css +97 -0
package/src/assets/styles/vendor/datepicker.scss +183 -0
package/src/assets/styles/vendor/font-awesome.css +2337 -0
package/src/assets/styles/vendor/fullcalendar.scss +217 -0
package/src/assets/styles/vendor/index.scss +8 -0
package/src/assets/styles/vendor/jquery.datatables.scss +162 -0
package/src/assets/styles/vendor/perfectScrollbar.scss +4 -0
package/src/assets/styles/vendor/sparkline.scss +6 -0
package/src/assets/styles/vendor/themify-icons.css +1081 -0
package/src/basic-table.html +725 -0
package/src/blank.html +532 -0
package/src/buttons.html +477 -0
package/src/calendar.html +702 -0
package/src/charts.html +691 -0
package/src/chat.html +740 -0
package/src/compose.html +653 -0
package/src/datatable.html +1019 -0
package/src/email.html +1002 -0
package/src/forms.html +770 -0
package/src/google-maps.html +540 -0
package/src/index.html +1100 -0
package/src/signin.html +107 -0
package/src/signup.html +104 -0
package/src/test.html +96 -0
package/src/ui.html +941 -0
package/src/vector-maps.html +539 -0
package/webpack.config.js +3 -0

package/src/500.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>500</title>
+  </head>
+  <body class="app">
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src='assets/static/images/500.png' />
+      </div>
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
+        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
+        <div>
+          <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/src/assets/scripts/app.js ADDED Viewed

@@ -0,0 +1,644 @@
+/**
+ * Modern Adminator Application
+ * Main application entry point with enhanced mobile support
+ */
+// Note: Bootstrap 5 CSS is still available via SCSS imports
+// Bootstrap JS components removed to eliminate jQuery dependency
+import DOM from './utils/dom';
+import DateUtils from './utils/date';
+import Theme from './utils/theme';
+import Sidebar from './components/Sidebar';
+import ChartComponent from './components/Chart';
+// Import styles
+import '../styles/index.scss';
+// Import other modules that don't need immediate modernization
+import './fullcalendar';
+import './masonry';
+import './popover';
+import './scrollbar';
+import './search';
+import './skycons';
+import './vectorMaps';
+import './chat';
+import './email';
+import './googleMaps';
+import './ui';
+class AdminatorApp {
+  constructor() {
+    this.components = new Map();
+    this.isInitialized = false;
+    // Initialize when DOM is ready
+    DOM.ready(() => {
+      this.init();
+    });
+  }
+  /**
+   * Initialize the application
+   */
+  init() {
+    if (this.isInitialized) return;
+    try {
+      // Initialize core components
+      this.initSidebar();
+      this.initCharts();
+      this.initDataTables();
+      this.initDatePickers();
+      this.initTheme();
+      this.initMobileEnhancements();
+      // Setup global event listeners
+      this.setupGlobalEvents();
+      this.isInitialized = true;
+      // Dispatch custom event for other scripts
+      window.dispatchEvent(new CustomEvent('adminator:ready', {
+        detail: { app: this },
+      }));
+    } catch {
+      // Error initializing Adminator App
+    }
+  }
+  /**
+   * Initialize Sidebar component
+   */
+  initSidebar() {
+    if (DOM.exists('.sidebar')) {
+      const sidebar = new Sidebar();
+      this.components.set('sidebar', sidebar);
+    }
+  }
+  /**
+   * Initialize Chart components
+   */
+  initCharts() {
+    // Check if we have any chart elements
+    const hasCharts = DOM.exists('#sparklinedash') ||
+                     DOM.exists('.sparkline') ||
+                     DOM.exists('.sparkbar') ||
+                     DOM.exists('.sparktri') ||
+                     DOM.exists('.sparkdisc') ||
+                     DOM.exists('.sparkbull') ||
+                     DOM.exists('.sparkbox') ||
+                     DOM.exists('.easy-pie-chart') ||
+                     DOM.exists('#line-chart') ||
+                     DOM.exists('#area-chart') ||
+                     DOM.exists('#scatter-chart') ||
+                     DOM.exists('#bar-chart');
+    if (hasCharts) {
+      const charts = new ChartComponent();
+      this.components.set('charts', charts);
+    }
+  }
+  /**
+   * Initialize DataTables (modern approach)
+   */
+  initDataTables() {
+    const dataTableElement = DOM.select('#dataTable');
+    if (dataTableElement) {
+      // For now, use a lightweight approach
+      // In future iterations, we can replace with a modern table library
+      this.initBasicDataTable(dataTableElement);
+    }
+  }
+  /**
+   * Basic DataTable implementation (placeholder for full modernization)
+   */
+  initBasicDataTable(table) {
+    // Add basic sorting functionality
+    const headers = DOM.selectAll('th', table);
+    headers.forEach(header => {
+      if (header.textContent.trim()) {
+        header.style.cursor = 'pointer';
+        header.style.userSelect = 'none';
+        DOM.on(header, 'click', () => {
+          // Basic sort functionality can be added here
+          // For now, we'll keep the existing DataTables library
+        });
+      }
+    });
+  }
+  /**
+   * Initialize Date Pickers (modern approach with Day.js)
+   */
+  initDatePickers() {
+    const startDatePickers = DOM.selectAll('.start-date');
+    const endDatePickers = DOM.selectAll('.end-date');
+    [...startDatePickers, ...endDatePickers].forEach(picker => {
+      // Convert to HTML5 date input for better UX
+      if (picker.type !== 'date') {
+        picker.type = 'date';
+        picker.classList.add('form-control');
+        // Clear the placeholder since HTML5 date inputs don't need it
+        picker.removeAttribute('placeholder');
+        // Set default value to today if no value is set
+        if (!picker.value) {
+          picker.value = DateUtils.form.toInputValue(DateUtils.now());
+        }
+        // Make sure the input is clickable and focusable
+        picker.style.pointerEvents = 'auto';
+        picker.style.cursor = 'pointer';
+        // Ensure proper styling for HTML5 date input
+        picker.style.minHeight = '38px';
+        picker.style.lineHeight = '1.5';
+        // Date picker converted to HTML5 with Day.js support
+      }
+    });
+    // Add enhanced interaction - handle both field and icon clicks
+    [...startDatePickers, ...endDatePickers].forEach(picker => {
+      // Handle direct field clicks
+      DOM.on(picker, 'click', (event) => {
+        event.target.focus();
+        // For mobile browsers, trigger the date picker
+        if (event.target.showPicker && typeof event.target.showPicker === 'function') {
+          try {
+            event.target.showPicker();
+          } catch {
+            // Fallback if showPicker is not supported
+          }
+        }
+      });
+      // Handle calendar icon clicks (find the icon in the input group)
+      const inputGroup = picker.closest('.input-group');
+      if (inputGroup) {
+        const calendarIcon = inputGroup.querySelector('.input-group-text i.ti-calendar');
+        if (calendarIcon) {
+          DOM.on(calendarIcon, 'click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            picker.focus();
+            if (picker.showPicker && typeof picker.showPicker === 'function') {
+              try {
+                picker.showPicker();
+              } catch {
+                // Date picker opened via icon click
+              }
+            }
+          });
+        }
+      }
+    });
+  }
+  /**
+   * Initialize theme system with toggle
+   */
+  initTheme() {
+    // Initializing theme system
+    // Initialize theme system first
+    Theme.init();
+    // Inject theme toggle if missing - with retry mechanism
+    setTimeout(() => {
+      const navRight = DOM.select('.nav-right');
+      // Check for nav-right and theme-toggle existence
+      if (navRight && !DOM.exists('#theme-toggle')) {
+        const li = document.createElement('li');
+        li.className = 'theme-toggle d-flex ai-c';
+        li.innerHTML = `
+        <div class="form-check form-switch d-flex ai-c" style="margin: 0; padding: 0;">
+          <label class="form-check-label me-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-right: 8px;">
+            <i class="ti-sun" style="margin-right: 4px;"></i><span class="theme-label">Light</span>
+          </label>
+          <input class="form-check-input" type="checkbox" id="theme-toggle" style="margin: 0;">
+          <label class="form-check-label ms-2 text-nowrap c-grey-700" for="theme-toggle" style="font-size: 12px; margin-left: 8px;">
+            <span class="theme-label">Dark</span><i class="ti-moon" style="margin-left: 4px;"></i>
+          </label>
+        </div>
+      `;
+        // Insert before user dropdown (last item) - safer approach
+        const lastItem = navRight.querySelector('li:last-child');
+        if (lastItem && lastItem.parentNode === navRight) {
+          navRight.insertBefore(li, lastItem);
+        // Theme toggle inserted before last item
+        } else {
+          navRight.appendChild(li);
+        // Theme toggle appended to nav-right (safer approach)
+        }
+        // Add toggle functionality
+        const toggle = DOM.select('#theme-toggle');
+        if (toggle) {
+        // Set initial state
+          const currentTheme = Theme.current();
+          toggle.checked = currentTheme === 'dark';
+          DOM.on(toggle, 'change', () => {
+            Theme.apply(toggle.checked ? 'dark' : 'light');
+          });
+          // Listen for theme changes from other sources
+          window.addEventListener('adminator:themeChanged', (event) => {
+            toggle.checked = event.detail.theme === 'dark';
+            // Update charts when theme changes
+            const charts = this.components.get('charts');
+            if (charts) charts.redrawCharts();
+          });
+        }
+      } else {
+        // No nav-right found or theme-toggle already exists
+      }
+    }, 100); // Wait 100ms for DOM to be fully ready
+  }
+  /**
+   * Initialize mobile-specific enhancements
+   */
+  initMobileEnhancements() {
+    // Initializing mobile enhancements
+    this.enhanceMobileDropdowns();
+    this.enhanceMobileSearch();
+    // Prevent horizontal scroll on mobile
+    if (this.isMobile()) {
+      document.body.style.overflowX = 'hidden';
+    }
+  }
+  /**
+   * Setup global event listeners
+   */
+  setupGlobalEvents() {
+    // Global click handler
+    DOM.on(document, 'click', (event) => this.handleGlobalClick(event));
+    // Window resize handler with debouncing
+    let resizeTimeout;
+    DOM.on(window, 'resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => this.handleResize(), 250);
+    });
+    // Global event listeners set up
+  }
+  /**
+   * Handle window resize events
+   */
+  handleResize() {
+    // Window resized, updating mobile features
+    // Close all mobile-specific overlays when switching to desktop
+    if (!this.isMobile()) {
+      document.body.style.overflow = '';
+      document.body.style.overflowX = '';
+      // Close dropdowns
+      const dropdowns = DOM.selectAll('.nav-right .dropdown');
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('show');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu) menu.classList.remove('show');
+      });
+      // Close search
+      const searchBox = DOM.select('.search-box');
+      const searchInput = DOM.select('.search-input');
+      if (searchBox && searchInput) {
+        searchBox.classList.remove('active');
+        searchInput.classList.remove('active');
+      }
+    } else {
+      // Re-enable mobile overflow protection
+      document.body.style.overflowX = 'hidden';
+    }
+    // Re-apply mobile enhancements
+    this.enhanceMobileDropdowns();
+    this.enhanceMobileSearch();
+  }
+  /**
+   * Handle global click events
+   */
+  handleGlobalClick(event) {
+    // Close mobile dropdowns when clicking outside
+    if (!event.target.closest('.dropdown')) {
+      const dropdowns = DOM.selectAll('.nav-right .dropdown');
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('show');
+        const menu = dropdown.querySelector('.dropdown-menu');
+        if (menu) menu.classList.remove('show');
+      });
+      document.body.style.overflow = '';
+    }
+    // Close search when clicking outside
+    if (!event.target.closest('.search-box') && !event.target.closest('.search-input')) {
+      const searchBox = DOM.select('.search-box');
+      const searchInput = DOM.select('.search-input');
+      if (searchBox && searchInput) {
+        searchBox.classList.remove('active');
+        searchInput.classList.remove('active');
+        document.body.style.overflow = '';
+        document.body.classList.remove('mobile-menu-open');
+      }
+    }
+  }
+  /**
+   * Check if we're on a mobile device
+   */
+  isMobile() {
+    return window.innerWidth <= 768;
+  }
+  /**
+   * Enhanced mobile dropdown handling with improved email layout
+   */
+  enhanceMobileDropdowns() {
+    if (!this.isMobile()) return;
+    const dropdowns = DOM.selectAll('.nav-right .dropdown');
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle');
+      const menu = dropdown.querySelector('.dropdown-menu');
+      if (toggle && menu) {
+        // Remove existing listeners to prevent duplicates
+        const newToggle = toggle.cloneNode(true);
+        toggle.replaceWith(newToggle);
+        // Add click functionality for mobile dropdowns
+        DOM.on(newToggle, 'click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          // Close search if open
+          const searchBox = DOM.select('.search-box');
+          const searchInput = DOM.select('.search-input');
+          if (searchBox && searchInput) {
+            searchBox.classList.remove('active');
+            searchInput.classList.remove('active');
+          }
+          // Close other dropdowns first
+          dropdowns.forEach(otherDropdown => {
+            if (otherDropdown !== dropdown) {
+              otherDropdown.classList.remove('show');
+              const otherMenu = otherDropdown.querySelector('.dropdown-menu');
+              if (otherMenu) otherMenu.classList.remove('show');
+            }
+          });
+          // Toggle current dropdown
+          const isOpen = dropdown.classList.contains('show');
+          if (isOpen) {
+            dropdown.classList.remove('show');
+            menu.classList.remove('show');
+            document.body.style.overflow = '';
+            document.body.classList.remove('mobile-menu-open');
+          } else {
+            dropdown.classList.add('show');
+            menu.classList.add('show');
+            document.body.style.overflow = 'hidden';
+            document.body.classList.add('mobile-menu-open');
+          }
+        });
+        // Enhanced mobile close button functionality
+        DOM.on(menu, 'click', (e) => {
+          // Check if clicked on the close area (::before pseudo-element area)
+          const rect = menu.getBoundingClientRect();
+          const clickY = e.clientY - rect.top;
+          // If clicked in top 50px (close button area)
+          if (clickY <= 50) {
+            dropdown.classList.remove('show');
+            menu.classList.remove('show');
+            document.body.style.overflow = '';
+            document.body.classList.remove('mobile-menu-open');
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        });
+      }
+    });
+    // Close dropdowns on escape key
+    DOM.on(document, 'keydown', (e) => {
+      if (e.key === 'Escape') {
+        dropdowns.forEach(dropdown => {
+          dropdown.classList.remove('show');
+          const menu = dropdown.querySelector('.dropdown-menu');
+          if (menu) menu.classList.remove('show');
+        });
+        document.body.style.overflow = '';
+        document.body.classList.remove('mobile-menu-open');
+      }
+    });
+  }
+  /**
+     * Enhanced mobile search handling - Full-width search bar
+     */
+  enhanceMobileSearch() {
+    const searchBox = DOM.select('.search-box');
+    const searchInput = DOM.select('.search-input');
+    if (searchBox && searchInput) {
+      const searchToggle = searchBox.querySelector('a');
+      const searchField = searchInput.querySelector('input');
+      if (searchToggle && searchField) {
+        // Setting up full-width search functionality
+        // Remove existing listeners to prevent duplication
+        const newSearchToggle = searchToggle.cloneNode(true);
+        searchToggle.replaceWith(newSearchToggle);
+        DOM.on(newSearchToggle, 'click', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          // Full-width search toggle clicked
+          // Close any open dropdowns first
+          const dropdowns = DOM.selectAll('.nav-right .dropdown');
+          dropdowns.forEach(dropdown => {
+            dropdown.classList.remove('show');
+            const menu = dropdown.querySelector('.dropdown-menu');
+            if (menu) menu.classList.remove('show');
+          });
+          // Toggle search state
+          const isActive = searchInput.classList.contains('active');
+          const searchIcon = newSearchToggle.querySelector('i');
+          if (isActive) {
+            // Close search
+            searchInput.classList.remove('active');
+            document.body.classList.remove('search-open');
+            // Change icon back to search
+            if (searchIcon) {
+              searchIcon.className = 'ti-search';
+            }
+            // Clear input
+            if (searchField) {
+              searchField.value = '';
+              searchField.blur();
+            }
+            // Full-width search closed
+          } else {
+            // Open search
+            searchInput.classList.add('active');
+            document.body.classList.add('search-open');
+            // Change icon to close
+            if (searchIcon) {
+              searchIcon.className = 'ti-close';
+            }
+            // Focus the input after a short delay
+            setTimeout(() => {
+              if (searchField) {
+                searchField.focus();
+                // Search field focused
+              }
+            }, 100);
+            // Full-width search opened
+          }
+        });
+        // Close search on escape
+        DOM.on(document, 'keydown', (e) => {
+          if (e.key === 'Escape' && searchInput.classList.contains('active')) {
+            searchInput.classList.remove('active');
+            document.body.classList.remove('search-open');
+            // Reset icon
+            const searchIcon = newSearchToggle.querySelector('i');
+            if (searchIcon) {
+              searchIcon.className = 'ti-search';
+            }
+            // Clear input
+            if (searchField) {
+              searchField.value = '';
+              searchField.blur();
+            }
+            // Full-width search closed via escape
+          }
+        });
+        // Handle search input
+        DOM.on(searchField, 'keypress', (e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            const query = searchField.value.trim();
+            if (query) {
+              // Search query submitted
+              // Implement your search logic here
+              // For demo, close search after "searching"
+              searchInput.classList.remove('active');
+              document.body.classList.remove('search-open');
+              const searchIcon = newSearchToggle.querySelector('i');
+              if (searchIcon) {
+                searchIcon.className = 'ti-search';
+              }
+              searchField.value = '';
+              searchField.blur();
+            }
+          }
+        });
+        // Full-width search functionality initialized
+      }
+    }
+  }
+  /**
+   * Get a component by name
+   */
+  getComponent(name) {
+    return this.components.get(name);
+  }
+  /**
+   * Check if app is ready
+   */
+  isReady() {
+    return this.isInitialized;
+  }
+  /**
+   * Destroy the application
+   */
+  destroy() {
+    // Destroying Adminator App
+    // Destroy all components
+    this.components.forEach((component) => {
+      if (typeof component.destroy === 'function') {
+        component.destroy();
+      }
+      // Component destroyed
+    });
+    this.components.clear();
+    this.isInitialized = false;
+  }
+  /**
+   * Refresh/reinitialize the application
+   */
+  refresh() {
+    // Refreshing Adminator App
+    if (this.isInitialized) {
+      this.destroy();
+    }
+    setTimeout(() => {
+      this.init();
+    }, 100);
+  }
+}
+// Initialize the application
+const app = new AdminatorApp();
+// Make app globally available for debugging
+window.AdminatorApp = app;
+// Export for module usage
+export default app;