organize dir

build/config/esbuild.config.js → build/esbuild.config.js

@@ -1,9 +1,9 @@
 'use strict'
 
 const esbuild = require('esbuild')
-const { getTarget } = require('./getTarget')
+// const { getTarget } = require('./get.browserslist.target')
 
-const pkg = require('../../package')
+const pkg = require('../package')
 const year = new Date().getFullYear()
 const banner = `/*!
  * AdminLTE v${pkg.version} (${pkg.homepage})
@@ -12,7 +12,7 @@ const banner = `/*!
  */`
 
 esbuild.build({
-  entryPoints: ['build/ts/adminlte.ts'],
+  entryPoints: ['ts/adminlte.ts'],
   banner: {
     js: banner
   },
@@ -20,7 +20,11 @@ esbuild.build({
   color: true,
   format: 'iife',
   sourcemap: true,
-  target: getTarget(['es', 'chrome', 'edge', 'firefox', 'ios', 'safari']),
+  target: ['chrome60'],
+
+  /* will be enable after release of alpha */
+  // target: getTarget(['es', 'chrome', 'edge', 'firefox', 'ios', 'safari']),
+
   outfile: 'dist/js/adminlte.js'
 }).then(
   console.log('build/ts/adminlte.ts is BUILD')

build/scss/layout/_brand.scss

@@ -1,37 +0,0 @@
-//
-// Core: Brand
-//
-
-.brand-container {
-  grid-area: brand;
-  display: flex;
-  font-size: $navbar-brand-font-size;
-  padding: $brand-link-padding-y $sidebar-padding-x;
-  white-space: nowrap;
-  border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
-
-  &:hover {
-    color: $white;
-    text-decoration: none;
-  }
-
-  .brand-image {
-    float: left;
-    line-height: .8;
-    margin-left: .8rem;
-    margin-right: .5rem;
-    margin-top: -3px;
-    max-height: 33px;
-    width: auto;
-  }
-
-  .brand-text {
-    color: $sidebar-dark-color;
-  }
-
-  .sidebar-mini-icon {
-    color: $gray-400;
-    margin-left: auto;
-    order: 2;
-  }
-}

index.html

@@ -4,7 +4,11 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- The page supports both dark and light color schemes, and the page author prefers / default is light. -->
+  <meta name="color-scheme" content="light dark">
   <title>AdminLTE v4</title>
+  <!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
+  <!-- <link rel="stylesheet" href="dist/css/alt/adminlte.pcs.css"> -->
   <link rel="stylesheet" href="dist/css/adminlte.css">
   <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
 </head>

package-lock.json

@@ -509,13 +509,13 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.1.tgz",
-      "integrity": "sha512-kVTAghWDDhsvQ602tHBc6WmQkdaYbkcTwZu+7l24jtJiYvm9l+/y/b2BZANEezxPDiX5MK2ZecE+9BFi/YJryw==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.23.0.tgz",
+      "integrity": "sha512-tGK1y3KIvdsQEEgq6xNn1DjiFJtl+wn8JJQiETtCbdQxw1vzjXyAaIkEmO2l6Nq24iy3uZBMFQjZ6ECf1QdgGw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.22.1",
-        "@typescript-eslint/scope-manager": "4.22.1",
+        "@typescript-eslint/experimental-utils": "4.23.0",
+        "@typescript-eslint/scope-manager": "4.23.0",
         "debug": "^4.1.1",
         "functional-red-black-tree": "^1.0.1",
         "lodash": "^4.17.15",
@@ -525,55 +525,55 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.1.tgz",
-      "integrity": "sha512-svYlHecSMCQGDO2qN1v477ax/IDQwWhc7PRBiwAdAMJE7GXk5stF4Z9R/8wbRkuX/5e9dHqbIWxjeOjckK3wLQ==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.23.0.tgz",
+      "integrity": "sha512-WAFNiTDnQfrF3Z2fQ05nmCgPsO5o790vOhmWKXbbYQTO9erE1/YsFot5/LnOUizLzU2eeuz6+U/81KV5/hFTGA==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/scope-manager": "4.22.1",
-        "@typescript-eslint/types": "4.22.1",
-        "@typescript-eslint/typescript-estree": "4.22.1",
+        "@typescript-eslint/scope-manager": "4.23.0",
+        "@typescript-eslint/types": "4.23.0",
+        "@typescript-eslint/typescript-estree": "4.23.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.22.1.tgz",
-      "integrity": "sha512-l+sUJFInWhuMxA6rtirzjooh8cM/AATAe3amvIkqKFeMzkn85V+eLzb1RyuXkHak4dLfYzOmF6DXPyflJvjQnw==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.23.0.tgz",
+      "integrity": "sha512-wsvjksHBMOqySy/Pi2Q6UuIuHYbgAMwLczRl4YanEPKW5KVxI9ZzDYh3B5DtcZPQTGRWFJrfcbJ6L01Leybwug==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.22.1",
-        "@typescript-eslint/types": "4.22.1",
-        "@typescript-eslint/typescript-estree": "4.22.1",
+        "@typescript-eslint/scope-manager": "4.23.0",
+        "@typescript-eslint/types": "4.23.0",
+        "@typescript-eslint/typescript-estree": "4.23.0",
         "debug": "^4.1.1"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.22.1.tgz",
-      "integrity": "sha512-d5bAiPBiessSmNi8Amq/RuLslvcumxLmyhf1/Xa9IuaoFJ0YtshlJKxhlbY7l2JdEk3wS0EnmnfeJWSvADOe0g==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.23.0.tgz",
+      "integrity": "sha512-ZZ21PCFxPhI3n0wuqEJK9omkw51wi2bmeKJvlRZPH5YFkcawKOuRMQMnI8mH6Vo0/DoHSeZJnHiIx84LmVQY+w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.22.1",
-        "@typescript-eslint/visitor-keys": "4.22.1"
+        "@typescript-eslint/types": "4.23.0",
+        "@typescript-eslint/visitor-keys": "4.23.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.22.1.tgz",
-      "integrity": "sha512-2HTkbkdAeI3OOcWbqA8hWf/7z9c6gkmnWNGz0dKSLYLWywUlkOAQ2XcjhlKLj5xBFDf8FgAOF5aQbnLRvgNbCw==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.23.0.tgz",
+      "integrity": "sha512-oqkNWyG2SLS7uTWLZf6Sr7Dm02gA5yxiz1RP87tvsmDsguVATdpVguHr4HoGOcFOpCvx9vtCSCyQUGfzq28YCw==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.1.tgz",
-      "integrity": "sha512-p3We0pAPacT+onSGM+sPR+M9CblVqdA9F1JEdIqRVlxK5Qth4ochXQgIyb9daBomyQKAXbygxp1aXQRV0GC79A==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.23.0.tgz",
+      "integrity": "sha512-5Sty6zPEVZF5fbvrZczfmLCOcby3sfrSPu30qKoY1U3mca5/jvU5cwsPb/CO6Q3ByRjixTMIVsDkqwIxCf/dMw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.22.1",
-        "@typescript-eslint/visitor-keys": "4.22.1",
+        "@typescript-eslint/types": "4.23.0",
+        "@typescript-eslint/visitor-keys": "4.23.0",
         "debug": "^4.1.1",
         "globby": "^11.0.1",
         "is-glob": "^4.0.1",
@@ -582,12 +582,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.1.tgz",
-      "integrity": "sha512-WPkOrIRm+WCLZxXQHCi+WG8T2MMTUFR70rWjdWYddLT7cEfb2P4a3O/J2U1FBVsSFTocXLCoXWY6MZGejeStvQ==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.23.0.tgz",
+      "integrity": "sha512-5PNe5cmX9pSifit0H+nPoQBXdbNzi5tOEec+3riK+ku4e3er37pKxMKDH5Ct5Y4fhWxcD4spnlYjxi9vXbSpwg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.22.1",
+        "@typescript-eslint/types": "4.23.0",
         "eslint-visitor-keys": "^2.0.0"
       }
     },

package.json

@@ -11,21 +11,21 @@
     "css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits",
     "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css",
-    "css-compile": "npm run css-compile-bash -- build/scss/adminlte.scss:dist/css/adminlte.css",
-    "css-compile-splits": "npm run css-compile-bash -- build/scss/parts/:dist/css/alt/",
-    "css-prefix-bash": "postcss --config build/config/postcss.config.js --replace",
+    "css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css",
+    "css-compile-splits": "npm run css-compile-bash -- scss/parts/:dist/css/alt/",
+    "css-prefix-bash": "postcss --config build/postcss.config.js --replace",
     "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/alt/*.css\"",
     "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\" \"!dist/css/alt/*.rtl.css\"",
-    "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/config/postcss.config.js --replace \"dist/css/alt/*.rtl.css\" \"!dist/css/alt/*.min.css\"",
+    "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --replace \"dist/css/alt/*.rtl.css\" \"!dist/css/alt/*.min.css\"",
     "css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ",
     "css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
     "css-minify-splits": "npm run css-minify-bash -- dist/css/alt/ --batch --batch-suffix \".min\" \"dist/css/alt/*.css\" \"!dist/css/alt/*.min.css\"",
-    "css-lint": "stylelint \"build/scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
+    "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
     "dev": "npm-run-all --parallel watch sync",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --parallel ts:build ts:type-check",
-    "ts:build": "node build/config/esbuild.config.js",
+    "ts:build": "node build/esbuild.config.js",
     "ts:type-check": "tsc --noEmit",
     "js-minify": "esbuild dist/js/adminlte.js --minify --sourcemap --outfile=dist/js/adminlte.min.js",
     "js-lint": "eslint --ext=js,ts --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
@@ -33,8 +33,8 @@
     "compile": "npm-run-all --parallel css js",
     "sync": "browser-sync start --server --files *.html pages/ dist/",
     "watch": "concurrently \"npm:watch-*\"",
-    "watch-css": "nodemon --watch build/scss -e scss -x \"npm-run-all css-compile css-prefix\"",
-    "watch-js": "nodemon --watch build/ts -e ts -x \"npm-run-all js-compile\""
+    "watch-css": "nodemon --watch scss -e scss -x \"npm-run-all css-compile css-prefix\"",
+    "watch-js": "nodemon --watch ts -e ts -x \"npm-run-all js-compile\""
   },
   "keywords": [
     "css",
@@ -49,7 +49,7 @@
   ],
   "homepage": "https://adminlte.io",
   "style": "dist/css/adminlte.css",
-  "sass": "build/scss/adminlte.scss",
+  "sass": "scss/adminlte.scss",
   "repository": {
     "type": "git",
     "url": "git://github.com/ColorlibHQ/AdminLTE.git"
@@ -63,8 +63,8 @@
     "bootstrap": "^5.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.22.1",
-    "@typescript-eslint/parser": "^4.22.1",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
     "autoprefixer": "^10.2.5",
     "browser-sync": "^2.26.14",
     "bundlewatch": "^0.3.2",

build/scss/_layout.scss → scss/_layout.scss

@@ -1,13 +1,13 @@
-@import "layout/brand";
-@import "layout/content-wrapper";
-@import "layout/layout-fixed";
-@import "layout/main-footer";
+@import "layout/wrapper";
 @import "layout/main-header";
 @import "layout/main-sidebar";
+@import "layout/brand";
+@import "layout/sidebar";
 @import "layout/sidebar-close";
-@import "layout/sidebar-horizontal";
 @import "layout/sidebar-mini";
-@import "layout/sidebar";
-@import "layout/wrapper";
+@import "layout/sidebar-horizontal";
+@import "layout/content-wrapper";
+@import "layout/main-footer";
+@import "layout/layout-fixed";
 
 //

scss/layout/_brand.scss

@@ -0,0 +1,56 @@
+//
+// Core: Brand
+//
+
+.brand-container {
+  grid-area: brand;
+  display: grid;
+  grid-template-areas: "brand-link sidebar-mini-icon";
+  grid-auto-flow: column;
+  justify-content: space-between;
+  font-size: $navbar-brand-font-size;
+  padding: $brand-link-padding-y $sidebar-padding-x;
+  white-space: nowrap;
+  border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
+
+  .brand-link {
+    grid-area: brand-link;
+  }
+
+  .brand-image {
+    grid-area: brand-img;
+    float: left;
+    line-height: .8;
+    margin-left: .8rem;
+    margin-right: .5rem;
+    margin-top: -3px;
+    max-height: 33px;
+    width: auto;
+  }
+
+  .brand-text {
+    grid-area: brand-text;
+    color: $sidebar-dark-color;
+
+    &:hover {
+      color: $white;
+      text-decoration: none;
+    }
+  }
+
+  .sidebar-mini-icon {
+    grid-area: sidebar-mini-icon;
+    color: $gray-400;
+  }
+}
+
+.sidebar-collapse:not(.sidebar-hover) {
+  .brand-container {
+    grid-template-areas: "sidebar-mini-icon brand-link";
+    justify-content: center;
+
+    .brand-link {
+      display: none;
+    }
+  }
+}

build/scss/layout/_sidebar-mini.scss → scss/layout/_sidebar-mini.scss

@@ -9,7 +9,7 @@
   white-space: nowrap;
 }
 
-.sidebar-mini.sidebar-collapse {
+.sidebar-mini.sidebar-collapse:not(.sidebar-horizontal) {
   .main-sidebar {
     min-width: $sidebar-mini-width;
     max-width: $sidebar-mini-width;
@@ -35,17 +35,7 @@
     visibility: hidden;
   }
 
-  .brand-link {
-    order: 2;
-    margin-left: auto;
-  }
-
-  .sidebar-mini-icon {
-    order: 1;
-    margin-left: 1rem;
-  }
-
-  &.layout-fixed.sidebar-hover {
+  &.sidebar-hover {
     .main-sidebar {
       min-width: $sidebar-width;
       max-width: $sidebar-width;
@@ -64,49 +54,40 @@
       animation-fill-mode: both;
       visibility: visible;
     }
-
-    .brand-link {
-      order: 1;
-    }
-
-    .sidebar-mini-icon {
-      order: 2;
-      margin-left: auto;
-    }
   }
 }
 
-.sidebar-mini.sidebar-collapse:not(.layout-fixed) {
-  .sidebar {
-    overflow: visible;
-
-    .nav-sidebar .nav-item:hover {
-      position: relative;
-
-      .nav-link {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      span {
-        animation: none;
-        z-index: $zindex-sidebar + 12;
-        visibility: visible;
-        display: inline-block;
-        position: absolute;
-        width: $sidebar-width;
-        left: $sidebar-mini-width;
-        top: 0;
-        background-color: inherit;
-        padding: inherit;
-        padding-left: 1rem;
-        margin-left: -1rem;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-}
+// .sidebar-mini.sidebar-collapse:not(.layout-fixed):not(.sidebar-horizontal) {
+//   .sidebar {
+//     overflow: visible;
+
+//     .nav-sidebar .nav-item:hover {
+//       position: relative;
+
+//       .nav-link {
+//         border-top-right-radius: 0;
+//         border-bottom-right-radius: 0;
+//       }
+
+//       span {
+//         animation: none;
+//         z-index: $zindex-sidebar + 12;
+//         visibility: visible;
+//         display: inline-block;
+//         position: absolute;
+//         width: $sidebar-width;
+//         left: $sidebar-mini-width;
+//         top: 0;
+//         background-color: inherit;
+//         padding: inherit;
+//         padding-left: 1rem;
+//         margin-left: -1rem;
+//         border-top-left-radius: 0;
+//         border-bottom-left-radius: 0;
+//       }
+//     }
+//   }
+// }
 
 .sidebar-is-opening {
   .sidebar .user-panel > .info,

build/scss/layout/_wrapper.scss → scss/layout/_wrapper.scss

@@ -13,7 +13,7 @@
     "main-sidebar main-footer";
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr auto;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 //

build/ts/push-menu.ts → ts/push-menu.ts

@@ -17,12 +17,17 @@ import {
 
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
+const CLASS_NAME_SIDEBAR_HORIZONTAL = 'sidebar-horizontal'
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
 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_MENU_OPEN = 'menu-open'
 
+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"]'
 
@@ -50,6 +55,24 @@ class PushMenu {
     }, 1000)
   }
 
+  menusClose(): void {
+    const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
+
+    for (const navTree of navTreeview) {
+      navTree.style.removeProperty('display')
+      navTree.style.removeProperty('height')
+    }
+
+    const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR)
+    const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
+
+    if (navItem) {
+      for (const navI of navItem) {
+        navI.classList.remove(CLASS_NAME_MENU_OPEN)
+      }
+    }
+  }
+
   expand(): void {
     this.sidebarOpening()
     const bodyClass = document.body.classList
@@ -66,10 +89,14 @@ class PushMenu {
 
   close(): void {
     const bodyClass = document.body.classList
+
     bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
-    // if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
     bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
-    // }
+    bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
+
+    if (bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
+      this.menusClose()
+    }
   }
 
   toggleFull(): void {

tsconfig.json

@@ -14,7 +14,7 @@
     "strictPropertyInitialization": true
   },
   "include": [
-    "build/ts/**/*"
+    "ts/**/*"
   ],
   "exclude": [
     "dist",