refactor names with -lte

src/index.html

@@ -135,13 +135,13 @@
 
                     <div class="card-tools">
                       <span title="3 New Messages" class="badge bg-primary">3</span>
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fas fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
+                      <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
                         <i class="fas fa-comments"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-card-widget="remove">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                         <i class="fas fa-times"></i>
                       </button>
                     </div>

src/index2.html

@@ -97,7 +97,7 @@
                     <h5 class="card-title">Monthly Recap Report</h5>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fas fa-minus"></i>
                       </button>
                       <div class="btn-group">
@@ -112,7 +112,7 @@
                           <a href="#" class="dropdown-item">Separated link</a>
                         </div>
                       </div>
-                      <button type="button" class="btn btn-tool" data-card-widget="remove">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                         <i class="fas fa-times"></i>
                       </button>
                     </div>
@@ -239,13 +239,13 @@
 
                         <div class="card-tools">
                           <span title="3 New Messages" class="badge bg-warning">3</span>
-                          <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                          <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                             <i class="fas fa-minus"></i>
                           </button>
-                          <button type="button" class="btn btn-tool" title="Contacts" data-widget="chat-pane-toggle">
+                          <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
                             <i class="fas fa-comments"></i>
                           </button>
-                          <button type="button" class="btn btn-tool" data-card-widget="remove">
+                          <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                             <i class="fas fa-times"></i>
                           </button>
                         </div>
@@ -444,10 +444,10 @@
 
                         <div class="card-tools">
                           <span class="badge bg-danger">8 New Members</span>
-                          <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                          <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                             <i class="fas fa-minus"></i>
                           </button>
-                          <button type="button" class="btn btn-tool" data-card-widget="remove">
+                          <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                             <i class="fas fa-times"></i>
                           </button>
                         </div>
@@ -516,10 +516,10 @@
                     <h3 class="card-title">Latest Orders</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fas fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-card-widget="remove">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                         <i class="fas fa-times"></i>
                       </button>
                     </div>
@@ -657,10 +657,10 @@
                     <h3 class="card-title">Browser Usage</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fas fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-card-widget="remove">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                         <i class="fas fa-times"></i>
                       </button>
                     </div>
@@ -728,10 +728,10 @@
                     <h3 class="card-title">Recently Added Products</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse">
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                         <i class="fas fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-card-widget="remove">
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
                         <i class="fas fa-times"></i>
                       </button>
                     </div>

src/pages/widgets.html

@@ -411,7 +411,7 @@
                     <h3 class="card-title">Expandable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-plus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -431,7 +431,7 @@
                     <h3 class="card-title">Collapsable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fas fa-minus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -451,7 +451,7 @@
                     <h3 class="card-title">Removable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
+                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fas fa-times"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
@@ -471,7 +471,7 @@
                     <h3 class="card-title">Maximizable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i>
+                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fas fa-expand"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->

src/partials/dashboard/_sidenav.html

@@ -5,13 +5,13 @@
       <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
-    <a class="pushmenu mx-1" data-pushmenu="mini" href="javascript:void(0)" role="button"><i class="fas fa-angle-double-left"></i></a>
+    <a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:void(0)" role="button"><i class="fas fa-angle-double-left"></i></a>
   </div>
   <!-- Sidebar -->
   <div class="sidebar">
     <nav class="mt-2">
       <!-- Sidebar Menu -->
-      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+      <ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
         <li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
           <a href="javascript:void(0)" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
             <i class="nav-icon fas fa-circle"></i>

src/partials/dashboard/_topbar.html

@@ -4,7 +4,7 @@
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fas fa-bars"></i></a>
       </li>
       <li class="nav-item">
         <a href="#" class="nav-link">Home</a>

src/scss/_brand-container.scss

@@ -63,7 +63,7 @@
   }
 }
 
