minor bug fixes

.eslintignore

@@ -4,4 +4,4 @@
 /dist/
 /docs/
 /docs_html/
-/env.d.ts/
+**/env.d.ts

.gitignore

@@ -4,6 +4,9 @@ dist/
 # generated types
 .astro/
 
+# unwanted types
+**/env.d.ts
+
 # System / Log files
 *.DS_Store
 *.log

package-lock.json

@@ -17,6 +17,7 @@
         "bootstrap": "^5.3.0-alpha1",
         "bundlewatch": "^0.3.3",
         "clean-css-cli": "^5.6.2",
+        "concurrently": "^7.6.0",
         "cross-env": "^7.0.3",
         "eslint": "^8.33.0",
         "eslint-config-xo": "^0.43.1",
@@ -2928,6 +2929,48 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
+    "node_modules/concurrently": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
+      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "date-fns": "^2.29.1",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.0.0",
+        "shell-quote": "^1.7.3",
+        "spawn-command": "^0.0.2-1",
+        "supports-color": "^8.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/confusing-browser-globals": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
@@ -3012,6 +3055,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -8223,6 +8279,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/s.color": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
@@ -8524,6 +8589,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
+      "dev": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -9188,6 +9259,15 @@
         "node": "*"
       }
     },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
     "node_modules/trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
@@ -12136,6 +12216,34 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
+    "concurrently": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
+      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "date-fns": "^2.29.1",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.0.0",
+        "shell-quote": "^1.7.3",
+        "spawn-command": "^0.0.2-1",
+        "supports-color": "^8.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.3.1"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "confusing-browser-globals": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
@@ -12196,6 +12304,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -15867,6 +15981,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rxjs": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "s.color": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
@@ -16111,6 +16234,12 @@
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
       "dev": true
     },
+    "spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -16620,6 +16749,12 @@
         }
       }
     },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true
+    },
     "trim-lines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",

package.json

@@ -28,7 +28,7 @@
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "compile": "npm-run-all docs-compile assets css js",
     "production": "npm-run-all lint compile",
-    "watch": "npm-run-all --parallel watch-*",
+    "watch": "concurrently \"npm:watch-*\"",
     "watch-css-main": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-lint css-compile\"",
     "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-js-main": "nodemon --watch src/ts/ --ext ts --exec \"npm-run-all js-lint js-compile\"",
@@ -64,6 +64,7 @@
     "bootstrap": "^5.3.0-alpha1",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.2",
+    "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.33.0",
     "eslint-config-xo": "^0.43.1",

src/scss/_app-sidebar.scss

@@ -3,8 +3,8 @@
   --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
   --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
   --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
-  --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
-  --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
+  --#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
+  --#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
   --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
   --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
   --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
@@ -40,9 +40,9 @@
       }
     }
 
