admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/index.html

@@ -10,12 +10,7 @@
   <!-- TODO: Remove below link Before Alpha Release of AdminLTE v4 -->
   <a href="https://github.com/ColorlibHQ/AdminLTE/tree/v4-dev">Check once</a>
   <script>
-    /**
-     * TODO: Uncomment Before Alpha Release of AdminLTE v4
-     * Will redirect properly
-     */
-
-    // window.location = './dist/index.html';
+    window.location = './dist/pages/index.html';
   </script>
 </body>
 </html>

package/package.json

@@ -1,19 +1,39 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-alpha1",
+  "version": "4.0.0-alpha2",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
   "scripts": {
+    "dev": "npm-run-all --parallel watch docs-serve",
+    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css src/scss/:dist/css/",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config src/config/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css-lint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
+    "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "css-prefix": "postcss --config src/config/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "js": "npm-run-all js-compile js-minify",
+    "js-compile": "rollup --config src/config/rollup.config.js --sourcemap",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
+    "js-minify": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "docs-compile": "node -v",
-    "docs-lint": "node -v",
-    "lint": "npx gulp lint && npm run lockfile-lint",
-    "compile": "npx gulp compile",
-    "production": "npx gulp production",
-    "dev": "npx gulp"
+    "docs-compile": "astro --config src/config/astro.config.mjs build",
+    "docs-lint": "astro --config src/config/astro.config.mjs check",
+    "docs-format": "js-beautify --file \"dist/pages/**/*.html\"",
+    "docs-serve": "astro --config src/config/astro.config.mjs dev --open",
+    "assets": "node src/config/assets.config.mjs",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
+    "compile": "npm-run-all docs-compile docs-format assets css js",
+    "production": "npm-run-all lint compile",
+    "watch": "concurrently \"npm:watch-*\"",
+    "watch-css-main": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-lint css-compile\"",
+    "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
+    "watch-js-main": "nodemon --watch src/ts/ --ext ts --exec \"npm-run-all js-lint js-compile\"",
+    "watch-assets": "nodemon --watch src/assets/ --exec \"npm run assets\""
   },
   "keywords": [
     "css",
@@ -37,39 +57,36 @@
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@ronilaukkarinen/gulp-stylelint": "^14.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "autoprefixer": "^10.4.13",
-    "bootstrap": "^5.3.0-alpha1",
-    "browser-sync": "^2.27.11",
+    "@rollup/plugin-typescript": "^11.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "astro": "^2.4.3",
+    "autoprefixer": "^10.4.14",
+    "bootstrap": "^5.3.0-alpha3",
     "bundlewatch": "^0.3.3",
-    "del": "^6.1.1",
-    "eslint": "^8.33.0",
+    "clean-css-cli": "^5.6.2",
+    "concurrently": "^8.0.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.40.0",
     "eslint-config-xo": "^0.43.1",
-    "eslint-config-xo-typescript": "^0.55.1",
+    "eslint-config-xo-typescript": "^0.57.0",
+    "eslint-plugin-astro": "^0.27.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-unicorn": "^45.0.2",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-eslint-new": "^1.7.1",
-    "gulp-file-include": "^2.3.0",
-    "gulp-format-html": "^1.5.0",
-    "gulp-html": "^5.0.0",
-    "gulp-if": "^3.0.0",
-    "gulp-postcss": "^9.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.1.0",
-    "gulp-terser": "^2.1.0",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "fs-extra": "^11.1.1",
+    "js-beautify": "^1.14.7",
     "lockfile-lint": "^4.10.0",
-    "postcss": "^8.4.6",
-    "rollup": "^3.12.0",
-    "rtlcss": "^4.0.0",
-    "sass": "^1.57.1",
-    "stylelint": "^14.9.1",
-    "stylelint-config-twbs-bootstrap": "^7.0.0",
+    "nodemon": "^2.0.22",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.23",
+    "postcss-cli": "^10.1.0",
+    "rollup": "^3.21.6",
+    "rtlcss": "^4.1.0",
+    "sass": "^1.62.1",
+    "stylelint": "^15.6.1",
+    "stylelint-config-twbs-bootstrap": "^10.0.0",
+    "terser": "^5.17.3",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.4"
+    "typescript": "^5.0.4"
   }
 }