-.sidebar-collapse:not(.sidebar-hover) {
+.sidebar-collapse:not(.sidebar-is-hover) {
   .brand-container {
     justify-content: center;
 

src/scss/_cards.scss

@@ -44,7 +44,7 @@
       overflow: auto;
     }
 
-    [data-card-widget="collapse"] {
+    [data-lte-toggle="card-collapse"] {
       display: none;
     }
 
@@ -235,7 +235,7 @@ html.maximized-card {
       margin-top: -$card-spacer-y / 2.5;
     }
 
-    [data-toggle="tooltip"] {
+    [data-bs-toggle="tooltip"] {
       position: relative;
     }
   }

src/scss/_layout-mobile.scss

@@ -1,11 +1,5 @@
 @include media-breakpoint-down(lg) {
   .wrapper {
-    // grid-template-areas:
-    //   "main-sidebar main-header"
-    //   "main-sidebar content-wrapper"
-    //   "main-sidebar main-footer";
-    // grid-template-columns: auto 1fr auto;
-
     .main-sidebar {
       position: fixed;
       top: 0;
@@ -18,35 +12,6 @@
         overflow-y: auto;
       }
     }
-
-    // .main-header {
-    //   position: fixed;
-    //   top: 0;
-    //   bottom: 0;
-    //   min-height: 100vh;
-    //   z-index: $zindex-header-mobile;
-    //   width: $lte-sidebar-width;
-    //   margin-left: -#{$lte-sidebar-width};
-    //   align-items: baseline;
-    //   @include transition($lte-sidebar-transition);
-
-    //   .navbar-nav {
-    //     flex-direction: column;
-    //   }
-
-    //   .sidebar-full-icon {
-    //     display: none;
-    //   }
-    // }
-
-    // .brand-link {
-    //   animation: none;
-    // }
-
-    // .sidebar-full-icon,
-    // .header-full-icon {
-    //   display: block;
-    // }
   }
 
   .sidebar-open {
@@ -54,12 +19,4 @@
       margin-left: 0;
     }
   }
-
-  // @include media-breakpoint-down(md) {
-  //   .header-mobile-open {
-  //     .main-header {
-  //       margin-left: 0;
-  //     }
-  //   }
-  // }
 }

src/scss/_sidebar-collapse.scss

@@ -40,7 +40,7 @@
     visibility: hidden;
   }
 
