├── .github ├── FUNDING.yml ├── codeql │ └── codeql-config.yml ├── workflows │ ├── lint.yml │ ├── docs.yml │ ├── bundlewatch.yml │ ├── codeql.yml │ ├── release.yml │ └── node-sass.yml ├── ISSUE_TEMPLATE │ ├── feature-request-for-adminlte-v4-x.md │ └── bug-report-for-adminlte-v3.1-x.md ├── dependabot.yml └── CONTRIBUTING.md ├── src ├── html │ ├── env.d.ts │ ├── .tsconfig.json │ ├── public │ │ └── assets │ │ │ └── img │ │ │ ├── avatar.png │ │ │ ├── avatar2.png │ │ │ ├── avatar3.png │ │ │ ├── avatar4.png │ │ │ ├── avatar5.png │ │ │ ├── icons.png │ │ │ ├── photo1.png │ │ │ ├── photo2.png │ │ │ ├── photo3.jpg │ │ │ ├── photo4.jpg │ │ │ ├── prod-1.jpg │ │ │ ├── prod-2.jpg │ │ │ ├── prod-3.jpg │ │ │ ├── prod-4.jpg │ │ │ ├── prod-5.jpg │ │ │ ├── boxed-bg.jpg │ │ │ ├── boxed-bg.png │ │ │ ├── AdminLTELogo.png │ │ │ ├── credit │ │ │ ├── visa.png │ │ │ ├── cirrus.png │ │ │ ├── paypal.png │ │ │ ├── paypal2.png │ │ │ ├── mastercard.png │ │ │ └── american-express.png │ │ │ ├── user1-128x128.jpg │ │ │ ├── user2-160x160.jpg │ │ │ ├── user3-128x128.jpg │ │ │ ├── user4-128x128.jpg │ │ │ ├── user5-128x128.jpg │ │ │ ├── user6-128x128.jpg │ │ │ ├── user7-128x128.jpg │ │ │ ├── user8-128x128.jpg │ │ │ ├── AdminLTEFullLogo.png │ │ │ └── default-150x150.png │ ├── .prettierrc.js │ ├── components │ │ ├── javascript │ │ │ ├── pushmenu.mdx │ │ │ └── treeview.mdx │ │ ├── dashboard │ │ │ └── _footer.astro │ │ ├── docs │ │ │ ├── license.mdx │ │ │ ├── faq.mdx │ │ │ ├── browser-support.mdx │ │ │ ├── introduction.mdx │ │ │ ├── how-to-contribute.mdx │ │ │ └── components │ │ │ │ └── main-sidebar.mdx │ │ ├── _scripts.astro │ │ └── _head.astro │ ├── .eslintrc.json │ └── pages │ │ ├── docs │ │ ├── faq.astro │ │ ├── license.astro │ │ ├── introduction.astro │ │ ├── javascript │ │ │ ├── pushmenu.astro │ │ │ └── treeview.astro │ │ ├── browser-support.astro │ │ ├── how-to-contribute.astro │ │ ├── components │ │ │ └── main-sidebar.astro │ │ └── layout.astro │ │ ├── examples │ │ ├── lockscreen.astro │ │ ├── login.astro │ │ ├── register.astro │ │ ├── login-v2.astro │ │ └── register-v2.astro │ │ ├── UI │ │ └── icons.astro │ │ └── layout │ │ ├── fixed-footer.astro │ │ ├── fixed-header.astro │ │ ├── unfixed-sidebar.astro │ │ ├── fixed-sidebar.astro │ │ ├── sidebar-mini.astro │ │ ├── layout-rtl.astro │ │ ├── fixed-complete.astro │ │ ├── collapsed-sidebar.astro │ │ └── layout-custom-area.astro ├── assets │ └── img │ │ ├── avatar.png │ │ ├── icons.png │ │ ├── photo1.png │ │ ├── photo2.png │ │ ├── photo3.jpg │ │ ├── photo4.jpg │ │ ├── prod-1.jpg │ │ ├── prod-2.jpg │ │ ├── prod-3.jpg │ │ ├── prod-4.jpg │ │ ├── prod-5.jpg │ │ ├── avatar2.png │ │ ├── avatar3.png │ │ ├── avatar4.png │ │ ├── avatar5.png │ │ ├── boxed-bg.jpg │ │ ├── boxed-bg.png │ │ ├── credit │ │ ├── visa.png │ │ ├── cirrus.png │ │ ├── paypal.png │ │ ├── paypal2.png │ │ ├── mastercard.png │ │ └── american-express.png │ │ ├── AdminLTELogo.png │ │ ├── user1-128x128.jpg │ │ ├── user2-160x160.jpg │ │ ├── user3-128x128.jpg │ │ ├── user4-128x128.jpg │ │ ├── user5-128x128.jpg │ │ ├── user6-128x128.jpg │ │ ├── user7-128x128.jpg │ │ ├── user8-128x128.jpg │ │ ├── AdminLTEFullLogo.png │ │ └── default-150x150.png ├── scss │ ├── _app-content.scss │ ├── _docs.scss │ ├── parts │ │ ├── _miscellaneous.scss │ │ ├── _pages.scss │ │ ├── _components.scss │ │ ├── _extra-components.scss │ │ └── _core.scss │ ├── _mixins.scss │ ├── _root.scss │ ├── _miscellaneous.scss │ ├── _app-footer.scss │ ├── _app-wrapper.scss │ ├── _app-header.scss │ ├── mixins │ │ ├── _scrollbar.scss │ │ └── _animations.scss │ ├── _toasts.scss │ ├── _variables-dark.scss │ ├── _progress-bars.scss │ ├── _callouts.scss │ ├── _compact-mode.scss │ ├── _app-main.scss │ ├── _table.scss │ ├── pages │ │ ├── _lockscreen.scss │ │ └── _login_and_register.scss │ ├── adminlte.scss │ ├── _small-box.scss │ ├── _info-box.scss │ ├── _timeline.scss │ └── _dropdown.scss ├── config │ ├── assets.config.mjs │ ├── postcss.config.mjs │ ├── rollup.config.js │ └── astro.config.mjs ├── utils │ └── index.js └── ts │ ├── layout.ts │ ├── adminlte.ts │ ├── direct-chat.ts │ ├── fullscreen.ts │ └── util │ └── index.ts ├── dist └── assets │ └── img │ ├── icons.png │ ├── avatar.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── boxed-bg.jpg │ ├── boxed-bg.png │ ├── photo1.png │ ├── photo2.png │ ├── photo3.jpg │ ├── photo4.jpg │ ├── prod-1.jpg │ ├── prod-2.jpg │ ├── prod-3.jpg │ ├── prod-4.jpg │ ├── prod-5.jpg │ ├── AdminLTELogo.png │ ├── credit │ ├── cirrus.png │ ├── paypal.png │ ├── visa.png │ ├── paypal2.png │ ├── mastercard.png │ └── american-express.png │ ├── user1-128x128.jpg │ ├── user2-160x160.jpg │ ├── user3-128x128.jpg │ ├── user4-128x128.jpg │ ├── user5-128x128.jpg │ ├── user6-128x128.jpg │ ├── user7-128x128.jpg │ ├── user8-128x128.jpg │ ├── default-150x150.png │ └── AdminLTEFullLogo.png ├── .prettierrc ├── .gitpod.yml ├── .stylelintignore ├── .gitattributes ├── .editorconfig ├── index.html ├── .browserslistrc ├── .lgtm.yml ├── composer.json ├── .gitignore ├── .bundlewatch.config.json ├── .npmignore ├── tsconfig.json ├── LICENSE ├── .stylelintrc.json ├── eslint.config.js ├── .eslintrc.json ├── CODE_OF_CONDUCT.md └── SECURITY.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: danny007in 2 | custom: ["https://www.paypal.me/daniel007in"] -------------------------------------------------------------------------------- /src/html/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import '../../.astro/types.d.ts' -------------------------------------------------------------------------------- /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL config" 2 | 3 | paths-ignore: 4 | - dist 5 | -------------------------------------------------------------------------------- /src/html/.tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "astro/tsconfigs/strict" 4 | } 5 | -------------------------------------------------------------------------------- /dist/assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/icons.png -------------------------------------------------------------------------------- /src/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/avatar.png -------------------------------------------------------------------------------- /src/assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/icons.png -------------------------------------------------------------------------------- /src/assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/photo1.png -------------------------------------------------------------------------------- /src/assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/photo2.png -------------------------------------------------------------------------------- /src/assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/photo3.jpg -------------------------------------------------------------------------------- /src/assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/photo4.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/prod-1.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/prod-2.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/prod-3.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/prod-4.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/prod-5.jpg -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "tabWidth": 2 6 | } -------------------------------------------------------------------------------- /dist/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/avatar.png -------------------------------------------------------------------------------- /dist/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/avatar2.png -------------------------------------------------------------------------------- /dist/assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/avatar3.png -------------------------------------------------------------------------------- /dist/assets/img/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/avatar4.png -------------------------------------------------------------------------------- /dist/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/avatar5.png -------------------------------------------------------------------------------- /dist/assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /dist/assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /dist/assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/photo1.png -------------------------------------------------------------------------------- /dist/assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/photo2.png -------------------------------------------------------------------------------- /dist/assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/photo3.jpg -------------------------------------------------------------------------------- /dist/assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/photo4.jpg -------------------------------------------------------------------------------- /dist/assets/img/prod-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/prod-1.jpg -------------------------------------------------------------------------------- /dist/assets/img/prod-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/prod-2.jpg -------------------------------------------------------------------------------- /dist/assets/img/prod-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/prod-3.jpg -------------------------------------------------------------------------------- /dist/assets/img/prod-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/prod-4.jpg -------------------------------------------------------------------------------- /dist/assets/img/prod-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/prod-5.jpg -------------------------------------------------------------------------------- /src/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /src/scss/_app-content.scss: -------------------------------------------------------------------------------- 1 | .app-content { 2 | padding: $lte-content-padding-y $lte-content-padding-x; 3 | } 4 | -------------------------------------------------------------------------------- /src/scss/_docs.scss: -------------------------------------------------------------------------------- 1 | .astro-code { 2 | padding: .75rem; 3 | @include border-radius($border-radius); 4 | } 5 | -------------------------------------------------------------------------------- /src/scss/parts/_miscellaneous.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Part: Miscellaneous 3 | // 4 | 5 | @import "../miscellaneous"; 6 | -------------------------------------------------------------------------------- /src/assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/visa.png -------------------------------------------------------------------------------- /dist/assets/img/AdminLTELogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/AdminLTELogo.png -------------------------------------------------------------------------------- /dist/assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /dist/assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /dist/assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/visa.png -------------------------------------------------------------------------------- /dist/assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /dist/assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/AdminLTELogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/AdminLTELogo.png -------------------------------------------------------------------------------- /src/assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /src/assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /src/assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /dist/assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /dist/assets/img/default-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/default-150x150.png -------------------------------------------------------------------------------- /src/assets/img/AdminLTEFullLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/AdminLTEFullLogo.png -------------------------------------------------------------------------------- /src/assets/img/default-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/default-150x150.png -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // 2 | // General: Mixins 3 | // 4 | 5 | @import "mixins/animations"; 6 | @import "mixins/scrollbar"; 7 | -------------------------------------------------------------------------------- /dist/assets/img/AdminLTEFullLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/AdminLTEFullLogo.png -------------------------------------------------------------------------------- /dist/assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /src/assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /src/html/public/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/avatar.png -------------------------------------------------------------------------------- /src/html/public/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/avatar2.png -------------------------------------------------------------------------------- /src/html/public/assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/avatar3.png -------------------------------------------------------------------------------- /src/html/public/assets/img/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/avatar4.png -------------------------------------------------------------------------------- /src/html/public/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/avatar5.png -------------------------------------------------------------------------------- /src/html/public/assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/icons.png -------------------------------------------------------------------------------- /src/html/public/assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/photo1.png -------------------------------------------------------------------------------- /src/html/public/assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/photo2.png -------------------------------------------------------------------------------- /src/html/public/assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/photo3.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/photo4.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/prod-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/prod-1.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/prod-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/prod-2.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/prod-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/prod-3.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/prod-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/prod-4.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/prod-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/prod-5.jpg -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | tasks: 2 | - init: npm install 3 | command: npm run dev 4 | ports: 5 | - port: 3000 6 | onOpen: open-preview 7 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | **/*.html 2 | **/*.md 3 | **/*.min.css 4 | **/.temp/ 5 | **/dist/ 6 | **/docs_html/ 7 | **/plugins/ 8 | **/.cache/ 9 | -------------------------------------------------------------------------------- /src/html/public/assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /dist/assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/dist/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /src/assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /src/html/public/assets/img/AdminLTELogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/AdminLTELogo.png -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/visa.png -------------------------------------------------------------------------------- /src/scss/_root.scss: -------------------------------------------------------------------------------- 1 | :root, 2 | [data-bs-theme="light"] { 3 | // Sidebar 4 | --#{$lte-prefix}sidebar-width: #{$lte-sidebar-width}; 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/parts/_pages.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Part: Pages 3 | // 4 | 5 | @import "../pages/login_and_register"; 6 | @import "../pages/lockscreen"; 7 | -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /src/html/public/assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /src/html/public/assets/img/AdminLTEFullLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/AdminLTEFullLogo.png -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /src/html/public/assets/img/default-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/default-150x150.png -------------------------------------------------------------------------------- /src/scss/parts/_components.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Part: Components 3 | // 4 | 5 | @import "../progress-bars"; 6 | @import "../cards"; 7 | @import "../table"; 8 | -------------------------------------------------------------------------------- /src/html/public/assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ColorlibHQ/AdminLTE/master/src/html/public/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /src/config/assets.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'fs-extra' 2 | 3 | try { 4 | fs.copySync('./src/assets', './dist/assets') 5 | console.log('Assets copy success!') 6 | } catch (error) { 7 | console.error(error) 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/parts/_extra-components.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Part: Extra Components 3 | // 4 | 5 | @import "../small-box"; 6 | @import "../info-box"; 7 | @import "../timeline"; 8 | @import "../direct-chat"; 9 | @import "../toasts"; 10 | -------------------------------------------------------------------------------- /src/html/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require.resolve('prettier-plugin-astro')], 3 | overrides: [ 4 | { 5 | files: '*.astro', 6 | options: { 7 | parser: 'astro' 8 | } 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | * text=auto eol=lf 3 | 4 | # Ignores for analysis is used to produce the language stats bar which displays the languages percentages 5 | plugins/* linguist-vendored=true 6 | docs/* linguist-vendored=true 7 | src/html/* linguist-vendored=true -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /src/scss/_miscellaneous.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Misc: Miscellaneous 3 | // 4 | 5 | // Image sizes 6 | .img-size-64, 7 | .img-size-50, 8 | .img-size-32 { 9 | height: auto; 10 | } 11 | 12 | .img-size-64 { 13 | width: 64px; 14 | } 15 | 16 | .img-size-50 { 17 | width: 50px; 18 | } 19 | 20 | .img-size-32 { 21 | width: 32px; 22 | } 23 | -------------------------------------------------------------------------------- /src/config/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const postcssConfig = { 2 | map: { 3 | inline: false, 4 | annotation: true, 5 | sourcesContent: true 6 | }, 7 | plugins: { 8 | ...(process.env.NODE_ENV === 'RTL' ? { rtlcss: {} } : {}), 9 | autoprefixer: { 10 | cascade: false 11 | } 12 | } 13 | } 14 | 15 | export default postcssConfig 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AdminLTE v4 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/scss/parts/_core.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Part: Core 3 | // 4 | 5 | @import "../root"; 6 | @import "../app-wrapper"; 7 | @import "../app-content"; 8 | @import "../app-header"; 9 | @import "../app-sidebar"; 10 | @import "../app-main"; 11 | @import "../app-footer"; 12 | @import "../dropdown"; 13 | @import "../callouts"; 14 | @import "../compact-mode"; 15 | @import "../docs"; 16 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # https://github.com/browserslist/browserslist#readme 2 | # Updated for ES2022 compatibility 3 | 4 | >= 0.5% 5 | last 2 major versions 6 | not dead 7 | Chrome >= 97 8 | Firefox >= 104 9 | Firefox ESR 10 | iOS >= 15.4 11 | Safari >= 15.4 12 | Edge >= 97 13 | not Explorer <= 11 14 | not ie 11 15 | not android 4.4.3 16 | not ios_saf < 15.4 17 | not kaios <= 2.5 # fix floating label issues in Firefox (see https://github.com/postcss/autoprefixer/issues/1533) 18 | -------------------------------------------------------------------------------- /.lgtm.yml: -------------------------------------------------------------------------------- 1 | # https://lgtm.com/help/lgtm/customizing-file-classification 2 | path_classifiers: 3 | plugins: 4 | - plugins/ 5 | 6 | extraction: 7 | javascript: 8 | # https://lgtm.com/help/lgtm/javascript-extraction#customizing-index 9 | # The `index` step extracts information from the files in the codebase. 10 | index: 11 | # Specify a list of files and folders to exclude from extraction. 12 | exclude: 13 | - bower_components/ 14 | - docs/assets/js/plugins/ 15 | - plugins/ 16 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | function convertPathToHtml(path) { 2 | let count = 0 3 | let htmlPath = '' 4 | while (path.startsWith('../')) { 5 | count++ 6 | path = path.slice(3) 7 | } 8 | 9 | if (count === 2) { 10 | htmlPath = '.' 11 | } 12 | 13 | if (count === 3) { 14 | htmlPath = '..' 15 | } 16 | 17 | if (count === 4) { 18 | htmlPath = '../..' 19 | } 20 | 21 | if (count === 5) { 22 | htmlPath = '../../..' 23 | } 24 | 25 | return htmlPath 26 | } 27 | 28 | export { convertPathToHtml } 29 | -------------------------------------------------------------------------------- /src/html/components/javascript/pushmenu.mdx: -------------------------------------------------------------------------------- 1 | The Pushmenu plugin is used to toggle the visibility of a sidebar menu. It allows users to collapse or expand the sidebar by clicking on a button or a link. 2 | 3 | ##### Usage 4 | 5 | This plugin can be used as the data api. 6 | 7 | **Data API** 8 | 9 | Add `data-lte-toggle="sidebar"` to any button or link element to activate the plugin. 10 | 11 | ```html 12 | Toggle Sidebar 13 | ``` 14 | 15 | ##### Example 16 | 17 | Toggle Sidebar 18 | -------------------------------------------------------------------------------- /src/html/components/dashboard/_footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const year = new Date().getFullYear(); 3 | --- 4 | 5 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "almasaeed2010/adminlte", 3 | "description": "AdminLTE - admin control panel and dashboard that's based on Bootstrap 4", 4 | "homepage": "https://adminlte.io/", 5 | "keywords": [ 6 | "css", 7 | "js", 8 | "less", 9 | "responsive", 10 | "back-end", 11 | "template", 12 | "theme", 13 | "web", 14 | "admin" 15 | ], 16 | "authors": [ 17 | { 18 | "name": "Colorlib" 19 | } 20 | ], 21 | "license": "MIT", 22 | "support": { 23 | "issues": "https://github.com/ColorlibHQ/AdminLTE/issues" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/_app-footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Core: Main Footer 3 | // 4 | 5 | .app-footer { 6 | grid-area: #{$lte-prefix}app-footer; 7 | width: inherit; 8 | max-width: 100vw; 9 | min-height: 3rem; 10 | padding: $lte-app-footer-padding; 11 | color: $lte-app-footer-color; 12 | background-color: $lte-app-footer-bg; 13 | border-top: $lte-app-footer-border-top; 14 | @include transition($lte-transition-speed $lte-transition-fn); 15 | } 16 | 17 | .fixed-footer { 18 | .app-footer { 19 | position: sticky; 20 | bottom: 0; 21 | z-index: $lte-zindex-fixed-footer; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/scss/_app-wrapper.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Core: Layout 3 | // 4 | 5 | .app-wrapper { 6 | position: relative; 7 | display: grid; 8 | grid-template-areas: 9 | "#{$lte-prefix}app-sidebar #{$lte-prefix}app-header" 10 | "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main" 11 | "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer"; 12 | grid-template-rows: min-content 1fr min-content; 13 | grid-template-columns: auto 1fr; 14 | grid-gap: 0; 15 | align-content: stretch; 16 | align-items: stretch; 17 | max-width: 100vw; 18 | min-height: 100vh; 19 | 20 | > * { 21 | min-width: 0; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # generated types 2 | .astro/ 3 | 4 | # unwanted types 5 | **/env.d.ts 6 | 7 | # System / Log files 8 | *.DS_Store 9 | *.log 10 | 11 | # Archives 12 | *.zip 13 | 14 | # Sass Cache 15 | .sass-cache 16 | 17 | # Project files 18 | .idea 19 | nbproject 20 | nbproject/private 21 | .vscode/ 22 | .vs/ 23 | 24 | # Node / Bower 25 | node_modules/ 26 | bower_components/ 27 | 28 | # Docs 29 | /docs/_site/ 30 | /docs/vendor/ 31 | /docs/.bundle/ 32 | /docs_html/ 33 | .jekyll-cache/ 34 | .jekyll-metadata 35 | 36 | # ETC 37 | TODO 38 | test.html 39 | ad.js 40 | /.cache/ 41 | CLAUDE.md 42 | github-issue-response.md 43 | -------------------------------------------------------------------------------- /.bundlewatch.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | { 4 | "path": "./dist/css/adminlte.css", 5 | "maxSize": "46 kB" 6 | }, 7 | { 8 | "path": "./dist/css/adminlte.min.css", 9 | "maxSize": "42 kB" 10 | }, 11 | { 12 | "path": "./dist/css/adminlte.rtl.css", 13 | "maxSize": "46 kB" 14 | }, 15 | { 16 | "path": "./dist/css/adminlte.rtl.min.css", 17 | "maxSize": "42 kB" 18 | }, 19 | { 20 | "path": "./dist/js/adminlte.js", 21 | "maxSize": "9 kB" 22 | }, 23 | { 24 | "path": "./dist/js/adminlte.min.js", 25 | "maxSize": "5.2 kB" 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /src/html/components/docs/license.mdx: -------------------------------------------------------------------------------- 1 | AdminLTE is an open source project that is licensed under the [MIT license](https://opensource.org/licenses/MIT). This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated). 2 | 3 |
What You Are Allowed To Do With AdminLTE
4 | 5 | - Use in commercial projects. 6 | - Use in personal/private projects. 7 | - Modify and change the work. 8 | - Distribute the code. 9 | - Sublicense: incorporate the work into something that has a more restrictive license. 10 | -------------------------------------------------------------------------------- /src/config/rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from '@rollup/plugin-typescript' 2 | import pkg from '../../package.json' with { type: 'json' } 3 | 4 | const year = new Date().getFullYear() 5 | const banner = `/*! 6 | * AdminLTE v${pkg.version} (${pkg.homepage}) 7 | * Copyright 2014-${year} ${pkg.author} 8 | * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE) 9 | */` 10 | 11 | export default { 12 | input: 'src/ts/adminlte.ts', 13 | output: { 14 | file: 'dist/js/adminlte.js', 15 | format: 'umd', 16 | banner, 17 | name: 'adminlte' 18 | }, 19 | plugins: [ 20 | typescript({ 21 | tsconfig: './tsconfig.json', 22 | sourceMap: true 23 | }) 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/_app-header.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Core: Main Header 3 | // 4 | 5 | .app-header { 6 | z-index: $lte-zindex-app-header; 7 | grid-area: #{$lte-prefix}app-header; 8 | max-width: 100vw; 9 | border-bottom: $lte-app-header-bottom-border; 10 | @include transition($lte-transition-speed $lte-transition-fn); 11 | 12 | .nav-link { 13 | position: relative; 14 | height: $nav-link-height; 15 | } 16 | } 17 | 18 | // Navbar badge 19 | .navbar-badge { 20 | position: absolute; 21 | top: 9px; 22 | right: 5px; 23 | padding: 2px 4px; 24 | font-size: .6rem; 25 | font-weight: 400; 26 | } 27 | 28 | .fixed-header { 29 | .app-header { 30 | position: sticky; 31 | top: 0; 32 | z-index: $lte-zindex-fixed-header; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | workflow_dispatch: 9 | 10 | env: 11 | FORCE_COLOR: 2 12 | NODE: 22 13 | 14 | permissions: 15 | contents: read 16 | 17 | jobs: 18 | run: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: Clone repository 23 | uses: actions/checkout@v4 24 | with: 25 | persist-credentials: false 26 | 27 | - name: Set up Node.js 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: "${{ env.NODE }}" 31 | cache: npm 32 | 33 | - name: Install npm dependencies 34 | run: npm ci 35 | 36 | - name: Run lint 37 | run: npm run lint -------------------------------------------------------------------------------- /src/html/components/docs/faq.mdx: -------------------------------------------------------------------------------- 1 | #### Can AdminLTE be used with WordPress? 2 | 3 | AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so. 4 | 5 | #### Is there an integration guide for PHP frameworks such as Yii or Symfony? 6 | 7 | Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET. 8 | 9 | #### How do I get notified of new AdminLTE versions? 10 | 11 | You may watch the [releases on GitHub](https://github.com/ColorlibHQ/AdminLTE). 12 | -------------------------------------------------------------------------------- /src/scss/mixins/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins: Scrollbar 3 | // 4 | 5 | @mixin scrollbar-color-gray() { 6 | scrollbar-color: var(--#{$prefix}secondary-bg) transparent; 7 | 8 | &::-webkit-scrollbar-thumb { 9 | background-color: var(--#{$prefix}secondary-bg); 10 | } 11 | 12 | &::-webkit-scrollbar-track { 13 | background-color: transparent; 14 | } 15 | 16 | &::-webkit-scrollbar-corner { 17 | background-color: transparent; 18 | } 19 | } 20 | 21 | @mixin scrollbar-width-thin() { 22 | scrollbar-width: thin; 23 | 24 | &::-webkit-scrollbar { 25 | width: .5rem; 26 | height: .5rem; 27 | } 28 | } 29 | 30 | @mixin scrollbar-width-none() { 31 | scrollbar-width: none; 32 | 33 | &::-webkit-scrollbar { 34 | width: 0; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Ignore IDE and editor configuration files 2 | /.astro/ 3 | /.vscode/ 4 | /idea/ 5 | /.temp/ 6 | /.cache/ 7 | 8 | # Ignore documentation files 9 | /docs/ 10 | /docs_html/ 11 | 12 | # Ignore plugin files except for specific ones 13 | /plugins/* 14 | !/plugins/flot-old/ 15 | 16 | # Ignore Git and GitHub configuration files 17 | /.github/ 18 | /.lgtm.yml 19 | /.gitignore 20 | /.gitattributes 21 | /.gitpod.yml 22 | 23 | # Ignore configuration files for various tools 24 | /.browserlistrc 25 | /.bundlewatch.config.json 26 | /.editorconfig 27 | /.eslintignore 28 | /.eslintrc.json 29 | /.stylelintignore 30 | /.stylelintrc.json 31 | /composer.json 32 | /tsconfig.json 33 | 34 | # Ignore specific source directories 35 | /src/assets/ 36 | /src/config/ 37 | /src/html/ 38 | /src/utils/ -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request-for-adminlte-v4-x.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request for AdminLTE v4.x 3 | about: Suggest an idea for this project 4 | title: "[FEATURE]" 5 | labels: type:enhancement, version:4.x 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /src/html/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:astro/recommended" 5 | ], 6 | "overrides": [ 7 | { 8 | // Define the configuration for `.astro` file. 9 | "files": ["*.astro"], 10 | // Allows Astro components to be parsed. 11 | "parser": "astro-eslint-parser", 12 | // Parse the script in `.astro` as TypeScript by adding the following configuration. 13 | // It's the setting you need when using TypeScript. 14 | "parserOptions": { 15 | "parser": "@typescript-eslint/parser", 16 | "extraFileExtensions": [".astro"] 17 | }, 18 | "rules": { 19 | // override/add rules settings here, such as: 20 | // "astro/no-set-html-directive": "error" 21 | } 22 | } 23 | ] 24 | } -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: Docs 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | workflow_dispatch: 9 | 10 | env: 11 | FORCE_COLOR: 2 12 | NODE: 22 13 | 14 | permissions: 15 | contents: read 16 | 17 | jobs: 18 | bundlewatch: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: Clone repository 23 | uses: actions/checkout@v4 24 | with: 25 | persist-credentials: false 26 | 27 | - name: Set up Node.js 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: "${{ env.NODE }}" 31 | cache: npm 32 | 33 | - name: Install npm dependencies 34 | run: npm ci 35 | 36 | - name: Build docs 37 | run: npm run docs-compile 38 | -------------------------------------------------------------------------------- /src/html/components/docs/browser-support.mdx: -------------------------------------------------------------------------------- 1 | AdminLTE comes with the same browser support as Bootstrap 5. 2 | 3 | > ##### Excerpt from Bootstrap's official Documentation! 4 | > 5 | > Bootstrap supports the **latest, stable releases** of all major browsers and platforms. 6 | > 7 | > For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers). 8 | 9 | You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc): 10 | 11 | ``` 12 | # https://github.com/browserslist/browserslist#readme 13 | 14 | >= 0.5% 15 | last 2 major versions 16 | not dead 17 | Chrome >= 60 18 | Firefox >= 60 19 | Firefox ESR 20 | iOS >= 12 21 | Safari >= 12 22 | not Explorer <= 11 23 | ``` 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "compilerOptions": { 4 | "noFallthroughCasesInSwitch": true, 5 | "noUnusedParameters": true, 6 | "noImplicitReturns": true, 7 | "noUnusedLocals": true, 8 | "noImplicitAny": true, 9 | "module": "esnext", 10 | "alwaysStrict": true, 11 | "strict": true, 12 | "strictNullChecks": true, 13 | "strictBindCallApply": true, 14 | "strictFunctionTypes": true, 15 | "strictPropertyInitialization": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@components/*": ["src/html/components/*"], 19 | }, 20 | /* Language and Environment */ 21 | "target": "es2022", 22 | "lib": ["es2022", "DOM"], 23 | }, 24 | "include": [ 25 | "src/ts/**/*" 26 | ], 27 | "exclude": [ 28 | "dist", 29 | "node_modules", 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /src/config/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config' 2 | import mdx from '@astrojs/mdx' 3 | 4 | // https://astro.build/config 5 | export default defineConfig({ 6 | output: 'static', 7 | build: { 8 | // Example: Generate `page.html` instead of `page/index.html` during build. 9 | format: 'file' 10 | }, 11 | compressHTML: false, 12 | markdown: { 13 | shikiConfig: { 14 | theme: 'dark-plus' 15 | } 16 | }, 17 | integrations: [mdx()], 18 | srcDir: './src/html', 19 | publicDir: './src/html/public', 20 | cacheDir: './dist/.astro', 21 | outDir: './dist/html', 22 | server: { 23 | host: '0.0.0.0', 24 | port: 3000 25 | }, 26 | vite: { 27 | server: { 28 | host: '0.0.0.0', 29 | watch: { 30 | ignored: ['!**/dist/**'] 31 | } 32 | } 33 | } 34 | }) 35 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: monthly 7 | time: "03:00" 8 | groups: 9 | eslint: 10 | patterns: 11 | - "eslint" 12 | - "eslint-*" 13 | - "@typescript-eslint/*" 14 | stylelint: 15 | patterns: 16 | - "stylelint" 17 | - "stylelint-*" 18 | prettier: 19 | patterns: 20 | - "prettier" 21 | - "prettier-*" 22 | rollup: 23 | patterns: 24 | - "rollup" 25 | - "@rollup/*" 26 | postcss: 27 | patterns: 28 | - "postcss" 29 | - "postcss-*" 30 | astro: 31 | patterns: 32 | - "astro" 33 | - "@astrojs/*" 34 | open-pull-requests-limit: 10 35 | versioning-strategy: increase 36 | -------------------------------------------------------------------------------- /src/scss/_toasts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Toast 3 | // 4 | 5 | @each $name, $color in $theme-colors { 6 | .toast-#{$name} { 7 | --#{$prefix}toast-header-color: #{color-contrast($color)}; 8 | --#{$prefix}toast-header-bg: #{$color}; 9 | --#{$prefix}toast-header-border-color: #{$color}; 10 | --#{$prefix}toast-border-color: #{$color}; 11 | --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle); 12 | 13 | @if color-contrast($color) == $color-contrast-light { 14 | .btn-close { 15 | @include btn-close-white(); 16 | } 17 | } 18 | } 19 | } 20 | 21 | @if $enable-dark-mode { 22 | @include color-mode(dark) { 23 | @each $name, $color in $theme-colors { 24 | .toast-#{$name} { 25 | @if color-contrast($color) == $color-contrast-dark { 26 | .btn-close { 27 | --#{$prefix}btn-close-white-filter: none; 28 | } 29 | } 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report-for-adminlte-v3.1-x.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report for AdminLTE v3.x 3 | about: Create a report to help us improve AdminLTE v3.x 4 | title: "[BUG]" 5 | labels: type:bug, version:3.1.x 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Environment (please complete the following information):** 27 | - AdminLTE Version: [e.g. v3.0.0] 28 | - Operating System: [e.g. macOS Catalina] 29 | - Browser (Version): [e.g. Chrome (Latest)] 30 | 31 | **Additional context** 32 | Add any other context about the problem here. 33 | -------------------------------------------------------------------------------- /src/html/components/javascript/treeview.mdx: -------------------------------------------------------------------------------- 1 | The Treeview plugin converts a nested list into a tree view where sub menus can be expanded. 2 | 3 | ##### Usage 4 | 5 | This plugin can be used as the data api. 6 | 7 | **Data API** 8 | 9 | Add `data-lte-toggle="treeview"` to any ul or ol element to activate the plugin. 10 | 11 | ```html 12 | 21 | ``` 22 | 23 | ##### Example 24 | 25 | 40 | -------------------------------------------------------------------------------- /.github/workflows/bundlewatch.yml: -------------------------------------------------------------------------------- 1 | name: Bundlewatch 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | workflow_dispatch: 9 | 10 | env: 11 | FORCE_COLOR: 2 12 | NODE: 22 13 | 14 | permissions: 15 | contents: read 16 | 17 | jobs: 18 | bundlewatch: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: Clone repository 23 | uses: actions/checkout@v4 24 | with: 25 | persist-credentials: false 26 | 27 | - name: Set up Node.js 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: "${{ env.NODE }}" 31 | cache: npm 32 | 33 | - name: Install npm dependencies 34 | run: npm ci 35 | 36 | - name: Run dist 37 | run: npm run compile 38 | 39 | - name: Run bundlewatch 40 | run: npm run bundlewatch 41 | env: 42 | BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}" 43 | CI_BRANCH_BASE: master -------------------------------------------------------------------------------- /src/scss/_variables-dark.scss: -------------------------------------------------------------------------------- 1 | // SIDEBAR SKINS 2 | // -------------------------------------------------------- 3 | 4 | $lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default; 5 | $lte-sidebar-color-dark: #c2c7d0 !default; 6 | $lte-sidebar-hover-color-dark: $white !default; 7 | $lte-sidebar-active-color-dark: $white !default; 8 | $lte-sidebar-menu-active-bg-dark: rgba(255, 255, 255, .1) !default; 9 | $lte-sidebar-menu-active-color-dark: $white !default; 10 | $lte-sidebar-submenu-bg-dark: transparent !default; 11 | $lte-sidebar-submenu-color-dark: #c2c7d0 !default; 12 | $lte-sidebar-submenu-hover-color-dark: $white !default; 13 | $lte-sidebar-submenu-hover-bg-dark: rgba(255, 255, 255, .1) !default; 14 | $lte-sidebar-submenu-active-color-dark: $white !default; 15 | $lte-sidebar-submenu-active-bg-dark: rgba(255, 255, 255, .1) !default; 16 | $lte-sidebar-header-color-dark: tint-color(#c2c7d0, 5%) !default; 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2023 ColorlibHQ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/scss/_progress-bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Progress Bar 3 | // 4 | 5 | //General CSS 6 | .progress { 7 | @include box-shadow(null); 8 | @include border-radius($lte-progress-bar-border-radius); 9 | 10 | // Vertical bars 11 | &.vertical { 12 | position: relative; 13 | display: inline-block; 14 | width: 30px; 15 | height: 200px; 16 | margin-right: 10px; 17 | 18 | > .progress-bar { 19 | position: absolute; 20 | bottom: 0; 21 | width: 100%; 22 | } 23 | 24 | //Sizes 25 | &.sm, 26 | &.progress-sm { 27 | width: 20px; 28 | } 29 | 30 | &.xs, 31 | &.progress-xs { 32 | width: 10px; 33 | } 34 | 35 | &.xxs, 36 | &.progress-xxs { 37 | width: 3px; 38 | } 39 | } 40 | } 41 | 42 | .progress-group { 43 | margin-bottom: map-get($spacers, 2); 44 | } 45 | 46 | // size variation 47 | .progress-sm { 48 | height: 10px; 49 | } 50 | 51 | .progress-xs { 52 | height: 7px; 53 | } 54 | 55 | .progress-xxs { 56 | height: 3px; 57 | } 58 | 59 | // Remove margins from progress bars when put in a table 60 | .table { 61 | tr > td { 62 | .progress { 63 | margin: 0; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/_callouts.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Callouts 3 | // 4 | 5 | .callout { 6 | --#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link); 7 | --#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color); 8 | 9 | padding: 1.25rem; 10 | color: var(--#{$lte-prefix}callout-color, inherit); 11 | background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100)); 12 | border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300)); 13 | 14 | .callout-link { 15 | font-weight: $lte-callout-link-font-weight; 16 | color: var(--#{$prefix}callout-link-color); 17 | } 18 | 19 | h4 { 20 | margin-bottom: .25rem; 21 | } 22 | 23 | > :last-child { 24 | margin-bottom: 0; 25 | } 26 | 27 | + .callout { 28 | margin-top: -.25rem; 29 | } 30 | } 31 | 32 | // Variations 33 | @each $name, $color in $theme-colors { 34 | .callout-#{$name} { 35 | --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis); 36 | --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle); 37 | --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle); 38 | --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/_compact-mode.scss: -------------------------------------------------------------------------------- 1 | .compact-mode { 2 | .app-header { 3 | max-height: $lte-app-header-height-compact; 4 | 5 | .nav-link { 6 | max-height: $nav-link-height-compact; 7 | } 8 | } 9 | 10 | .nav-link { 11 | --bs-nav-link-padding-y: .25rem; 12 | --bs-nav-link-padding-x: .5rem; 13 | } 14 | 15 | &.sidebar-mini.sidebar-collapse { 16 | .app-sidebar:not(:hover) { 17 | min-width: $lte-sidebar-mini-width-compact; 18 | max-width: $lte-sidebar-mini-width-compact; 19 | 20 | .sidebar-menu { 21 | .nav-link { 22 | width: $lte-sidebar-mini-width-compact - $lte-sidebar-padding-x * 2 !important; 23 | } 24 | } 25 | } 26 | } 27 | 28 | .logo-xs, 29 | .logo-xl { 30 | max-height: $lte-app-header-height-compact; 31 | } 32 | 33 | .brand-image { 34 | width: $nav-link-height-compact; 35 | height: $nav-link-height-compact; 36 | } 37 | 38 | .sidebar-brand { 39 | height: $lte-app-header-height-compact; 40 | } 41 | 42 | .app-footer { 43 | padding: $lte-app-footer-padding-compact; 44 | } 45 | 46 | .sidebar-wrapper { 47 | .nav-icon { 48 | min-width: 1.1rem; 49 | max-width: 1.1rem; 50 | } 51 | } 52 | } 53 | 54 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | - "!dependabot/**" 8 | pull_request: 9 | # The branches below must be a subset of the branches above 10 | branches: 11 | - master 12 | - "!dependabot/**" 13 | schedule: 14 | - cron: "0 0 * * 0" 15 | workflow_dispatch: 16 | 17 | env: 18 | FORCE_COLOR: 2 19 | 20 | jobs: 21 | analyze: 22 | name: Analyze 23 | runs-on: ubuntu-latest 24 | permissions: 25 | security-events: write 26 | 27 | steps: 28 | - name: Checkout repository 29 | uses: actions/checkout@v4 30 | with: 31 | persist-credentials: false 32 | 33 | # Initializes the CodeQL tools for scanning. 34 | - name: Initialize CodeQL 35 | uses: github/codeql-action/init@v3 36 | with: 37 | languages: "javascript" 38 | config-file: ./.github/codeql/codeql-config.yml 39 | queries: +security-and-quality 40 | 41 | - name: Autobuild 42 | uses: github/codeql-action/autobuild@v3 43 | 44 | - name: Perform CodeQL Analysis 45 | uses: github/codeql-action/analyze@v3 46 | with: 47 | category: "/language:javascript" 48 | -------------------------------------------------------------------------------- /src/scss/_app-main.scss: -------------------------------------------------------------------------------- 1 | .app-main { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | grid-area: #{$lte-prefix}app-main; 6 | max-width: 100vw; 7 | padding-bottom: $lte-app-main-padding-bottom; 8 | @include transition($lte-transition-speed $lte-transition-fn); 9 | 10 | .app-content-header { 11 | padding: 1rem $lte-content-padding-x; 12 | 13 | .breadcrumb { 14 | padding: 0; 15 | margin-bottom: 0; 16 | line-height: 2.5rem; 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | } 22 | } 23 | 24 | .app-content-top-area, 25 | .app-content-bottom-area { 26 | color: $lte-app-content-bottom-area-color; 27 | background-color: $lte-app-content-bottom-area-bg; 28 | } 29 | 30 | .app-content-top-area { 31 | padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x; 32 | border-bottom: $lte-app-content-top-area-top-border; 33 | } 34 | 35 | .app-content-bottom-area { 36 | padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x; 37 | margin-top: auto; 38 | margin-bottom: $lte-app-content-bottom-area-margin-bottom; 39 | border-top: $lte-app-content-bottom-area-top-border; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-twbs-bootstrap" 4 | ], 5 | "reportInvalidScopeDisables": true, 6 | "reportNeedlessDisables": true, 7 | "overrides": [ 8 | { 9 | "files": ["**/*.scss"], 10 | "rules": { 11 | "declaration-no-important": null, 12 | "declaration-property-value-disallowed-list": { 13 | "border": "none", 14 | "outline": "none" 15 | }, 16 | "function-disallowed-list": [ 17 | "calc", 18 | "lighten", 19 | "darken" 20 | ], 21 | "keyframes-name-pattern": null, 22 | "property-disallowed-list": [ 23 | "border-radius", 24 | "border-top-left-radius", 25 | "border-top-right-radius", 26 | "border-bottom-right-radius", 27 | "border-bottom-left-radius", 28 | "transition" 29 | ], 30 | "scss/dollar-variable-default": [ 31 | true, 32 | { 33 | "ignore": "local" 34 | } 35 | ], 36 | "scss/selector-no-union-class-name": true, 37 | "selector-max-class": null, 38 | "selector-max-combinators": null, 39 | "selector-max-compound-selectors": null, 40 | "selector-max-id": null, 41 | "selector-max-specificity": null, 42 | "selector-max-type": null, 43 | "selector-no-qualifying-type": null 44 | } 45 | } 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /src/scss/_table.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Table 3 | // 4 | 5 | .table { 6 | &:not(.table-dark) { 7 | color: inherit; 8 | } 9 | 10 | // fixed table head 11 | &.table-head-fixed { 12 | thead tr:nth-child(1) th { 13 | position: sticky; 14 | top: 0; 15 | z-index: 10; 16 | background-color: $white; 17 | border-bottom: 0; 18 | box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color; 19 | } 20 | 21 | // Note: Dark table styling for fixed headers is handled by Bootstrap's built-in dark table classes 22 | } 23 | 24 | // no border 25 | &.no-border { 26 | &, 27 | td, 28 | th { 29 | border: 0; 30 | } 31 | } 32 | 33 | // .text-center in tables 34 | &.text-center { 35 | &, 36 | td, 37 | th { 38 | text-align: center; 39 | } 40 | } 41 | 42 | &.table-valign-middle { 43 | thead > tr > th, 44 | thead > tr > td, 45 | tbody > tr > th, 46 | tbody > tr > td { 47 | vertical-align: middle; 48 | } 49 | } 50 | 51 | .card-body.p-0 & { 52 | thead > tr > th, 53 | thead > tr > td, 54 | tfoot > tr > th, 55 | tfoot > tr > td, 56 | tbody > tr > th, 57 | tbody > tr > td { 58 | &:first-of-type { 59 | padding-left: map-get($spacers, 4); 60 | } 61 | 62 | &:last-of-type { 63 | padding-right: map-get($spacers, 4); 64 | } 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/ts/layout.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------- 3 | * @file AdminLTE layout.ts 4 | * @description Layout for AdminLTE. 5 | * @license MIT 6 | * -------------------------------------------- 7 | */ 8 | 9 | import { 10 | onDOMContentLoaded 11 | } from './util/index' 12 | 13 | /** 14 | * ------------------------------------------------------------------------ 15 | * Constants 16 | * ------------------------------------------------------------------------ 17 | */ 18 | 19 | const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition' 20 | const CLASS_NAME_APP_LOADED = 'app-loaded' 21 | 22 | /** 23 | * Class Definition 24 | * ==================================================== 25 | */ 26 | 27 | class Layout { 28 | _element: HTMLElement 29 | 30 | constructor(element: HTMLElement) { 31 | this._element = element 32 | } 33 | 34 | holdTransition(): void { 35 | let resizeTimer: ReturnType 36 | window.addEventListener('resize', () => { 37 | document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS) 38 | clearTimeout(resizeTimer) 39 | resizeTimer = setTimeout(() => { 40 | document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS) 41 | }, 400) 42 | }) 43 | } 44 | } 45 | 46 | onDOMContentLoaded(() => { 47 | const data = new Layout(document.body) 48 | data.holdTransition() 49 | setTimeout(() => { 50 | document.body.classList.add(CLASS_NAME_APP_LOADED) 51 | }, 400) 52 | }) 53 | 54 | export default Layout 55 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release & Publish 2 | 3 | on: 4 | push: 5 | tags: 6 | - '*' 7 | 8 | env: 9 | FORCE_COLOR: 2 10 | NODE: 22 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Clone repository 17 | uses: actions/checkout@v4 18 | with: 19 | persist-credentials: false 20 | 21 | - name: Set env 22 | run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV 23 | 24 | - name: Set up Node.js 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: "${{ env.NODE }}" 28 | cache: npm 29 | 30 | - name: Install npm dependencies 31 | run: npm ci 32 | 33 | - name: Build distribution files 34 | run: npm run production 35 | 36 | - name: Zip distribution files 37 | uses: montudor/action-zip@v1 38 | with: 39 | args: "zip -qq -r admin-lte-${{env.RELEASE_VERSION}}.zip dist" 40 | 41 | - name: Create changelog text 42 | id: changelog 43 | uses: endaft/action-changelog@v0.0.5 44 | with: 45 | token: ${{ secrets.GITHUB_TOKEN }} 46 | exclude_types: other,doc,chore 47 | 48 | - name: Release 49 | uses: softprops/action-gh-release@v1 50 | if: startsWith(github.ref, 'refs/tags/') 51 | with: 52 | body: ${{ steps.changelog.outputs.changelog }} 53 | files: | 54 | admin-lte-${{env.RELEASE_VERSION}}.zip 55 | -------------------------------------------------------------------------------- /src/ts/adminlte.ts: -------------------------------------------------------------------------------- 1 | import { onDOMContentLoaded } from './util/index.js' 2 | import Layout from './layout.js' 3 | import CardWidget from './card-widget.js' 4 | import Treeview from './treeview.js' 5 | import DirectChat from './direct-chat.js' 6 | import FullScreen from './fullscreen.js' 7 | import PushMenu from './push-menu.js' 8 | import { initAccessibility } from './accessibility.js' 9 | 10 | /** 11 | * AdminLTE v4.0.0-rc5 12 | * Author: Colorlib 13 | * Website: AdminLTE.io 14 | * License: Open source - MIT 15 | */ 16 | 17 | onDOMContentLoaded(() => { 18 | /** 19 | * Initialize AdminLTE Core Components 20 | * ------------------------------- 21 | */ 22 | const layout = new Layout(document.body) 23 | layout.holdTransition() 24 | 25 | /** 26 | * Initialize Accessibility Features - WCAG 2.1 AA Compliance 27 | * -------------------------------------------------------- 28 | */ 29 | const accessibilityManager = initAccessibility({ 30 | announcements: true, 31 | skipLinks: true, 32 | focusManagement: true, 33 | keyboardNavigation: true, 34 | reducedMotion: true 35 | }) 36 | 37 | // Add semantic landmarks 38 | accessibilityManager.addLandmarks() 39 | 40 | // Mark app as loaded after initialization 41 | setTimeout(() => { 42 | document.body.classList.add('app-loaded') 43 | }, 400) 44 | }) 45 | 46 | export { 47 | Layout, 48 | CardWidget, 49 | Treeview, 50 | DirectChat, 51 | FullScreen, 52 | PushMenu, 53 | initAccessibility 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/pages/_lockscreen.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pages: Lock Screen 3 | // 4 | 5 | // ADD THIS CLASS TO THE TAG 6 | .lockscreen { 7 | // User name [optional] 8 | .lockscreen-name { 9 | font-weight: 600; 10 | text-align: center; 11 | } 12 | 13 | .lockscreen-logo { 14 | margin-bottom: 25px; 15 | font-size: 35px; 16 | font-weight: 300; 17 | text-align: center; 18 | 19 | a { 20 | color: var(--#{$prefix}emphasis-color); 21 | text-decoration: none; 22 | } 23 | } 24 | 25 | .lockscreen-wrapper { 26 | max-width: 400px; 27 | margin: 0 auto; 28 | margin-top: 10%; 29 | } 30 | 31 | // Will contain the image and the sign in form 32 | .lockscreen-item { 33 | position: relative; 34 | width: 290px; 35 | padding: 0; 36 | margin: 10px auto 30px; 37 | background-color: var(--#{$prefix}body-bg); 38 | @include border-radius(4px); 39 | } 40 | 41 | // User image 42 | .lockscreen-image { 43 | position: absolute; 44 | top: -25px; 45 | left: -10px; 46 | z-index: 10; 47 | padding: 5px; 48 | background-color: var(--#{$prefix}body-bg); 49 | @include border-radius(50%); 50 | 51 | > img { 52 | @include border-radius(50%); 53 | width: 70px; 54 | height: 70px; 55 | } 56 | } 57 | 58 | // Contains the password input and the login button 59 | .lockscreen-credentials { 60 | margin-left: 70px; 61 | 62 | .form-control { 63 | border: 0; 64 | } 65 | 66 | .btn { 67 | padding: 0 10px; 68 | border: 0; 69 | } 70 | } 71 | 72 | .lockscreen-footer { 73 | margin-top: 10px; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /.github/workflows/node-sass.yml: -------------------------------------------------------------------------------- 1 | name: CSS (node-sass) 2 | 3 | on: 4 | push: 5 | branches-ignore: 6 | - "dependabot/**" 7 | pull_request: 8 | workflow_dispatch: 9 | 10 | env: 11 | FORCE_COLOR: 2 12 | NODE: 22 13 | 14 | permissions: 15 | contents: read 16 | 17 | jobs: 18 | css: 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - name: Clone repository 23 | uses: actions/checkout@v4 24 | with: 25 | persist-credentials: false 26 | 27 | - name: Set up Node.js 28 | uses: actions/setup-node@v4 29 | with: 30 | node-version: "${{ env.NODE }}" 31 | cache: npm 32 | 33 | - name: Install npm dependencies 34 | run: npm ci 35 | 36 | - name: Build CSS with node-sass 37 | run: | 38 | npx --package node-sass@latest node-sass --version 39 | npx --package node-sass@latest node-sass --include-path=node_modules --output-style expanded --source-map true --source-map-contents true --precision 6 src/scss/ -o dist-sass/css/ 40 | ls -Al dist-sass/css 41 | 42 | # Check that there are no Sass variables (`$`) 43 | - name: Check built CSS files 44 | shell: bash 45 | run: | 46 | SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true) 47 | if [[ -z "$SASS_VARS_FOUND" ]]; then 48 | echo "All good, no Sass variables found!" 49 | exit 0 50 | else 51 | echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:" 52 | echo "$SASS_VARS_FOUND" 53 | exit 1 54 | fi 55 | -------------------------------------------------------------------------------- /src/html/components/docs/introduction.mdx: -------------------------------------------------------------------------------- 1 | ## Quick start 2 | 3 | There are multiple ways to install AdminLTE. 4 | 5 | ### Download & Changelog: 6 | 7 | Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\ 8 | Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\ 9 | Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1). 10 | 11 | ## Stable release 12 | 13 | ### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN: 14 | 15 | _**Important Note**: You needed to add separately cdn links for plugins in your project._ 16 | 17 | ```html 18 | 22 | ``` 23 | 24 | ```html 25 | 30 | ``` 31 | 32 | ### Using The Command Line: 33 | 34 | _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._ 35 | 36 | #### Via npm 37 | 38 | ```bash 39 | npm install admin-lte@4.0.0-rc3 --save 40 | ``` 41 | 42 | #### Via Yarn 43 | 44 | ```bash 45 | yarn add admin-lte@4.0.0-rc3 46 | ``` 47 | 48 | #### Via Composer 49 | 50 | ```bash 51 | composer require "almasaeed2010/adminlte=4.0.0-rc3" 52 | ``` 53 | 54 | #### Via Git 55 | 56 | ```bash 57 | git clone https://github.com/ColorlibHQ/AdminLTE.git 58 | ``` 59 | -------------------------------------------------------------------------------- /src/ts/direct-chat.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------- 3 | * @file AdminLTE direct-chat.ts 4 | * @description Direct chat for AdminLTE. 5 | * @license MIT 6 | * -------------------------------------------- 7 | */ 8 | 9 | import { 10 | onDOMContentLoaded 11 | } from './util/index' 12 | 13 | /** 14 | * Constants 15 | * ==================================================== 16 | */ 17 | 18 | const DATA_KEY = 'lte.direct-chat' 19 | const EVENT_KEY = `.${DATA_KEY}` 20 | const EVENT_EXPANDED = `expanded${EVENT_KEY}` 21 | const EVENT_COLLAPSED = `collapsed${EVENT_KEY}` 22 | 23 | const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="chat-pane"]' 24 | const SELECTOR_DIRECT_CHAT = '.direct-chat' 25 | 26 | const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open' 27 | 28 | /** 29 | * Class Definition 30 | * ==================================================== 31 | */ 32 | 33 | class DirectChat { 34 | _element: HTMLElement 35 | constructor(element: HTMLElement) { 36 | this._element = element 37 | } 38 | 39 | toggle(): void { 40 | if (this._element.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) { 41 | const event = new Event(EVENT_COLLAPSED) 42 | 43 | this._element.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN) 44 | 45 | this._element.dispatchEvent(event) 46 | } else { 47 | const event = new Event(EVENT_EXPANDED) 48 | 49 | this._element.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN) 50 | 51 | this._element.dispatchEvent(event) 52 | } 53 | } 54 | } 55 | 56 | /** 57 | * 58 | * Data Api implementation 59 | * ==================================================== 60 | */ 61 | 62 | onDOMContentLoaded(() => { 63 | const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE) 64 | 65 | button.forEach(btn => { 66 | btn.addEventListener('click', event => { 67 | event.preventDefault() 68 | const target = event.target as HTMLElement 69 | const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined 70 | 71 | if (chatPane) { 72 | const data = new DirectChat(chatPane) 73 | data.toggle() 74 | } 75 | }) 76 | }) 77 | }) 78 | 79 | export default DirectChat 80 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to AdminLTE 2 | 3 | Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4) 4 | 5 | 1. Contribution Requirements : 6 | * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate. 7 | * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license. 8 | * Contributions are only accepted through GitHub pull requests. 9 | * Finally, contributed code must work in all supported browsers (see above for browser support). 10 | 2. Installation : 11 | * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)). 12 | * Clone to your machine 13 | 14 | ```bash 15 | git clone https://github.com/YOUR_USERNAME/AdminLTE.git 16 | ``` 17 | * Create a new branch from `master` 18 | 3. Compile dist files (Development) : 19 | * To compile the dist files you need Node.js 18 or higher/npm (node package manager) 20 | * `npm install` (install npm deps) 21 | * `npm run dev` (developer mode, autocompile with browsersync support for live demo) 22 | * Make your changes only in `./src` Folder OR `package.json` in any files which are necessary for contribution 23 | * Do not make changes in `./dist/**` Because it contains compiled files and do not include in PR (Pull Request) 24 | * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request) 25 | 4. Create a pull request to `master` branch 26 | 27 | ## Online one-click setup for contributing 28 | 29 | You can use [Codespace](https://docs.github.com/en/codespaces) an online IDE which is free for Open Source for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically: 30 | 31 | - clone the `AdminLTE` repo. 32 | - Open with [Codespace](https://docs.github.com/en/codespaces) or [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/) 33 | - install the dependencies. 34 | - run `npm run dev` to start the server. 35 | -------------------------------------------------------------------------------- /src/html/components/docs/how-to-contribute.mdx: -------------------------------------------------------------------------------- 1 | # Contributing to AdminLTE 2 | 3 | Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4) 4 | 5 | 1. Contribution Requirements : 6 | * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate. 7 | * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license. 8 | * Contributions are only accepted through GitHub pull requests. 9 | * Finally, contributed code must work in all supported browsers (see above for browser support). 10 | 2. Installation : 11 | * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)). 12 | * Clone to your machine 13 | 14 | ```bash 15 | git clone https://github.com/YOUR_USERNAME/AdminLTE.git 16 | ``` 17 | * Create a new branch from `master` 18 | 3. Compile dist files (Development) : 19 | * To compile the dist files you need Node.js 18 or higher/npm (node package manager) 20 | * `npm install` (install npm deps) 21 | * `npm run dev` (developer mode, autocompile with browsersync support for live demo) 22 | * Make your changes only in `./src` Folder OR `package.json` in any files which are necessary for contribution 23 | * Do not make changes in `./dist/**` Because it contains compiled files and do not include in PR (Pull Request) 24 | * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request) 25 | 4. Create a pull request to `master` branch 26 | 27 | ## Online one-click setup for contributing 28 | 29 | You can use [Codespace](https://docs.github.com/en/codespaces) an online IDE which is free for Open Source for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically: 30 | 31 | - clone the `AdminLTE` repo. 32 | - Open with [Codespace](https://docs.github.com/en/codespaces) or [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/) 33 | - install the dependencies. 34 | - run `npm run dev` to start the server. 35 | -------------------------------------------------------------------------------- /src/html/components/_scripts.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // Smart path resolution: calculate relative path based on directory depth 3 | const pathname = Astro.url.pathname; 4 | // Only count directories, not the filename itself 5 | const pathSegments = pathname.split('/').filter(segment => segment !== ''); 6 | const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0; 7 | const deploymentPath = depth === 0 ? './' : '../'.repeat(depth); 8 | const adminlteJsUrl = deploymentPath + "js/adminlte.js"; 9 | --- 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/scss/pages/_login_and_register.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Pages: Login & Register 3 | // 4 | 5 | .login-logo, 6 | .register-logo { 7 | margin-bottom: .9rem; 8 | font-size: 2.1rem; 9 | font-weight: 300; 10 | text-align: center; 11 | 12 | a { 13 | color: var(--#{$prefix}secondary-color); 14 | text-decoration: none; 15 | } 16 | } 17 | 18 | .login-page, 19 | .register-page { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | min-height: 100vh; 25 | } 26 | 27 | .login-box, 28 | .register-box { 29 | width: 360px; 30 | 31 | @media (max-width: map-get($grid-breakpoints, sm)) { 32 | width: 90%; 33 | margin-top: .5rem; 34 | } 35 | 36 | .card { 37 | margin-bottom: 0; 38 | } 39 | } 40 | 41 | .login-card-body, 42 | .register-card-body { 43 | padding: 20px; 44 | color: var(--#{$prefix}secondary-color); 45 | background-color: var(--#{$prefix}body-bg); 46 | border-top: 0; 47 | 48 | .input-group { 49 | .form-control { 50 | &:focus { 51 | box-shadow: none; 52 | 53 | ~ .input-group-prepend .input-group-text, 54 | ~ .input-group-append .input-group-text { 55 | border-color: $input-focus-border-color; 56 | } 57 | } 58 | 59 | &.is-valid { 60 | &:focus { 61 | box-shadow: none; 62 | } 63 | 64 | ~ .input-group-prepend .input-group-text, 65 | ~ .input-group-append .input-group-text { 66 | border-color: $success; 67 | } 68 | } 69 | 70 | &.is-invalid { 71 | &:focus { 72 | box-shadow: none; 73 | } 74 | 75 | ~ .input-group-append .input-group-text { 76 | border-color: $danger; 77 | } 78 | } 79 | } 80 | 81 | .input-group-text { 82 | color: var(--#{$prefix}secondary-color); 83 | background-color: transparent; 84 | @include border-top-end-radius($border-radius); 85 | @include border-bottom-end-radius($border-radius); 86 | @include transition($input-transition); 87 | } 88 | } 89 | } 90 | 91 | .login-box-msg, 92 | .register-box-msg { 93 | padding: 0 20px 20px; 94 | margin: 0; 95 | text-align: center; 96 | } 97 | 98 | .social-auth-links { 99 | margin: 10px 0; 100 | } 101 | -------------------------------------------------------------------------------- /src/html/pages/docs/faq.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Faq from "@components/docs/faq.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "FAQ | AdminLTE 4" 10 | const path = "../../../dist" 11 | const mainPage = "docs" 12 | const page = "faq"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

FAQ

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | FAQ 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/license.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import License from "@components/docs/license.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "License | AdminLTE 4" 10 | const path = "../../../dist" 11 | const mainPage = "docs" 12 | const page = "license"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

License

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | License 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/introduction.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | import Introduction from "@components/docs/introduction.mdx" 8 | 9 | const title = "Introduction | AdminLTE 4" 10 | const path = "../../../dist" 11 | const mainPage = "docs" 12 | const page = "introduction"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Introduction

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | Introduction 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/javascript/pushmenu.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Pushmenu from "@components/javascript/pushmenu.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "Pushmenu Plugin | AdminLTE 4" 10 | const path = "../../../../dist" 11 | const mainPage = "javascript" 12 | const page = "pushmenu"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Pushmenu Plugin

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | Pushmenu Plugin 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /src/scss/mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins: Animation 3 | // 4 | 5 | 6 | @keyframes flipInX { 7 | 0% { 8 | opacity: 0; 9 | transition-timing-function: ease-in; 10 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 11 | } 12 | 13 | 40% { 14 | transition-timing-function: ease-in; 15 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 16 | } 17 | 18 | 60% { 19 | opacity: 1; 20 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 21 | } 22 | 23 | 80% { 24 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 25 | } 26 | 27 | 100% { 28 | transform: perspective(400px); 29 | } 30 | } 31 | 32 | @keyframes fadeIn { 33 | from { 34 | opacity: 0; 35 | } 36 | 37 | to { 38 | opacity: 1; 39 | } 40 | } 41 | 42 | @keyframes fadeOut { 43 | from { 44 | opacity: 1; 45 | } 46 | 47 | to { 48 | opacity: 0; 49 | } 50 | } 51 | 52 | @keyframes shake { 53 | 0% { 54 | transform: translate(2px, 1px) rotate(0deg); 55 | } 56 | 10% { 57 | transform: translate(-1px, -2px) rotate(-2deg); 58 | } 59 | 20% { 60 | transform: translate(-3px, 0) rotate(3deg); 61 | } 62 | 30% { 63 | transform: translate(0, 2px) rotate(0deg); 64 | } 65 | 40% { 66 | transform: translate(1px, -1px) rotate(1deg); 67 | } 68 | 50% { 69 | transform: translate(-1px, 2px) rotate(-1deg); 70 | } 71 | 60% { 72 | transform: translate(-3px, 1px) rotate(0deg); 73 | } 74 | 70% { 75 | transform: translate(2px, 1px) rotate(-2deg); 76 | } 77 | 80% { 78 | transform: translate(-1px, -1px) rotate(4deg); 79 | } 80 | 90% { 81 | transform: translate(2px, 2px) rotate(0deg); 82 | } 83 | 100% { 84 | transform: translate(1px, -2px) rotate(-1deg); 85 | } 86 | } 87 | 88 | @keyframes wobble { 89 | 0% { 90 | transform: none; 91 | } 92 | 93 | 15% { 94 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 95 | } 96 | 97 | 30% { 98 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 99 | } 100 | 101 | 45% { 102 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 103 | } 104 | 105 | 60% { 106 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 107 | } 108 | 109 | 75% { 110 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 111 | } 112 | 113 | 100% { 114 | transform: none; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/html/pages/docs/javascript/treeview.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Treeview from "@components/javascript/treeview.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "Treeview Plugin | AdminLTE 4" 10 | const path = "../../../../dist" 11 | const mainPage = "javascript" 12 | const page = "treeview"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Treeview Plugin

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | Treeview Plugin 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/browser-support.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import BrowserSupport from "@components/docs/browser-support.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "Browser Support | AdminLTE 4" 10 | const path = "../../../dist" 11 | const mainPage = "docs" 12 | const page = "browser-support"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Browser Support

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | Browser Support 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/how-to-contribute.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import HowToContribute from "@components/docs/how-to-contribute.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "How To Contribute | AdminLTE 4" 10 | const path = "../../../dist" 11 | const mainPage = "docs" 12 | const page = "how-to-contribute"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

How To Contribute

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | How To Contribute 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/docs/components/main-sidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import MainSidebar from "@components/docs/components/main-sidebar.mdx" 6 | import Sidenav from "@components/dashboard/_sidenav.astro" 7 | import Scripts from "@components/_scripts.astro" 8 | 9 | const title = "Main Sidebar Component | AdminLTE 4" 10 | const path = "../../../../dist" 11 | const mainPage = "components" 12 | const page = "main-sidebar"; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Main Sidebar Component

38 |
39 |
40 |
    41 |
  1. Docs
    2. 42 |
  2. 43 | Main Sidebar Component 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/html/pages/examples/lockscreen.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Scripts from "@components/_scripts.astro" 4 | 5 | const title = "AdminLTE 4 | Lockscreen" 6 | const path = "../../../dist" 7 | const htmlPath = ".." 8 | const year = new Date().getFullYear(); 9 | 10 | // Smart path resolution: calculate relative path based on directory depth 11 | const pathname = Astro.url.pathname; 12 | const pathSegments = pathname.split('/').filter(segment => segment !== ''); 13 | const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0; 14 | const deploymentPath = depth === 0 ? './' : '../'.repeat(depth); 15 | --- 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 30 | 31 |
John Doe
32 | 33 |
34 |
35 | User Image 36 |
37 | 38 |
39 |
40 | 45 |
46 | 49 |
50 |
51 |
52 |
53 | 54 |
55 | Enter your password to retrieve your session 56 |
57 |
58 | Or sign in as a different user 59 |
60 |
61 | Copyright © 2014-{year}   62 | AdminLTE.io
63 | All rights reserved 64 |
65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import globals from 'globals' 2 | import pluginJs from '@eslint/js' 3 | import tseslint from 'typescript-eslint' 4 | import pluginUnicorn from 'eslint-plugin-unicorn' 5 | import astroPlugin from 'eslint-plugin-astro' 6 | 7 | export default [ 8 | { 9 | ignores: [ 10 | "dist/", 11 | "node_modules/", 12 | ".cache/", 13 | ".astro/", 14 | "**/*.min.js", 15 | "**/plugins/", 16 | "/.temp/", 17 | "src/html/docs/", 18 | "docs_html/", 19 | "src/html/public/" 20 | ] 21 | }, 22 | ...tseslint.config( 23 | pluginJs.configs.recommended, 24 | ...tseslint.configs.recommended 25 | ), 26 | { 27 | ...pluginUnicorn.configs['flat/recommended'] 28 | }, 29 | ...astroPlugin.configs['flat/recommended'], 30 | { 31 | files: ['**/*.{js,mjs,cjs,ts,mts,cts,astro}'], 32 | languageOptions: { 33 | globals: { 34 | ...globals.browser, 35 | ...globals.node 36 | } 37 | }, 38 | rules: { 39 | 'arrow-body-style': 'off', 40 | 'capitalized-comments': 'off', 41 | 'comma-dangle': ['error', 'never'], 42 | 'indent': ['error', 2, { 'MemberExpression': 'off', 'SwitchCase': 1 }], 43 | 'max-params': ['warn', 5], 44 | 'multiline-ternary': ['error', 'always-multiline'], 45 | 'new-cap': 'off', 46 | 'no-console': 'off', 47 | 'no-negated-condition': 'off', 48 | 'object-curly-spacing': ['error', 'always'], 49 | 'operator-linebreak': ['error', 'after'], 50 | 'no-unused-vars': 'warn', 51 | 'no-new': 'off', 52 | 'semi': 'off', 53 | 'unicorn/explicit-length-check': 'off', 54 | 'unicorn/no-array-callback-reference': 'off', 55 | 'unicorn/no-array-for-each': 'off', 56 | 'unicorn/no-array-method-this-argument': 'off', 57 | 'unicorn/no-null': 'off', 58 | 'unicorn/no-unused-properties': 'off', 59 | 'unicorn/prefer-array-flat': 'off', 60 | 'unicorn/prefer-dom-node-dataset': 'off', 61 | 'unicorn/prefer-export-from': 'off', 62 | 'unicorn/prefer-module': 'off', 63 | 'unicorn/prefer-query-selector': 'off', 64 | 'unicorn/prefer-spread': 'off', 65 | 'unicorn/prefer-string-replace-all': 'off', 66 | 'unicorn/prevent-abbreviations': 'off', 67 | 'astro/no-set-html-directive': 'off' 68 | } 69 | }, 70 | { 71 | files: ['src/config/**'], 72 | languageOptions: { 73 | globals: { 74 | ...globals.node 75 | } 76 | }, 77 | rules: { 78 | 'no-console': 'off', 79 | 'unicorn/prefer-top-level-await': 'off' 80 | } 81 | } 82 | ] -------------------------------------------------------------------------------- /src/scss/adminlte.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * AdminLTE v4.0.0-rc5 3 | * Author: Colorlib 4 | * Website: AdminLTE.io 5 | * License: Open source - MIT 6 | */ 7 | 8 | // Bootstrap Configuration 9 | // --------------------------------------------------- 10 | @import "bootstrap/scss/functions"; 11 | 12 | // AdminLTE Configuration 13 | // --------------------------------------------------- 14 | @import "bootstrap-variables"; // little modified are here 15 | 16 | // Bootstrap Configuration 17 | // --------------------------------------------------- 18 | @import "bootstrap/scss/variables"; 19 | @import "bootstrap/scss/variables-dark"; 20 | @import "bootstrap/scss/maps"; 21 | @import "bootstrap/scss/mixins"; 22 | @import "bootstrap/scss/utilities"; 23 | 24 | // Bootstrap Layout & components 25 | @import "bootstrap/scss/root"; 26 | @import "bootstrap/scss/reboot"; 27 | @import "bootstrap/scss/type"; 28 | @import "bootstrap/scss/images"; 29 | @import "bootstrap/scss/containers"; 30 | @import "bootstrap/scss/grid"; 31 | @import "bootstrap/scss/tables"; 32 | @import "bootstrap/scss/forms"; 33 | @import "bootstrap/scss/buttons"; 34 | @import "bootstrap/scss/transitions"; 35 | @import "bootstrap/scss/dropdown"; 36 | @import "bootstrap/scss/button-group"; 37 | @import "bootstrap/scss/nav"; 38 | @import "bootstrap/scss/navbar"; 39 | @import "bootstrap/scss/card"; 40 | @import "bootstrap/scss/accordion"; 41 | @import "bootstrap/scss/breadcrumb"; 42 | @import "bootstrap/scss/pagination"; 43 | @import "bootstrap/scss/badge"; 44 | @import "bootstrap/scss/alert"; 45 | @import "bootstrap/scss/progress"; 46 | @import "bootstrap/scss/list-group"; 47 | @import "bootstrap/scss/close"; 48 | @import "bootstrap/scss/toasts"; 49 | @import "bootstrap/scss/modal"; 50 | @import "bootstrap/scss/tooltip"; 51 | @import "bootstrap/scss/popover"; 52 | @import "bootstrap/scss/carousel"; 53 | @import "bootstrap/scss/spinners"; 54 | @import "bootstrap/scss/offcanvas"; 55 | @import "bootstrap/scss/placeholders"; 56 | 57 | // Bootstrap Helpers 58 | @import "bootstrap/scss/helpers"; 59 | 60 | // Bootstrap Utilities 61 | @import "bootstrap/scss/utilities/api"; 62 | 63 | // AdminLTE Configuration 64 | // --------------------------------------------------- 65 | @import "variables"; 66 | @import "variables-dark"; 67 | @import "mixins"; 68 | 69 | // AdiminLTE Parts 70 | // --------------------------------------------------- 71 | @import "parts/core"; 72 | @import "parts/components"; 73 | @import "parts/extra-components"; 74 | @import "parts/pages"; 75 | @import "parts/miscellaneous"; 76 | 77 | // AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance 78 | @import "accessibility"; 79 | -------------------------------------------------------------------------------- /src/scss/_small-box.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Small Box 3 | // 4 | 5 | .small-box { 6 | @include border-radius($border-radius); 7 | @include box-shadow($lte-card-shadow); 8 | position: relative; 9 | display: block; 10 | margin-bottom: 1.25rem; 11 | --bs-link-color-rgb: none; 12 | --bs-link-hover-color-rgb: none; 13 | --bs-heading-color: none; 14 | 15 | // content wrapper 16 | > .inner { 17 | padding: 10px; 18 | } 19 | 20 | > .small-box-footer { 21 | position: relative; 22 | z-index: 10; 23 | display: block; 24 | padding: 3px 0; 25 | text-align: center; 26 | background-color: rgba($black, .07); 27 | 28 | &:hover { 29 | background-color: rgba($black, .1); 30 | } 31 | } 32 | 33 | h3 { 34 | @include font-size(2.2rem); 35 | padding: 0; 36 | margin: 0 0 10px; 37 | font-weight: 700; 38 | white-space: nowrap; 39 | } 40 | 41 | @include media-breakpoint-up(lg) { 42 | .col-xl-2 &, 43 | .col-lg-2 &, 44 | .col-md-2 & { 45 | h3 { 46 | @include font-size(1.6rem); 47 | } 48 | } 49 | 50 | .col-xl-3 &, 51 | .col-lg-3 &, 52 | .col-md-3 & { 53 | h3 { 54 | @include font-size(1.6rem); 55 | } 56 | } 57 | } 58 | 59 | @include media-breakpoint-up(xl) { 60 | .col-xl-2 &, 61 | .col-lg-2 &, 62 | .col-md-2 & { 63 | h3 { 64 | @include font-size(2.2rem); 65 | } 66 | } 67 | 68 | .col-xl-3 &, 69 | .col-lg-3 &, 70 | .col-md-3 & { 71 | h3 { 72 | @include font-size(2.2rem); 73 | } 74 | } 75 | } 76 | 77 | p { 78 | font-size: 1rem; 79 | 80 | > small { 81 | display: block; 82 | margin-top: 5px; 83 | font-size: .9rem; 84 | color: $gray-100; 85 | } 86 | } 87 | 88 | h3, 89 | p { 90 | z-index: 5; 91 | } 92 | 93 | // the icon 94 | .small-box-icon { 95 | position: absolute; 96 | top: 15px; 97 | right: 15px; 98 | z-index: 0; 99 | height: 70px; 100 | font-size: 70px; 101 | color: rgba($black, .15); 102 | @include transition(transform $lte-transition-speed linear); 103 | } 104 | 105 | // Small box hover state 106 | &:hover { 107 | // Animate icons on small box hover 108 | .small-box-icon { 109 | transform: scale(1.1); 110 | } 111 | } 112 | } 113 | 114 | @include media-breakpoint-down(sm) { 115 | // No need for icons on very small devices 116 | .small-box { 117 | text-align: center; 118 | 119 | .small-box-icon { 120 | display: none; 121 | } 122 | 123 | p { 124 | font-size: 12px; 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/scss/_info-box.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Info Box 3 | // 4 | 5 | .info-box { 6 | @include box-shadow($lte-card-shadow); 7 | @include border-radius($border-radius); 8 | 9 | position: relative; 10 | display: flex; 11 | width: 100%; 12 | min-height: 80px; 13 | padding: .5rem; 14 | margin-bottom: map-get($spacers, 3); 15 | color: var(--#{$prefix}body-color); 16 | background-color: var(--#{$prefix}body-bg); 17 | 18 | .progress { 19 | height: 2px; 20 | margin: 5px 0; 21 | background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125); 22 | 23 | .progress-bar { 24 | background-color: var(--#{$lte-prefix}card-variant-color); 25 | } 26 | } 27 | 28 | .info-box-icon { 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | width: 70px; 33 | font-size: 1.875rem; 34 | text-align: center; 35 | @include border-radius($border-radius); 36 | 37 | > img { 38 | max-width: 100%; 39 | } 40 | } 41 | 42 | .info-box-content { 43 | display: flex; 44 | flex: 1; 45 | flex-direction: column; 46 | justify-content: center; 47 | padding: 0 10px; 48 | line-height: 1.8; 49 | } 50 | 51 | .info-box-number { 52 | display: block; 53 | margin-top: .25rem; 54 | font-weight: $font-weight-bold; 55 | } 56 | 57 | .progress-description, 58 | .info-box-text { 59 | display: block; 60 | overflow: hidden; 61 | text-overflow: ellipsis; 62 | white-space: nowrap; 63 | } 64 | 65 | .info-box-more { 66 | display: block; 67 | } 68 | 69 | .progress-description { 70 | margin: 0; 71 | 72 | } 73 | 74 | @include media-breakpoint-up(md) { 75 | .col-xl-2 &, 76 | .col-lg-2 &, 77 | .col-md-2 & { 78 | .progress-description { 79 | display: none; 80 | } 81 | } 82 | 83 | .col-xl-3 &, 84 | .col-lg-3 &, 85 | .col-md-3 & { 86 | .progress-description { 87 | display: none; 88 | } 89 | } 90 | } 91 | 92 | @include media-breakpoint-up(lg) { 93 | .col-xl-2 &, 94 | .col-lg-2 &, 95 | .col-md-2 & { 96 | .progress-description { 97 | @include font-size(.75rem); 98 | display: block; 99 | } 100 | } 101 | 102 | .col-xl-3 &, 103 | .col-lg-3 &, 104 | .col-md-3 & { 105 | .progress-description { 106 | @include font-size(.75rem); 107 | display: block; 108 | } 109 | } 110 | } 111 | 112 | @include media-breakpoint-up(xl) { 113 | .col-xl-2 &, 114 | .col-lg-2 &, 115 | .col-md-2 & { 116 | .progress-description { 117 | @include font-size(1rem); 118 | display: block; 119 | } 120 | } 121 | 122 | .col-xl-3 &, 123 | .col-lg-3 &, 124 | .col-md-3 & { 125 | .progress-description { 126 | @include font-size(1rem); 127 | display: block; 128 | } 129 | } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/html/components/_head.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { title, isRtl } = Astro.props 3 | const cssPath = isRtl ? ".rtl" : ""; 4 | 5 | // Smart path resolution: calculate relative path based on directory depth 6 | const pathname = Astro.url.pathname; 7 | // Only count directories, not the filename itself 8 | const pathSegments = pathname.split('/').filter(segment => segment !== ''); 9 | const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0; 10 | const deploymentPath = depth === 0 ? './' : '../'.repeat(depth); 11 | --- 12 | 13 | 14 | {title} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 51 | 52 | 53 | 54 | 59 | 60 | 61 | 62 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /src/scss/_timeline.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Timeline 3 | // 4 | 5 | .timeline { 6 | position: relative; 7 | padding: 0; 8 | margin: 0 0 45px; 9 | // The line 10 | &::before { 11 | @include border-radius($border-radius); 12 | position: absolute; 13 | top: 0; 14 | bottom: 0; 15 | left: 31px; 16 | width: 4px; 17 | margin: 0; 18 | content: ""; 19 | background-color: var(--#{$prefix}border-color); 20 | } 21 | // Element 22 | > div { 23 | &::before, 24 | &::after { 25 | display: table; 26 | content: ""; 27 | } 28 | 29 | position: relative; 30 | margin-right: 10px; 31 | margin-bottom: 15px; 32 | // The content 33 | > .timeline-item { 34 | @include box-shadow($lte-card-shadow); 35 | @include border-radius($border-radius); 36 | position: relative; 37 | padding: 0; 38 | margin-top: 0; 39 | margin-right: 15px; 40 | margin-left: 60px; 41 | color: var(--#{$prefix}body-color); 42 | background-color: var(--#{$prefix}body-bg); 43 | // The time and header 44 | > .time { 45 | float: right; 46 | padding: 10px; 47 | font-size: 12px; 48 | color: var(--#{$prefix}secondary-color); 49 | } 50 | // Header 51 | > .timeline-header { 52 | padding: 10px; 53 | margin: 0; 54 | font-size: 16px; 55 | line-height: 1.1; 56 | color: var(--#{$prefix}secondary-color); 57 | border-bottom: 1px solid var(--#{$prefix}border-color); 58 | // Link in header 59 | > a { 60 | font-weight: 600; 61 | text-decoration: none; 62 | } 63 | } 64 | // Item body and footer 65 | > .timeline-body, 66 | > .timeline-footer { 67 | padding: 10px; 68 | } 69 | 70 | > .timeline-body { 71 | > img { 72 | margin: 10px; 73 | } 74 | > dl, 75 | ol, 76 | ul { 77 | margin: 0; 78 | } 79 | } 80 | 81 | 82 | } 83 | 84 | .timeline-icon { 85 | position: absolute; 86 | top: 0; 87 | left: 18px; 88 | width: 30px; 89 | height: 30px; 90 | font-size: 16px; 91 | line-height: 30px; 92 | text-align: center; 93 | background-color: var(--#{$prefix}secondary-bg); 94 | border-radius: 50%; // stylelint-disable-line property-disallowed-list 95 | } 96 | } 97 | // Time label 98 | > .time-label { 99 | > span { 100 | @include border-radius(4px); 101 | display: inline-block; 102 | padding: 5px; 103 | font-weight: 600; 104 | background-color: var(--#{$prefix}body-bg); 105 | } 106 | } 107 | } 108 | 109 | .timeline-inverse { 110 | > div { 111 | > .timeline-item { 112 | @include box-shadow(none); 113 | background-color: var(--#{$prefix}tertiary-bg); 114 | border: 1px solid var(--#{$prefix}border-color); 115 | 116 | > .timeline-header { 117 | border-bottom-color: var(--#{$prefix}border-color); 118 | } 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:import/errors", 5 | "plugin:import/warnings", 6 | "plugin:unicorn/recommended", 7 | "xo", 8 | "xo/browser" 9 | ], 10 | "rules": { 11 | "arrow-body-style": "off", 12 | "capitalized-comments": "off", 13 | "comma-dangle": [ 14 | "error", 15 | "never" 16 | ], 17 | "indent": [ 18 | "error", 19 | 2, 20 | { 21 | "MemberExpression": "off", 22 | "SwitchCase": 1 23 | } 24 | ], 25 | "max-params": [ 26 | "warn", 27 | 5 28 | ], 29 | "multiline-ternary": [ 30 | "error", 31 | "always-multiline" 32 | ], 33 | "new-cap": [ 34 | "error", 35 | { 36 | "properties": false 37 | } 38 | ], 39 | "no-console": "error", 40 | "no-negated-condition": "off", 41 | "object-curly-spacing": [ 42 | "error", 43 | "always" 44 | ], 45 | "operator-linebreak": [ 46 | "error", 47 | "after" 48 | ], 49 | "semi": [ 50 | "error", 51 | "never" 52 | ], 53 | "unicorn/explicit-length-check": "off", 54 | "unicorn/no-array-callback-reference": "off", 55 | "unicorn/no-array-for-each": "off", 56 | "unicorn/no-array-method-this-argument": "off", 57 | "unicorn/no-null": "off", 58 | "unicorn/no-unused-properties": "error", 59 | "unicorn/prefer-array-flat": "off", 60 | "unicorn/prefer-dom-node-dataset": "off", 61 | "unicorn/prefer-export-from": "off", 62 | "unicorn/prefer-module": "off", 63 | "unicorn/prefer-query-selector": "off", 64 | "unicorn/prefer-spread": "off", 65 | "unicorn/prefer-string-replace-all": "off", 66 | "unicorn/prevent-abbreviations": "off" 67 | }, 68 | "overrides": [ 69 | { 70 | "files": ["*.ts", "*.tsx"], 71 | "extends": [ 72 | "plugin:import/typescript", 73 | "xo-typescript" 74 | ], 75 | "rules": { 76 | "@typescript-eslint/comma-dangle": [ 77 | "error", 78 | "never" 79 | ], 80 | "@typescript-eslint/indent": [ 81 | "error", 82 | 2, 83 | { 84 | "MemberExpression": "off", 85 | "SwitchCase": 1 86 | } 87 | ], 88 | "@typescript-eslint/naming-convention": [ 89 | "error", 90 | { 91 | "selector": "variable", 92 | "format": ["camelCase", "StrictPascalCase", "UPPER_CASE"] 93 | } 94 | ], 95 | "@typescript-eslint/object-curly-spacing": [ 96 | "error", 97 | "always" 98 | ], 99 | "@typescript-eslint/semi": [ 100 | "error", 101 | "never" 102 | ] 103 | } 104 | }, 105 | { 106 | "files": ["src/config/**"], 107 | "env": { 108 | "browser": false, 109 | "node": true 110 | }, 111 | "parserOptions": { 112 | "sourceType": "module" 113 | }, 114 | "rules": { 115 | "no-console": "off", 116 | "unicorn/prefer-top-level-await": "off" 117 | } 118 | } 119 | ] 120 | } 121 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | - Using welcoming and inclusive language 12 | - Being respectful of differing viewpoints and experiences 13 | - Gracefully accepting constructive criticism 14 | - Focusing on what is best for the community 15 | - Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | - Trolling, insulting/derogatory comments, and personal or political attacks 21 | - Public or private harassment 22 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | - Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at https://colorlib.com/wp/contact-us/. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at 44 | -------------------------------------------------------------------------------- /src/ts/fullscreen.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * -------------------------------------------- 3 | * @file AdminLTE fullscreen.ts 4 | * @description Fullscreen plugin for AdminLTE. 5 | * @license MIT 6 | * -------------------------------------------- 7 | */ 8 | 9 | import { 10 | onDOMContentLoaded 11 | } from './util/index' 12 | 13 | /** 14 | * Constants 15 | * ============================================================================ 16 | */ 17 | const DATA_KEY = 'lte.fullscreen' 18 | const EVENT_KEY = `.${DATA_KEY}` 19 | const EVENT_MAXIMIZED = `maximized${EVENT_KEY}` 20 | const EVENT_MINIMIZED = `minimized${EVENT_KEY}` 21 | 22 | const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]' 23 | const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]' 24 | const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]' 25 | 26 | /** 27 | * Class Definition. 28 | * ============================================================================ 29 | */ 30 | class FullScreen { 31 | _element: HTMLElement 32 | _config: undefined 33 | 34 | constructor(element: HTMLElement, config?: undefined) { 35 | this._element = element 36 | this._config = config 37 | } 38 | 39 | inFullScreen(): void { 40 | const event = new Event(EVENT_MAXIMIZED) 41 | 42 | const iconMaximize = document.querySelector(SELECTOR_MAXIMIZE_ICON) 43 | const iconMinimize = document.querySelector(SELECTOR_MINIMIZE_ICON) 44 | 45 | void document.documentElement.requestFullscreen() 46 | 47 | if (iconMaximize) { 48 | iconMaximize.style.display = 'none' 49 | } 50 | 51 | if (iconMinimize) { 52 | iconMinimize.style.display = 'block' 53 | } 54 | 55 | this._element.dispatchEvent(event) 56 | } 57 | 58 | outFullscreen(): void { 59 | const event = new Event(EVENT_MINIMIZED) 60 | 61 | const iconMaximize = document.querySelector(SELECTOR_MAXIMIZE_ICON) 62 | const iconMinimize = document.querySelector(SELECTOR_MINIMIZE_ICON) 63 | 64 | void document.exitFullscreen() 65 | 66 | if (iconMaximize) { 67 | iconMaximize.style.display = 'block' 68 | } 69 | 70 | if (iconMinimize) { 71 | iconMinimize.style.display = 'none' 72 | } 73 | 74 | this._element.dispatchEvent(event) 75 | } 76 | 77 | toggleFullScreen(): void { 78 | if (document.fullscreenEnabled) { 79 | if (document.fullscreenElement) { 80 | this.outFullscreen() 81 | } else { 82 | this.inFullScreen() 83 | } 84 | } 85 | } 86 | } 87 | 88 | /** 89 | * Data Api implementation 90 | * ============================================================================ 91 | */ 92 | onDOMContentLoaded(() => { 93 | const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE) 94 | 95 | buttons.forEach(btn => { 96 | btn.addEventListener('click', event => { 97 | event.preventDefault() 98 | 99 | const target = event.target as HTMLElement 100 | const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined 101 | 102 | if (button) { 103 | const data = new FullScreen(button, undefined) 104 | data.toggleFullScreen() 105 | } 106 | }) 107 | }) 108 | }) 109 | 110 | export default FullScreen 111 | -------------------------------------------------------------------------------- /src/html/pages/UI/icons.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Icons" 9 | const path = "../../../dist" 10 | const mainPage = "ui-elements" 11 | const page = "icons"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Icons

37 |
38 |
39 |
    40 |
  1. Home
    2. 41 |
  2. 42 | Icons 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 |

Icons

64 |
65 |
66 |

You can use any font library you like with AdminLTE 4.

67 | Recommendations 68 | 73 |
74 |
75 |
76 |
77 | 78 |
79 | 80 |
81 | 82 |
83 | 84 |
85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /src/html/pages/examples/login.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Scripts from "@components/_scripts.astro" 4 | 5 | const title = "AdminLTE 4 | Login Page" 6 | const path = "../../../dist" 7 | const htmlPath = ".."; 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /src/html/pages/examples/register.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Scripts from "@components/_scripts.astro" 4 | 5 | const title = "AdminLTE 4 | Register Page" 6 | const path = "../../../dist" 7 | const htmlPath = ".."; 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 23 | 24 |
25 |
26 |

Register a new membership

27 | 28 |
29 |
30 | 31 |
32 | 33 |
34 |
35 |
36 | 37 |
38 | 39 |
40 |
41 |
42 | 47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 | 61 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 | 75 |
76 | 77 | 86 | 87 | 88 |

89 | 90 | I already have a membership 91 | 92 |

93 |
94 | 95 |
96 |
97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/html/pages/layout/fixed-footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Fixed Footer" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "fixed-footer"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Fixed Footer

37 |
38 |
39 |
    40 |
  1. Home
    2. 41 |
  2. 42 | Fixed Footer 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |

Title

63 | 64 |
65 | 74 | 82 |
83 |
84 |
85 | Start creating your amazing application! 86 |
87 | 88 |
Footer
89 | 90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/html/pages/layout/fixed-header.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Fixed Header" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "fixed-header"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Fixed Header

37 |
38 |
39 |
    40 |
  1. Home
    2. 41 |
  2. 42 | Fixed Header 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |

Title

63 | 64 |
65 | 74 | 82 |
83 |
84 |
85 | Start creating your amazing application! 86 |
87 | 88 |
Footer
89 | 90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/html/pages/layout/unfixed-sidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Unfixed Sidebar" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "unfixed-sidebar"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Unfixed Layout

37 |
38 |
39 |
    40 |
  1. Home
    2. 41 |
  2. 42 | Unfixed Layout 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |

Title

63 | 64 |
65 | 74 | 82 |
83 |
84 |
85 | Start creating your amazing application! 86 |
87 | 88 |
Footer
89 | 90 |
91 | 92 |
93 |
94 | 95 |
96 |
97 | 98 |
99 | 100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/html/pages/examples/login-v2.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Scripts from "@components/_scripts.astro" 4 | 5 | const title = "AdminLTE 4 | Login Page v2" 6 | const path = "../../../dist" 7 | const htmlPath = ".."; 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /src/html/pages/layout/fixed-sidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Fixed Sidebar" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "fixed-sidebar"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Fixed Layout

38 |
39 |
40 |
    41 |
  1. Home
    2. 42 |
  2. 43 | Fixed Layout 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

Title

64 | 65 |
66 | 75 | 83 |
84 |
85 |
86 | Start creating your amazing application! 87 |
88 | 89 |
Footer
90 | 91 |
92 | 93 |
94 |
95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /src/html/pages/layout/sidebar-mini.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Sidebar Mini" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "sidebar-mini"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Sidebar Mini

37 |
38 |
39 |
    40 |
  1. Home
    2. 41 |
  2. 42 | Sidebar Mini 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |

Title

63 | 64 |
65 | 74 | 82 |
83 |
84 |
85 | Start creating your amazing application! 86 |
87 | 88 |
Footer
89 | 90 |
91 | 92 |
93 |
94 | 95 |
96 | 97 |
98 | 99 |
100 | 101 |
102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /src/html/pages/layout/layout-rtl.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Layout RTL" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "layout-rtl" 12 | const isRtl = true; 13 | --- 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Layout RTL

38 |
39 |
40 |
    41 |
  1. Home
    2. 42 |
  2. 43 | Layout RTL 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

Title

64 | 65 |
66 | 75 | 83 |
84 |
85 |
86 | Start creating your amazing application! 87 |
88 | 89 |
Footer
90 | 91 |
92 | 93 |
94 |
95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /src/html/pages/layout/fixed-complete.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Fixed Complete" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "fixed-complete"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 |
37 |

Fixed Complete

38 |
39 |
40 |
    41 |
  1. Home
    2. 42 |
  2. 43 | Fixed Complete 44 |
    3. 45 |
46 |
47 |
48 | 49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

Title

64 | 65 |
66 | 75 | 83 |
84 |
85 |
86 | Start creating your amazing application! 87 |
88 | 89 |
Footer
90 | 91 |
92 | 93 |
94 |
95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /src/html/pages/layout/collapsed-sidebar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Sidebar Mini" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "collapsed-sidebar"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 |
38 |

Collapsed Sidebar

39 |
40 |
41 |
    42 |
  1. Home
    2. 43 |
  2. 44 | Collapsed Sidebar 45 |
    3. 46 |
47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 | 57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 |

Title

65 | 66 |
67 | 76 | 84 |
85 |
86 |
87 | Start creating your amazing application! 88 |
89 | 90 |
Footer
91 | 92 |
93 | 94 |
95 |
96 | 97 |
98 | 99 |
100 | 101 |
102 | 103 |
104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting Security Issues 4 | 5 | If you discover a security vulnerability in AdminLTE, please report it by emailing the maintainers or opening a private security advisory on GitHub. We take security seriously and will respond promptly. 6 | 7 | ## Supported Versions 8 | 9 | | Version | Supported | 10 | | ------- | ------------------ | 11 | | 4.x | :white_check_mark: | 12 | | 3.x | :x: | 13 | | < 3.0 | :x: | 14 | 15 | ## Security Best Practices 16 | 17 | AdminLTE is a frontend admin dashboard template. When deploying applications built with AdminLTE, follow these security best practices: 18 | 19 | ### 1. Production Deployment 20 | 21 | - **Never expose `node_modules` directory** in production environments 22 | - **Remove demo/example files** (like `index2.html`, `index3.html`) from production builds 23 | - **Use a proper build process** that only includes necessary production assets 24 | - **Configure web server properly** to prevent directory traversal attacks 25 | 26 | ### 2. Build Process 27 | 28 | When deploying to production: 29 | 30 | ```bash 31 | # Build only production assets 32 | npm run production 33 | 34 | # Deploy only the dist/ directory contents you need 35 | # Typically: dist/js/adminlte.min.js and dist/css/adminlte.min.css 36 | ``` 37 | 38 | ### 3. What NOT to Deploy 39 | 40 | Do not deploy these to production: 41 | - `node_modules/` directory 42 | - Example/demo HTML files (`index.html`, `index2.html`, `index3.html`, etc.) 43 | - Source files (`src/` directory) 44 | - Development configuration files 45 | - Documentation files 46 | 47 | ## Known CVE Issues 48 | 49 | ### CVE-2021-36471 (Disputed) 50 | 51 | **Status**: This CVE is **disputed** and does not represent a vulnerability in AdminLTE itself. 52 | 53 | **Issue**: CVE-2021-36471 claims AdminLTE 3.1.0 has a "Directory Traversal vulnerability" that allows remote attackers to view demo pages via `/admin/index2.html` and `/admin/index3.html`. 54 | 55 | **Clarification**: 56 | - The `index2.html` and `index3.html` files are **example/demo pages** intended for developer reference during development 57 | - This is **not a vulnerability in AdminLTE** - it is a **deployment misconfiguration** by website developers 58 | - The issue occurs when developers incorrectly deploy: 59 | - Their entire `node_modules` folder publicly 60 | - Demo/example files in production environments 61 | - Without proper web server configuration 62 | 63 | **Resolution**: 64 | - AdminLTE 4.x has restructured the project architecture with clear separation between development demos and production assets 65 | - Follow the production deployment best practices above 66 | - Only deploy the compiled production assets from `dist/js/` and `dist/css/` 67 | - The original CVE researcher acknowledged this should be classified as low/info severity, not critical 68 | 69 | **For More Information**: 70 | - [GitHub Issue #4948](https://github.com/ColorlibHQ/AdminLTE/issues/4948) 71 | - [CVE Record](https://www.cve.org/CVERecord?id=CVE-2021-36471) (marked as disputed) 72 | 73 | ## Secure Development 74 | 75 | ### Content Security Policy (CSP) 76 | 77 | When implementing AdminLTE in your application, consider adding appropriate Content Security Policy headers to prevent XSS attacks. 78 | 79 | ### Authentication & Authorization 80 | 81 | AdminLTE is a **UI template only** and does not include authentication or authorization. You must: 82 | - Implement proper authentication in your backend 83 | - Secure all API endpoints 84 | - Use HTTPS in production 85 | - Implement proper session management 86 | - Follow OWASP security guidelines 87 | 88 | ### Dependencies 89 | 90 | - Keep AdminLTE and its dependencies up to date 91 | - Regularly run `npm audit` to check for vulnerabilities 92 | - Review security advisories for Bootstrap and other dependencies 93 | 94 | ## Contact 95 | 96 | For security concerns, please contact the maintainers through: 97 | - GitHub Issues (for general questions) 98 | - GitHub Security Advisories (for sensitive security issues) 99 | - Project maintainer email (check package.json) 100 | -------------------------------------------------------------------------------- /src/html/components/docs/components/main-sidebar.mdx: -------------------------------------------------------------------------------- 1 | The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar: 2 | 3 | ```html 4 | 5 | 107 | 108 | ``` 109 | 110 | ## Alternate Logo 111 | 112 | You can use two logo images instead of logo with text, you only need to change the markup to this: 113 | 114 | ```html 115 |
116 | 117 | AdminLTE Logo Small 122 | AdminLTE Logo Large 127 | 128 |
129 | ``` 130 | -------------------------------------------------------------------------------- /src/html/pages/examples/register-v2.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Scripts from "@components/_scripts.astro" 4 | 5 | const title = "AdminLTE 4 | Register Page v2" 6 | const path = "../../../dist" 7 | const htmlPath = ".."; 8 | --- 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 |
23 | 24 |

25 | AdminLTE 26 |

27 | 28 |
29 |
30 |

Register a new membership

31 | 32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 | 59 | 60 |
61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 |
69 | 75 | 78 |
79 |
80 | 81 |
82 |
83 | 84 |
85 |
86 | 87 |
88 | 89 |
90 | 91 | 100 | 101 | 102 |

103 | 104 | I already have a membership 105 | 106 |

107 |
108 | 109 |
110 |
111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /src/ts/util/index.ts: -------------------------------------------------------------------------------- 1 | const domContentLoadedCallbacks: Array<() => void> = [] 2 | 3 | const onDOMContentLoaded = (callback: () => void): void => { 4 | if (document.readyState === 'loading') { 5 | // add listener on the first call when the document is in loading state 6 | if (!domContentLoadedCallbacks.length) { 7 | document.addEventListener('DOMContentLoaded', () => { 8 | for (const callback of domContentLoadedCallbacks) { 9 | callback() 10 | } 11 | }) 12 | } 13 | 14 | domContentLoadedCallbacks.push(callback) 15 | } else { 16 | callback() 17 | } 18 | } 19 | 20 | /* ES2022 UTILITY FUNCTIONS */ 21 | 22 | /** 23 | * Check if an element has a specific data attribute using ES2022 Object.hasOwn() 24 | */ 25 | const hasDataAttribute = (element: HTMLElement, attribute: string): boolean => { 26 | return Object.hasOwn(element.dataset, attribute) 27 | } 28 | 29 | /** 30 | * Get the last element from a NodeList using ES2022 Array.at() 31 | */ 32 | const getLastElement = (elements: NodeListOf | T[]): T | undefined => { 33 | const elementsArray = Array.from(elements) 34 | return elementsArray.at(-1) 35 | } 36 | 37 | /** 38 | * Safe property access with better error handling 39 | */ 40 | const safePropertyAccess = (obj: Record, property: string): unknown => { 41 | try { 42 | return Object.hasOwn(obj, property) ? obj[property] : undefined 43 | } catch (error) { 44 | // ES2022 Error cause 45 | throw new Error(`Failed to access property '${property}'`, { cause: error }) 46 | } 47 | } 48 | 49 | /* SLIDE UP */ 50 | const slideUp = (target: HTMLElement, duration = 500) => { 51 | target.style.transitionProperty = 'height, margin, padding' 52 | target.style.transitionDuration = `${duration}ms` 53 | target.style.boxSizing = 'border-box' 54 | target.style.height = `${target.offsetHeight}px` 55 | target.style.overflow = 'hidden' 56 | 57 | globalThis.setTimeout(() => { 58 | target.style.height = '0' 59 | target.style.paddingTop = '0' 60 | target.style.paddingBottom = '0' 61 | target.style.marginTop = '0' 62 | target.style.marginBottom = '0' 63 | }, 1) 64 | 65 | globalThis.setTimeout(() => { 66 | target.style.display = 'none' 67 | target.style.removeProperty('height') 68 | target.style.removeProperty('padding-top') 69 | target.style.removeProperty('padding-bottom') 70 | target.style.removeProperty('margin-top') 71 | target.style.removeProperty('margin-bottom') 72 | target.style.removeProperty('overflow') 73 | target.style.removeProperty('transition-duration') 74 | target.style.removeProperty('transition-property') 75 | }, duration) 76 | } 77 | 78 | /* SLIDE DOWN */ 79 | const slideDown = (target: HTMLElement, duration = 500) => { 80 | target.style.removeProperty('display') 81 | let { display } = globalThis.getComputedStyle(target) 82 | 83 | if (display === 'none') { 84 | display = 'block' 85 | } 86 | 87 | target.style.display = display 88 | const height = target.offsetHeight 89 | target.style.overflow = 'hidden' 90 | target.style.height = '0' 91 | target.style.paddingTop = '0' 92 | target.style.paddingBottom = '0' 93 | target.style.marginTop = '0' 94 | target.style.marginBottom = '0' 95 | 96 | globalThis.setTimeout(() => { 97 | target.style.boxSizing = 'border-box' 98 | target.style.transitionProperty = 'height, margin, padding' 99 | target.style.transitionDuration = `${duration}ms` 100 | target.style.height = `${height}px` 101 | target.style.removeProperty('padding-top') 102 | target.style.removeProperty('padding-bottom') 103 | target.style.removeProperty('margin-top') 104 | target.style.removeProperty('margin-bottom') 105 | }, 1) 106 | 107 | globalThis.setTimeout(() => { 108 | target.style.removeProperty('height') 109 | target.style.removeProperty('overflow') 110 | target.style.removeProperty('transition-duration') 111 | target.style.removeProperty('transition-property') 112 | }, duration) 113 | } 114 | 115 | /* TOGGLE */ 116 | const slideToggle = (target: HTMLElement, duration = 500) => { 117 | if (globalThis.getComputedStyle(target).display === 'none') { 118 | slideDown(target, duration) 119 | return 120 | } 121 | 122 | slideUp(target, duration) 123 | } 124 | 125 | export { 126 | onDOMContentLoaded, 127 | slideUp, 128 | slideDown, 129 | slideToggle, 130 | hasDataAttribute, 131 | getLastElement, 132 | safePropertyAccess 133 | } 134 | -------------------------------------------------------------------------------- /src/html/pages/docs/layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "Layout | AdminLTE 4" 9 | const path = "../../../dist" 10 | const mainPage = "docs" 11 | const page = "layout"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 |

Layout

37 |
38 |
39 |
    40 |
  1. Docs
    2. 41 |
  2. 42 | Layout 43 |
    3. 44 |
45 |
46 |
47 | 48 |
49 | 50 |
51 | 52 | 53 |
54 |
55 |
56 |
Tips
57 |

58 | The 59 | starter page 60 | is a good place to start building your app if you’d like to 61 | start from scratch. 62 |

63 |
64 | 65 |

The layout consists of five major parts:

66 |
    67 |
  • 68 | Wrapper .app-wrapper . A div that wraps the whole site. 69 |
    • 70 |
  • 71 | Main Header .app-header . Contains the logo and navbar. 72 |
    • 73 |
  • 74 | Main Sidebar .app-sidebar . Contains the sidebar user 75 | panel and menu. 76 |
    • 77 |
  • 78 | Content .app-main . Contains the page header and content. 79 |
    • 80 |
  • 81 | Main Footer .app-footer . Contains the footer. 82 |
    • 83 |
84 | 85 |

Layout Options

86 |

87 | AdminLTE v4 provides a set of options to apply to your main 88 | layout. Each one of these classes can be added to the 89 | body tag to get the desired goal. 90 |

91 |
    92 |
  • 93 | Fixed Sidebar: use the class .layout-fixed to get a 94 | fixed sidebar. 95 |
    • 96 |
  • 97 | Mini Sidebar on Toggle: use the class 98 | .sidebar-expand-* .sidebar-mini 99 | to have a collapsed sidebar upon loading. 100 |
    • 101 |
  • 102 | Collapsed Sidebar: use the class 103 | .sidebar-expand-* .sidebar-mini .sidebar-collapse to 104 | have a collapsed sidebar upon loading. 105 |
    • 106 |
107 |
108 | 109 |
110 | 111 |
112 | 113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/scss/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Component: Dropdown 3 | // 4 | 5 | // General Dropdown Rules 6 | 7 | // Ensure children cannot overflow and break the dropdown border radius 8 | .dropdown-menu { 9 | overflow: hidden; 10 | } 11 | 12 | .fs-7 { 13 | .dropdown-menu { 14 | font-size: $font-size-sm !important; 15 | } 16 | 17 | .dropdown-toggle::after { 18 | vertical-align: .2rem; 19 | } 20 | } 21 | 22 | .dropdown-item-title { 23 | margin: 0; 24 | font-size: $font-size-base; 25 | } 26 | 27 | .dropdown-icon { 28 | &::after { 29 | margin-left: 0; 30 | } 31 | } 32 | 33 | // Dropdown Sizes 34 | .dropdown-menu-lg { 35 | min-width: 280px; 36 | max-width: 300px; 37 | padding: 0; 38 | 39 | .dropdown-divider { 40 | margin: 0; 41 | } 42 | 43 | .dropdown-item { 44 | padding: $dropdown-padding-y $dropdown-item-padding-x; 45 | } 46 | 47 | p { 48 | margin: 0; 49 | word-wrap: break-word; 50 | white-space: normal; 51 | } 52 | } 53 | 54 | // Dropdown Submenu 55 | .dropdown-submenu { 56 | position: relative; 57 | 58 | > a::after { 59 | @include caret-end(); 60 | float: right; 61 | margin-top: .5rem; 62 | margin-left: .5rem; 63 | } 64 | 65 | > .dropdown-menu { 66 | top: 0; 67 | left: 100%; 68 | margin-top: 0; 69 | margin-left: 0; 70 | } 71 | } 72 | 73 | // Dropdown Hover 74 | .dropdown-hover { 75 | &:hover, 76 | &.nav-item.dropdown:hover, 77 | .dropdown-submenu:hover, 78 | &.dropdown-submenu:hover { 79 | > .dropdown-menu { 80 | display: block; 81 | } 82 | } 83 | } 84 | 85 | 86 | // Dropdown Sizes 87 | .dropdown-menu-xl { 88 | min-width: 360px; 89 | max-width: 420px; 90 | padding: 0; 91 | 92 | .dropdown-divider { 93 | margin: 0; 94 | } 95 | 96 | .dropdown-item { 97 | padding: $dropdown-padding-y $dropdown-item-padding-x; 98 | } 99 | 100 | p { 101 | margin: 0; 102 | word-wrap: break-word; 103 | white-space: normal; 104 | } 105 | } 106 | 107 | // Dropdown header and footer 108 | .dropdown-footer, 109 | .dropdown-header { 110 | display: block; 111 | padding: .5rem $dropdown-item-padding-x; 112 | font-size: $font-size-sm; 113 | text-align: center; 114 | } 115 | 116 | // Add fade animation to dropdown menus by appending 117 | // the class .animated-dropdown-menu to the .dropdown-menu ul (or ol) 118 | .open:not(.dropup) > .animated-dropdown-menu { 119 | animation: flipInX .7s both; 120 | backface-visibility: visible !important; 121 | } 122 | 123 | // Fix dropdown menu in navbars 124 | .navbar-custom-menu > .navbar-nav { 125 | > li { 126 | position: relative; 127 | > .dropdown-menu { 128 | position: absolute; 129 | right: 0; 130 | left: auto; 131 | } 132 | } 133 | } 134 | 135 | @include media-breakpoint-down(sm) { 136 | .navbar-custom-menu > .navbar-nav { 137 | float: right; 138 | > li { 139 | position: static; 140 | > .dropdown-menu { 141 | position: absolute; 142 | right: 5%; 143 | left: auto; 144 | background-color: var(--#{$prefix}body-bg); 145 | border: 1px solid var(--#{$prefix}border-color); 146 | } 147 | } 148 | } 149 | } 150 | 151 | // User Menu 152 | .navbar-nav > .user-menu { 153 | > .nav-link::after { 154 | content: none; 155 | } 156 | 157 | > .dropdown-menu { 158 | width: 280px; 159 | padding: 0; 160 | 161 | // Header menu 162 | > li.user-header { 163 | min-height: 175px; 164 | padding: 10px; 165 | text-align: center; 166 | 167 | // User image 168 | > img { 169 | z-index: 5; 170 | width: 90px; 171 | height: 90px; 172 | border: 3px solid; 173 | border-color: transparent; 174 | border-color: var(--#{$prefix}border-color-translucent); 175 | } 176 | 177 | > p { 178 | z-index: 5; 179 | margin-top: 10px; 180 | font-size: 17px; 181 | word-wrap: break-word; 182 | 183 | > small { 184 | display: block; 185 | font-size: 12px; 186 | } 187 | } 188 | } 189 | 190 | // Menu Body 191 | > .user-body { 192 | @include clearfix(); 193 | padding: 15px; 194 | border-top: 1px solid var(--#{$prefix}border-color); 195 | border-bottom: 1px solid var(--#{$prefix}border-color-translucent); 196 | 197 | a { 198 | text-decoration: none; 199 | } 200 | } 201 | 202 | // Menu Footer 203 | > .user-footer { 204 | @include clearfix(); 205 | padding: 10px; 206 | background-color: var(--#{$prefix}light-bg); 207 | } 208 | } 209 | 210 | .user-image { 211 | @include media-breakpoint-up(sm) { 212 | float: none; 213 | margin-top: -8px; 214 | margin-right: .4rem; 215 | line-height: 10px; 216 | } 217 | 218 | float: left; 219 | width: $lte-sidebar-user-image-width; 220 | height: $lte-sidebar-user-image-width; 221 | margin-top: -2px; 222 | // margin-right: 10px; 223 | @include border-radius(50%); 224 | } 225 | } 226 | -------------------------------------------------------------------------------- /src/html/pages/layout/layout-custom-area.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Head from "@components/_head.astro" 3 | import Footer from "@components/dashboard/_footer.astro" 4 | import Topbar from "@components/dashboard/_topbar.astro" 5 | import Sidenav from "@components/dashboard/_sidenav.astro" 6 | import Scripts from "@components/_scripts.astro" 7 | 8 | const title = "AdminLTE 4 | Layout Custom Area" 9 | const path = "../../../dist" 10 | const mainPage = "layout" 11 | const page = "layout-custom-area"; 12 | --- 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 |
35 |
36 |
App Content Top Area
37 |
38 | 39 |
40 | 41 |
42 |
43 |
44 | 45 |
46 | 47 | 48 |
49 | 50 |
51 | 52 |
53 |
54 |

Layout Custom Area

55 |
56 |
57 |
    58 |
  1. Home
    2. 59 |
  2. 60 | Fixed Layout 61 |
    3. 62 |
63 |
64 |
65 | 66 |
67 | 68 |
69 | 70 | 71 |
72 | 73 |
74 | 75 |
76 |
77 | 78 |
79 |
80 |

Title

81 | 82 |
83 | 92 | 100 |
101 |
102 |
103 | Start creating your amazing application! 104 |
105 | 106 |
Footer
107 | 108 |
109 | 110 |
111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 | 119 |
120 | 121 |
122 |
123 |
124 |
App Content Bottom Area
125 |
126 | 127 |
128 | 129 |
130 |
131 |
132 | 133 |
134 | 135 |
136 | 137 |
138 |
139 | 140 | 141 | 142 | 143 | 144 | 145 | --------------------------------------------------------------------------------