package/src/config/assets.config.mjs

@@ -0,0 +1,8 @@
+import fs from 'fs-extra'
+
+try {
+  fs.copySync('./src/assets', './dist/assets')
+  console.log('Assets copy success!')
+} catch (error) {
+  console.error(error)
+}

package/src/config/astro.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from 'astro/config'
+
+// https://astro.build/config
+export default defineConfig({
+  build: {
+    // Example: Generate `page.html` instead of `page/index.html` during build.
+    format: 'file'
+  },
+  markdown: {
+    shikiConfig: {
+      theme: 'dark-plus'
+    }
+  },
+  // base: './dist',
+  srcDir: './src/html',
+  outDir: './dist/pages'
+})

package/src/config/postcss.config.mjs

@@ -0,0 +1,15 @@
+export default ctx => {
+  return {
+    map: {
+      inline: false,
+      annotation: true,
+      sourcesContent: true
+    },
+    plugins: {
+      autoprefixer: {
+        cascade: false
+      },
+      rtlcss: ctx.env === 'RTL' ? {} : false
+    }
+  }
+}

package/src/config/rollup.config.js

@@ -0,0 +1,20 @@
+const typescript = require('@rollup/plugin-typescript')
+const pkg = require('../../package.json')
+
+const year = new Date().getFullYear()
+const banner = `/*!
+ * AdminLTE v${pkg.version} (${pkg.homepage})
+ * Copyright 2014-${year} ${pkg.author}
+ * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
+ */`
+
+module.exports = {
+  input: 'src/ts/adminlte.ts',
+  output: {
+    file: 'dist/js/adminlte.js',
+    format: 'umd',
+    banner,
+    name: 'adminlte'
+  },
+  plugins: [typescript()]
+}

package/src/html/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:astro/recommended"
+  ],
+  "overrides": [
+    {
+      // Define the configuration for `.astro` file.
+      "files": ["*.astro"],
+      // Allows Astro components to be parsed.
+      "parser": "astro-eslint-parser",
+      // Parse the script in `.astro` as TypeScript by adding the following configuration.
+      // It's the setting you need when using TypeScript.
+      "parserOptions": {
+        "parser": "@typescript-eslint/parser",
+        "extraFileExtensions": [".astro"]
+      },
+      "rules": {
+        // override/add rules settings here, such as:
+        // "astro/no-set-html-directive": "error"
+      }
+    }
+  ]
+}

package/src/html/.tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "astro/tsconfigs/strict"
+}

package/src/html/components/_head.astro

@@ -0,0 +1,31 @@
+---
+const { title, path, isRtl } = Astro.props
+const cssPath = isRtl ? '.rtl' : ''
+---
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="title" content={title}>
+<meta name="author" content="ColorlibHQ">
+<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
+<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
+
+<!-- OPTIONAL LINKS -->
+
+<!-- Google Font: Source Sans Pro -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
+
+<!-- overlayscrollbars -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
+
+<!-- @fortawesome/fontawesome-free -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
+
+<!-- REQUIRED LINKS -->
+
+<!-- Theme style -->
+<link rel="stylesheet" href={path + '/css/adminlte' + cssPath + '.css'} >

package/src/html/components/_scripts.astro

@@ -0,0 +1,40 @@
+---
+const { path } = Astro.props
+const adminlteJsUrl = path + '/js/adminlte.js'
+---
+<!-- OPTIONAL SCRIPTS -->
+<!-- overlayscrollbars -->
+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
+
+<!-- @popperjs for Bootstrap 5 -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
+
+<!-- Bootstrap 5 -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
+
+<!-- REQUIRED SCRIPTS -->
+<!-- AdminLTE App -->
+<script src={adminlteJsUrl} is:inline></script>
+
+<!-- OPTIONAL SCRIPTS -->
+<script is:inline>
+  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
+  const Default = {
+    scrollbarTheme: 'os-theme-light',
+    scrollbarAutoHide: 'leave',
+    scrollbarClickScroll: true
+  }
+
+  document.addEventListener("DOMContentLoaded", function() {
+    const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
+    if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
+      OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
+        scrollbars: {
+          theme: Default.scrollbarTheme,
+          autoHide: Default.scrollbarAutoHide,
+          clickScroll: Default.scrollbarClickScroll
+        }
+      })
+    }
+  })
+</script>