-  &.sidebar-hover {
+  &.sidebar-is-hover {
     .main-sidebar {
       min-width: $lte-sidebar-width;
       max-width: $lte-sidebar-width;

src/ts/adminlte.ts

@@ -1,6 +1,5 @@
 import Layout from './layout'
 import PushMenu from './push-menu'
-import SidebarHover from './sidebar-hover'
 import SidebarOverlay from './sidebar-overlay'
 import Treeview from './treeview'
 import DirectChat from './direct-chat'
@@ -9,7 +8,6 @@ import CardWidget from './card-widget'
 export {
   Layout,
   PushMenu,
-  SidebarHover,
   SidebarOverlay,
   Treeview,
   DirectChat,

src/ts/card-widget.ts

@@ -23,9 +23,9 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
 const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
 const CLASS_NAME_MAXIMIZED = 'maximized-card'
 
-const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]'
-const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]'
-const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]'
+const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
+const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
+const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
 const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
 const SELECTOR_CARD_HEADER = '.card-header'
 const SELECTOR_CARD_BODY = '.card-body'
@@ -42,7 +42,7 @@ const Default = {
   minimizeIcon: 'fa-compress'
 }
 
-interface Settings {
+interface Config {
   animationSpeed: number;
   collapseTrigger: string;
   removeTrigger: string;
@@ -56,8 +56,8 @@ interface Settings {
 class CardWidget {
   _element: HTMLElement
   _parent: HTMLElement | null
-  _settings: Settings
-  constructor(element: HTMLElement, settings: Settings) {
+  _config: Config
+  constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._parent = element.closest(SELECTOR_CARD)
 
@@ -65,7 +65,7 @@ class CardWidget {
       this._parent = element
     }
 
-    this._settings = Object.assign({}, Default, settings)
+    this._config = Object.assign({}, Default, config)
   }
 
   collapse() {
@@ -76,7 +76,7 @@ class CardWidget {
     if (elm !== undefined) {
       for (const el of elm) {
         if (el instanceof HTMLElement) {
-          slideUp(el, this._settings.animationSpeed)
+          slideUp(el, this._config.animationSpeed)
         }
       }
     }
@@ -84,12 +84,12 @@ class CardWidget {
     setTimeout(() => {
       this._parent?.classList.add(CLASS_NAME_COLLAPSED)
       this._parent?.classList.remove(CLASS_NAME_COLLAPSING)
-    }, this._settings.animationSpeed)
+    }, this._config.animationSpeed)
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.collapseIcon}`)
+    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
 
-    icon?.classList.add(this._settings.expandIcon)
-    icon?.classList.remove(this._settings.collapseIcon)
+    icon?.classList.add(this._config.expandIcon)
+    icon?.classList.remove(this._config.collapseIcon)
   }
 
   expand() {
@@ -100,7 +100,7 @@ class CardWidget {
     if (elm !== undefined) {
       for (const el of elm) {
         if (el instanceof HTMLElement) {
-          slideDown(el, this._settings.animationSpeed)
+          slideDown(el, this._config.animationSpeed)
         }
       }
     }
@@ -108,17 +108,17 @@ class CardWidget {
     setTimeout(() => {
       this._parent?.classList.remove(CLASS_NAME_COLLAPSED)
       this._parent?.classList.remove(CLASS_NAME_EXPANDING)
-    }, this._settings.animationSpeed)
+    }, this._config.animationSpeed)
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.expandIcon}`)
+    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
 
-    icon?.classList.add(this._settings.collapseIcon)
-    icon?.classList.remove(this._settings.expandIcon)
+    icon?.classList.add(this._config.collapseIcon)
+    icon?.classList.remove(this._config.expandIcon)
   }
 
   remove() {
     if (this._parent) {
-      slideUp(this._parent, this._settings.animationSpeed)
+      slideUp(this._parent, this._config.animationSpeed)
     }
   }
 
@@ -133,9 +133,9 @@ class CardWidget {
 
   maximize() {
     if (this._parent) {
-      const maxElm = this._parent.querySelector(`${this._settings.maximizeTrigger} .${this._settings.maximizeIcon}`)
-      maxElm?.classList.add(this._settings.minimizeIcon)
-      maxElm?.classList.remove(this._settings.maximizeIcon)
+      const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
+      maxElm?.classList.add(this._config.minimizeIcon)
+      maxElm?.classList.remove(this._config.maximizeIcon)
 
       this._parent.style.height = `${this._parent.scrollHeight}px`
       this._parent.style.width = `${this._parent.scrollWidth}px`
@@ -153,10 +153,10 @@ class CardWidget {
 
   minimize() {
     if (this._parent) {
-      const minElm = this._parent.querySelector(`${this._settings.maximizeTrigger} .${this._settings.minimizeIcon}`)
+      const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
 
-      minElm?.classList.add(this._settings.maximizeIcon)
-      minElm?.classList.remove(this._settings.minimizeIcon)
+      minElm?.classList.add(this._config.maximizeIcon)
+      minElm?.classList.remove(this._config.minimizeIcon)
 
       this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
       // console.log('🚀 ~ file: card-widget.ts ~ line 164 ~ CardWidget ~ minimize ~ this._parent.style.height', this._parent.style.height)

src/ts/direct-chat.ts

@@ -14,7 +14,7 @@ import {
  * ====================================================
  */
 
-const SELECTOR_DATA_TOGGLE = '[data-widget="chat-pane-toggle"]'
+const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]'
 const SELECTOR_DIRECT_CHAT = '.direct-chat'
 
 const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'

src/ts/push-menu.ts

@@ -23,15 +23,15 @@ const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
 const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
 const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
+const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
-const CLASS_NAME_HEADER_MOBILE_OPEN = 'header-mobile-open'
 
+const SELECTOR_SIDEBAR = '.sidebar'
 const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
-const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]'
-const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]'
-const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
+const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
+const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
 
 /**
  * Class Definition
@@ -39,21 +39,29 @@ const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
  */
 
 class PushMenu {
-  sidebarOpening(): void {
-    const bodyClass = document.body.classList
+  _element: HTMLElement | null
+  _config: null
+  _bodyClass: DOMTokenList
+  constructor(element: HTMLElement | null, config: null) {
+    this._element = element
+
+    const bodyElement = document.body as HTMLBodyElement
+    this._bodyClass = bodyElement.classList
+
+    this._config = config
+  }
 
-    bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
+  sidebarOpening(): void {
+    this._bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
     setTimeout(() => {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
+      this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
     }, 1000)
   }
 
   sidebarColllapsing(): void {
-    const bodyClass = document.body.classList
-
-    bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
+    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
     setTimeout(() => {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
+      this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
     }, 1000)
   }
 
@@ -77,89 +85,67 @@ class PushMenu {
 
   expand(): void {
     this.sidebarOpening()
-    const bodyClass = document.body.classList
-    bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
-    bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
-    bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-    bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
+
+    this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
+    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+    this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
   }
 
   collapse(): void {
     this.sidebarColllapsing()
-    const bodyClass = document.body.classList
-    bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+
+    this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
   }
 
   close(): void {
-    const bodyClass = document.body.classList
-
-    bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+    this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
+    this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
+    this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
 
-    if (bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
+    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
       this.menusClose()
     }
   }
 
-  toggleFull(): void {
-    const bodyClass = document.body.classList
+  sidebarHover(): void {
+    const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
+    selSidebar?.addEventListener('mouseover', () => {
+      this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER)
+    })
 
-    if (bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
+    selSidebar?.addEventListener('mouseout', () => {
+      this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
+    })
+  }
+
+  toggleFull(): void {
+    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
       this.expand()
     } else {
       this.close()
     }
 
-    if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
-      bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
+    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
+      this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
+      this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
     }
   }
 
   toggleMini(): void {
-    const bodyClass = document.body.classList
-
-    if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
-      bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
-      bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
+    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
+      this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
+      this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
     }
 
-    if (bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
+    if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
       this.expand()
     } else {
       this.collapse()
     }
   }
 
-  toggleHeader(): void {
-    this.close()
-    const bodyClass = document.body.classList
-    if (bodyClass.contains(CLASS_NAME_HEADER_MOBILE_OPEN)) {
-      bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
-    } else {
-      bodyClass.add(CLASS_NAME_HEADER_MOBILE_OPEN)
-    }
-  }
-
-  toggle(state: string): void {
-    switch (state) {
-      case 'full': {
-        this.toggleFull()
-        break
-      }
-
-      case 'mini': {
-        this.toggleMini()
-        break
-      }
-
-      case 'header': {
-        this.toggleHeader()
-        break
-      }
-    // No default
-    }
+  init() {
+    this.sidebarHover()
   }
 }
 
@@ -170,32 +156,45 @@ class PushMenu {
  */
 
 domReady(() => {
+  const data = new PushMenu(null, null)
+  data.init()
+
   const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
-  const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
-  const headerBtn = document.querySelectorAll(SELECTOR_FULL_HEADER)
 
   for (const btn of fullBtn) {
-    btn.addEventListener('click', () => {
-      const data = new PushMenu()
-      data.toggle('full')
+    btn.addEventListener('click', event => {
+      event.preventDefault()
+
+      let button = event.currentTarget as HTMLElement | null | undefined
+
+      if (button?.dataset.lteToggle !== 'sidebar-full') {
+        button = button?.closest(SELECTOR_FULL_TOGGLE)
+      }
+
+      if (button) {
+        const data = new PushMenu(button, null)
+        data.toggleFull()
+      }
     })
   }
 
+  const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
+
   for (const btn of miniBtn) {
-    btn.addEventListener('click', () => {
-      const data = new PushMenu()
-      data.toggle('mini')
-    })
-  }
+    btn.addEventListener('click', event => {
+      event.preventDefault()
+
+      let button = event.currentTarget as HTMLElement | null | undefined
+      if (button?.dataset.lteToggle !== 'sidebar-mini') {
+        button = button?.closest(SELECTOR_FULL_TOGGLE)
+      }
 
-  for (const btn of headerBtn) {
-    btn.addEventListener('click', () => {
-      const data = new PushMenu()
-      data.toggle('header')
+      if (button) {
+        const data = new PushMenu(button, null)
+        data.toggleMini()
+      }
     })
   }
 })
 
 export default PushMenu
-
-//

src/ts/sidebar-hover.ts

@@ -1,50 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE treeview.ts
- * License MIT
- * --------------------------------------------
- */
-
-import {
-  domReady
-} from './util/index'
-
-/**
- * ------------------------------------------------------------------------
- * Constants
- * ------------------------------------------------------------------------
- */
-
-const CLASS_NAME_SIDEBAR_HOVER = 'sidebar-hover'
-
-const SELECTOR_SIDEBAR = '.sidebar'
-
-class SidebarHover {
-  onHover(): void {
-    const bodyClass = document.body.classList
-    bodyClass.add(CLASS_NAME_SIDEBAR_HOVER)
-  }
-
-  notHover(): void {
-    const bodyClass = document.body.classList
-    bodyClass.remove(CLASS_NAME_SIDEBAR_HOVER)
-  }
-
-  init(): void {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
-    selSidebar?.addEventListener('mouseover', () => {
-      this.onHover()
-    })
-
-    selSidebar?.addEventListener('mouseout', () => {
-      this.notHover()
-    })
-  }
-}
-
-domReady(() => {
-  const data = new SidebarHover()
-  data.init()
-})
-
-export default SidebarHover

src/ts/treeview.ts

@@ -19,7 +19,7 @@ const CLASS_NAME_MENU_OPEN = 'menu-open'
 const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
 
 const SELECTOR_NAV_ITEM = '.nav-item'
-const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
+const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
 const Defaults = {
   transitionDuration: 300,