diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 21ff2d382..00169c830 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -191,7 +191,19 @@ const htmlPath = convertPathToHtml(path)
  • DOCUMENTATIONS
  • - + + +

    Installation

    +     +
    • +
  • + + +

    Browser Support

    +     +
    • +
  • +

    Color Mode

     diff --git a/src/html/components/docs/browser-support/index.md b/src/html/components/docs/browser-support/index.md new file mode 100644 index 000000000..200d1320d --- /dev/null +++ b/src/html/components/docs/browser-support/index.md @@ -0,0 +1,22 @@ +AdminLTE comes with the same browser support as Bootstrap 5. + +> ##### Excerpt from Bootstrap's official Documentation! +> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms. +> +> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers). + +You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc): + +``` +# https://github.com/browserslist/browserslist#readme + +>= 0.5% +last 2 major versions +not dead +Chrome >= 60 +Firefox >= 60 +Firefox ESR +iOS >= 12 +Safari >= 12 +not Explorer <= 11 +``` diff --git a/src/html/components/docs/introduction/index.md b/src/html/components/docs/introduction/index.md new file mode 100644 index 000000000..84e9a7d0c --- /dev/null +++ b/src/html/components/docs/introduction/index.md @@ -0,0 +1,35 @@ +## Quick start +There are multiple ways to install AdminLTE. + +### Download & Changelog: +Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\ +Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\ +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). + +## Stable release +### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN: +_**Important Note**: You needed to add separately cdn links for plugins in your project._ +```html + +``` +```html + +``` +### Using The Command Line: +_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._ +#### Via npm +```bash +npm install admin-lte@4.0.0-alpha1 --save +``` +#### Via Yarn +```bash +yarn add admin-lte@4.0.0-alpha1 +``` +#### Via Composer +```bash +composer require "almasaeed2010/adminlte=4.0.0-alpha1" +``` +#### Via Git +```bash +git clone https://github.com/ColorlibHQ/AdminLTE.git +``` diff --git a/src/html/pages/docs/browser-support.astro b/src/html/pages/docs/browser-support.astro new file mode 100644 index 000000000..6ed5cda2f --- /dev/null +++ b/src/html/pages/docs/browser-support.astro @@ -0,0 +1,58 @@ +--- +import Head from "@components/_head.astro"; +import Footer from "@components/dashboard/_footer.astro"; +import Topbar from "@components/dashboard/_topbar.astro"; +import BrowserSupport from "@components/docs/browser-support/index.md"; +import Sidenav from "@components/dashboard/_sidenav.astro"; +import Scripts from "@components/_scripts.astro"; +const title = "Browser Support | AdminLTE 4"; +const path = '../../../dist' +const mainPage = "browser-support"; +const page = "docs"; +--- + + + + + + + +
    + + + +
    +
    +
    +
    +
    +

    Browser Support

    +
    +
    +
      +
    1. Docs
      2. +
    2. + Browser Support +
      3. +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    + + +
    +
    + + + + + diff --git a/src/html/pages/docs/color-mode.astro b/src/html/pages/docs/color-mode.astro index 89479431e..06e602625 100644 --- a/src/html/pages/docs/color-mode.astro +++ b/src/html/pages/docs/color-mode.astro @@ -6,10 +6,10 @@ import Sidenav from "@components/dashboard/_sidenav.astro"; import Scripts from "@components/_scripts.astro"; import NavbarHtml from "@components/docs/color-mode/navbar-html.md"; import ToggleScript from "@components/docs/color-mode/toggle-script.md"; -const title = "AdminLTE 4 | General Form Elements"; +const title = "Color Mode | AdminLTE 4"; const path = '../../../dist' -const mainPage = "forms"; -const page = "general"; +const mainPage = "color-mode"; +const page = "docs"; --- @@ -31,7 +31,7 @@ const page = "general";
      -
    1. Home
      2. +
    2. Docs
    3. General Form
      4. @@ -127,13 +127,9 @@ const page = "general";
    -
    - -
    + -
    - -
    +
    diff --git a/src/html/pages/docs/index.astro b/src/html/pages/docs/index.astro new file mode 100644 index 000000000..6bc87177c --- /dev/null +++ b/src/html/pages/docs/index.astro @@ -0,0 +1,58 @@ +--- +import Head from "@components/_head.astro"; +import Footer from "@components/dashboard/_footer.astro"; +import Topbar from "@components/dashboard/_topbar.astro"; +import Sidenav from "@components/dashboard/_sidenav.astro"; +import Scripts from "@components/_scripts.astro"; +import Introduction from "@components/docs/introduction/index.md"; +const title = "Introduction | AdminLTE 4"; +const path = '../../../dist' +const mainPage = "introduction"; +const page = "docs"; +--- + + + + + + + +
    + + + +
    +
    +
    +
    +
    +

    Introduction

    +
    +
    +
      +
    1. Docs
      2. +
    2. + Introduction +
      3. +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    + + +
    +
    + + + + + diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss index c17b2ed77..306fb2f4c 100644 --- a/src/scss/_app-sidebar.scss +++ b/src/scss/_app-sidebar.scss @@ -68,6 +68,12 @@ // Sidebar Menu. First level links .sidebar-menu > .nav-item { + &.menu-open { + .nav-link.active:not(:hover) { + --#{$lte-prefix}sidebar-menu-active-bg: transparent; + } + } + // links > .nav-link { &:active, @@ -77,8 +83,8 @@ } > .nav-link.active:not(:hover) { - color: var(--#{$lte-prefix}sidebar-menu-active-color) !important; - background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important; + color: var(--#{$lte-prefix}sidebar-menu-active-color); + background-color: var(--#{$lte-prefix}sidebar-menu-active-bg); } // Hover and active states diff --git a/src/scss/_docs.scss b/src/scss/_docs.scss index c93304051..5b936b807 100644 --- a/src/scss/_docs.scss +++ b/src/scss/_docs.scss @@ -1,4 +1,4 @@ -.lte-code-snippet .astro-code { - padding: 1.5rem; +.astro-code { + padding: .75rem; @include border-radius($border-radius); } diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss index 96972532c..9bd8681f7 100644 --- a/src/scss/_variables-dark.scss +++ b/src/scss/_variables-dark.scss @@ -5,7 +5,7 @@ $lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default; $lte-sidebar-color-dark: #c2c7d0 !default; $lte-sidebar-hover-color-dark: $white !default; $lte-sidebar-active-color-dark: $white !default; -$lte-sidebar-menu-active-bg-dark: transparent !default; +$lte-sidebar-menu-active-bg-dark: rgba(255, 255, 255, .1) !default; $lte-sidebar-menu-active-color-dark: $white !default; $lte-sidebar-submenu-bg-dark: transparent !default; $lte-sidebar-submenu-color-dark: #c2c7d0 !default; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4d07bd024..e20036fd7 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -28,7 +28,7 @@ $lte-sidebar-hover-bg: rgba($black, .1) !default; $lte-sidebar-color: $gray-800 !default; $lte-sidebar-hover-color: $gray-900 !default; $lte-sidebar-active-color: $black !default; -$lte-sidebar-menu-active-bg: transparent !default; +$lte-sidebar-menu-active-bg: rgba($black, .1) !default; $lte-sidebar-menu-active-color: $black !default; $lte-sidebar-submenu-bg: transparent !default; $lte-sidebar-submenu-color: #777 !default;