package/src/html/components/dashboard/_footer.astro

@@ -0,0 +1,12 @@
+---
+const year = new Date().getFullYear()
+---
+<!-- Main Footer -->
+<footer class="app-footer">
+  <!-- To the end -->
+  <div class="float-end d-none d-sm-inline">
+    Anything you want
+  </div>
+  <!-- Default to the start -->
+  <strong>Copyright &copy; 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+</footer>

package/src/html/components/dashboard/_sidenav.astro

@@ -0,0 +1,323 @@
+---
+import { convertPathToHtml } from '../../../utils/index.js';
+const { path, mainPage, page } = Astro.props
+const htmlPath = convertPathToHtml(path)
+---
+
+<!-- Sidebar Container -->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <div class="sidebar-brand">
+    <a href={htmlPath + '/index.html'} class="brand-link">
+      <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+      <span class="brand-text fw-light">AdminLTE 4</span>
+    </a>
+  </div>
+  <!-- Sidebar -->
+  <div class="sidebar-wrapper">
+    <nav class="mt-2">
+      <!-- Sidebar Menu -->
+      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+        <li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
+            <i class="nav-icon fa-solid fa-gauge-high"></i>
+            <p>
+              Dashboard
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Dashboard v1</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Dashboard v2</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Dashboard v3</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
+            <i class="nav-icon fa-solid fa-box-open"></i>
+            <p>
+              Widgets
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Small Box</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>info Box</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Cards</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+        <li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
+            <i class="nav-icon fa-solid fa-copy"></i>
+            <p>
+              Layout Options
+              <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Unfixed Sidebar</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Fixed Sidebar</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Sidebar Mini</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Layout RTL</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
+            <i class="nav-icon fa-solid fa-tree"></i>
+            <p>
+              UI Elements
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Timeline</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
+            <i class="nav-icon fa-solid fa-pen-to-square"></i>
+            <p>
+              Forms
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>General Elements</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
+            <i class="nav-icon fa-solid fa-table"></i>
+            <p>
+              Tables
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Simple Tables</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+        <li class="nav-header">EXAMPLES</li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
+            <p>
+              Login & Register
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/examples/login.html'} class="nav-link ">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Login v1</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + '/examples/register.html'} class="nav-link ">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Register v1</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+        <li class="nav-header">DOCUMENTATIONS</li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/index.html'} class:list={['nav-link', page === 'introduction' && 'active']}>
+            <i class="nav-icon fa-solid fa-download"></i>
+            <p>Installation</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/layout.html'} class:list={['nav-link', page === 'layout' && 'active']}>
+            <i class="nav-icon fa-solid fa-grip"></i>
+            <p>Layout</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
+            <i class="nav-icon fa-solid fa-star-half-stroke"></i>
+            <p>Color Mode</p>
+          </a>
+        </li>
+        <li class:list={['nav-item', mainPage === 'components' && 'menu-open']}>
+          <a href="javascript:;" class:list={['nav-link', mainPage === 'components' && 'active']}>
+            <i class="nav-icon fa-solid fa-swatchbook"></i>
+            <p>
+              Components
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href={htmlPath + '/docs/components/main-header.html'} class:list={['nav-link', page === 'main-header' && 'active']}>
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Main Header</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', page === 'browser-support' && 'active']}>
+            <i class="nav-icon fa-solid fa-edge"></i>
+            <p>Browser Support</p>
+          </a>
+        </li>
+
+        <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>
+              Level 1
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="javascript:;" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="javascript:;" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>
+                  Level 2
+                  <i class="nav-arrow fa-solid fa-angle-right"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="javascript:;" class="nav-link">
+                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="javascript:;" class="nav-link">
+                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="javascript:;" class="nav-link">
+                    <i class="nav-icon fa-regular fa-dot-circle"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href="javascript:;" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-header">LABELS</li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-regular fa-circle text-danger"></i>
+            <p class="text">Important</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-regular fa-circle text-warning"></i>
+            <p>Warning</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-regular fa-circle text-info"></i>
+            <p>Informational</p>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <!-- /.sidebar -->
+</aside>