docs intro and browser support

src/html/components/dashboard/_sidenav.astro

@@ -191,7 +191,19 @@ const htmlPath = convertPathToHtml(path)
 
         <li class="nav-header">DOCUMENTATIONS</li>
         <li class="nav-item">
-          <a href={htmlPath + '/docs/color-mode.html'} class="nav-link">
+          <a href={htmlPath + '/docs/index.html'} class:list={['nav-link', mainPage === 'introduction' && 'active']}>
+            <i class="nav-icon fa-solid fa-download"></i>
+            <p>Installation</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', mainPage === 'browser-support' && 'active']}>
+            <i class="nav-icon fa-solid fa-edge"></i>
+            <p>Browser Support</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', mainPage === 'color-mode' && 'active']}>
             <i class="nav-icon fa-solid fa-star-half-stroke"></i>
             <p>Color Mode</p>
           </a>

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
+```

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
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha1/dist/js/adminlte.min.js" integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw=" crossorigin="anonymous"></script>
+```
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha1/dist/css/adminlte.min.css" integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg=" crossorigin="anonymous">
+```
+### 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
+```

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";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!-- Main content -->
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Browser Support</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Browser Support
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Main content -->
+        <div class="app-content">
+          <div class="container-fluid">
+            <BrowserSupport />
+          </div><!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </main>
+      <!-- /.app-content -->
+
+      <Footer />
+    </div>
+    <!--  ./app-wrapper -->
+
+    <Scripts path={path} />
+  </body>
+</html>

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";
 ---
 
 <!DOCTYPE html>
@@ -31,7 +31,7 @@ const page = "general";
               </div>
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
-                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
                   <li class="breadcrumb-item active" aria-current="page">
                     General Form
                   </li>
@@ -127,13 +127,9 @@ const page = "general";
               </div>
               <!-- Start column -->
               <div class="col-12">
-                <div class="lte-code-snippet">
-                  <NavbarHtml />
-                </div>
+                <NavbarHtml />
 
-                <div class="lte-code-snippet">
-                  <ToggleScript />
-                </div>
+                <ToggleScript />
               </div>
             </div>
             <!-- /.row -->

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";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!-- Main content -->
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Introduction</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Introduction
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Main content -->
+        <div class="app-content">
+          <div class="container-fluid">
+            <Introduction />
+          </div><!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </main>
+      <!-- /.app-content -->
+
+      <Footer />
+    </div>
+    <!--  ./app-wrapper -->
+
+    <Scripts path={path} />
+  </body>
+</html>

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

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);
 }

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;

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;