-    > .nav-link.active {
+    > .nav-link.active:not(:hover) {
       color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
-      // background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
+      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
     }
 
     // Hover and active states
@@ -50,7 +50,7 @@
     &:hover > .nav-link,
     > .nav-link:focus  {
       color: var(--#{$lte-prefix}sidebar-hover-color);
-      // background-color: var(--#{$lte-prefix}sidebar-hover-bg);
+      background-color: var(--#{$lte-prefix}sidebar-hover-bg);
     }
 
     // First Level Submenu
@@ -183,8 +183,8 @@
       --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
       --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
       --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
-      --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
-      --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
+      --#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg-dark};
+      --#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color-dark};
       --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
       --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
       --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};

src/scss/_variables-dark.scss

@@ -5,10 +5,12 @@ $lte-sidebar-hover-bg-dark:               rgba(255, 255, 255, .1) !default;
 $lte-sidebar-color-dark:                  #c2c7d0 !default;
 $lte-sidebar-hover-color-dark:            $white !default;
 $lte-sidebar-active-color-dark:           $white !default;
+$lte-sidebar-menu-active-bg-dark:         transparent !default;
+$lte-sidebar-menu-active-color-dark:      $white !default;
 $lte-sidebar-submenu-bg-dark:             transparent !default;
-$lte-sidebar-submenu-color-dark:          $lte-sidebar-color-dark !default;
+$lte-sidebar-submenu-color-dark:          #c2c7d0 !default;
 $lte-sidebar-submenu-hover-color-dark:    $white !default;
-$lte-sidebar-submenu-hover-bg-dark:       $lte-sidebar-hover-bg-dark !default;
+$lte-sidebar-submenu-hover-bg-dark:       rgba(255, 255, 255, .1) !default;
 $lte-sidebar-submenu-active-color-dark:   $white !default;
 $lte-sidebar-submenu-active-bg-dark:      rgba(255, 255, 255, .1) !default;
 $lte-sidebar-header-color-dark:           tint-color(#c2c7d0, 5%) !default;

src/scss/_variables.scss

@@ -28,12 +28,14 @@ $lte-sidebar-hover-bg:              rgba($black, .1) !default;
 $lte-sidebar-color:                 $gray-800 !default;
 $lte-sidebar-hover-color:           $gray-900 !default;
 $lte-sidebar-active-color:          $black !default;
+$lte-sidebar-menu-active-bg:        transparent !default;
+$lte-sidebar-menu-active-color:     $black !default;
 $lte-sidebar-submenu-bg:            transparent !default;
 $lte-sidebar-submenu-color:         #777 !default;
 $lte-sidebar-submenu-hover-color:   $black !default;
-$lte-sidebar-submenu-hover-bg:      $lte-sidebar-hover-bg !default;
-$lte-sidebar-submenu-active-color:  $lte-sidebar-hover-color !default;
-$lte-sidebar-submenu-active-bg:     $lte-sidebar-submenu-hover-bg !default;
+$lte-sidebar-submenu-hover-bg:      rgba($black, .1) !default;
+$lte-sidebar-submenu-active-color:  $gray-900 !default;
+$lte-sidebar-submenu-active-bg:     rgba($black, .1) !default;
 $lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI

src/ts/direct-chat.ts

@@ -30,26 +30,26 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
  */
 
 class DirectChat {
-  _element: HTMLElement | undefined
+  _element: HTMLElement
   _config: undefined
-  constructor(element: HTMLElement | undefined, config: undefined) {
+  constructor(element: HTMLElement, config: undefined) {
     this._element = element
     this._config = config
   }
 
   toggle(): void {
-    if (this._element?.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
+    if (this._element.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
       const event = new Event(EVENT_COLLAPSED)
 
-      this._element?.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
+      this._element.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
 
-      this._element?.dispatchEvent(event)
+      this._element.dispatchEvent(event)
     } else {
       const event = new Event(EVENT_EXPANDED)
 
-      this._element?.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
+      this._element.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
 
-      this._element?.dispatchEvent(event)
+      this._element.dispatchEvent(event)
     }
   }
 }
@@ -67,9 +67,12 @@ domReady(() => {
     btn.addEventListener('click', event => {
       event.preventDefault()
       const target = event.target as HTMLElement
-      const chatPane = target?.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
-      const data = new DirectChat(chatPane, undefined)
-      data.toggle()
+      const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
+
+      if (chatPane) {
+        const data = new DirectChat(chatPane, undefined)
+        data.toggle()
+      }
     })
   }
 })

src/ts/treeview.ts

@@ -46,48 +46,40 @@ type Config = {
 class Treeview {
   _element: HTMLElement
   _config: Config
-  _navItem: HTMLElement | undefined
-  _childNavItem: HTMLElement | undefined | undefined
+  _childNavItem: HTMLElement | undefined
 
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._config = { ...Default, ...config }
-    this._navItem = this._element?.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
-    this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    this._childNavItem = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
   }
 
   open(): void {
     const event = new Event(EVENT_EXPANDED)
 
-    if (this._navItem) {
-      this._navItem.classList.add(CLASS_NAME_MENU_OPEN)
-    }
+    this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
     if (this._childNavItem) {
       slideDown(this._childNavItem, this._config.animationSpeed)
     }
 
-    this._element?.dispatchEvent(event)
+    this._element.dispatchEvent(event)
   }
 
   close(): void {
     const event = new Event(EVENT_COLLAPSED)
 
-    window.setTimeout(() => {
-      if (this._navItem) {
-        this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
-      }
-    }, this._config.animationSpeed)
+    this._element.classList.remove(CLASS_NAME_MENU_OPEN)
 
     if (this._childNavItem) {
       slideUp(this._childNavItem, this._config.animationSpeed)
     }
 
-    this._element?.dispatchEvent(event)
+    this._element.dispatchEvent(event)
   }
 
   toggle(): void {
-    if (this._navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
+    if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
       this.close()
     } else {
       this.open()
@@ -106,10 +98,13 @@ domReady(() => {
 
   for (const btn of button) {
     btn.addEventListener('click', event => {
-      const treeviewMenu = event.target as HTMLElement
+      const target = event.target as HTMLElement
+      const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
 
-      const data = new Treeview(treeviewMenu, Default)
-      data.toggle()
+      if (targetItem) {
+        const data = new Treeview(targetItem, Default)
+        data.toggle()
+      }
     })
   }
 })