refactor(nav): split docs and demo navigation into separate sidebars

The single combined sidebar made the live preview feel like a docs
site -- the docs section alone had ~25 nav items dominating the
sidebar even on dashboard demo pages. Splits it into two:

- _sidenav-demo.astro: dashboards, widgets, layouts, UI elements,
  forms, mailbox, tables, pages (apps), examples (auth). Adds a "View
  documentation" CTA button above the menu.
- _sidenav-docs.astro: documentation-only navigation organized into
  named sections -- START HERE / FOUNDATIONS / BUILDING / SHIPPING /
  RESOURCES. Adds a "Back to live preview" CTA at the top. Brand text
  reads "AdminLTE 4 · Docs" to make the mode obvious. Includes a
  direct GitHub link in the Resources section.
- _sidenav.astro: small dispatcher that picks demo or docs based on
  mainPage ("docs", "components", "javascript" → docs mode).

Topbar gets contextual cross-links too: on demo pages the topbar shows
Live Preview / Documentation; on docs pages it shows Documentation /
Back to live preview. Replaces the previously-empty "Home" / "Contact"
placeholder links.

src/html/components/dashboard/_sidenav-demo.astro

@@ -0,0 +1,732 @@
+---
+import { convertPathToHtml } from "../../../utils/index.js"
+const { path, mainPage, page } = Astro.props
+const htmlPath = convertPathToHtml(path);
+
+// Smart path resolution: calculate relative path based on directory depth
+const pathname = Astro.url.pathname;
+const pathSegments = pathname.split('/').filter(segment => segment !== '');
+const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
+const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
+---
+
+<!--begin::Sidebar-->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <!--begin::Sidebar Brand-->
+  <div class="sidebar-brand">
+    <!--begin::Brand Link-->
+    <a href={htmlPath + "/index.html"} class="brand-link">
+      <!--begin::Brand Image-->
+      <img
+        src={deploymentPath + "assets/img/AdminLTELogo.png"}
+        alt="AdminLTE Logo"
+        class="brand-image opacity-75 shadow"
+      />
+      <!--end::Brand Image-->
+      <!--begin::Brand Text-->
+      <span class="brand-text fw-light">AdminLTE 4</span>
+      <!--end::Brand Text-->
+    </a>
+    <!--end::Brand Link-->
+  </div>
+  <!--end::Sidebar Brand-->
+  <!--begin::Sidebar Wrapper-->
+  <div class="sidebar-wrapper">
+    <nav class="mt-2">
+      <!-- Docs CTA -->
+      <div class="px-3 pb-2">
+        <a
+          href={htmlPath + "/docs/introduction.html"}
+          class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
+        >
+          <i class="bi bi-book" aria-hidden="true"></i>
+          View documentation
+        </a>
+      </div>
+
+      <!--begin::Sidebar Menu-->
+      <ul
+        class="nav sidebar-menu flex-column"
+        data-lte-toggle="treeview"
+        role="navigation"
+        aria-label="Main navigation"
+        data-accordion="false"
+        id="navigation"
+      >
+        <li class:list={["nav-item", mainPage === "dashboard" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "dashboard" && "active"]}
+          >
+            <i class="nav-icon bi bi-speedometer"></i>
+            <p>
+              Dashboard
+              <i class="nav-arrow bi bi-chevron-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 bi bi-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 bi bi-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 bi bi-circle"></i>
+                <p>Dashboard v3</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/generate/theme.html"}
+            class:list={["nav-link", page === "theme-generate" && "active"]}
+          >
+            <i class="nav-icon bi bi-palette"></i>
+            <p>Theme Generate</p>
+          </a>
+        </li>
+        <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "widgets" && "active"]}
+          >
+            <i class="nav-icon bi bi-box-seam-fill"></i>
+            <p>
+              Widgets
+              <i class="nav-arrow bi bi-chevron-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 bi bi-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 bi bi-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 bi bi-circle"></i>
+                <p>Cards</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={["nav-item", mainPage === "layout" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "layout" && "active"]}
+          >
+            <i class="nav-icon bi bi-clipboard-fill"></i>
+            <p>
+              Layout Options
+              <span class="nav-badge badge text-bg-secondary me-3"
+              >7</span
+              >
+              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
+                <p>Default 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 bi bi-circle"></i>
+                <p>Fixed Sidebar</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-header.html"}
+                class:list={["nav-link", page === "fixed-header" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Header</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-footer.html"}
+                class:list={["nav-link", page === "fixed-footer" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Footer</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-complete.html"}
+                class:list={["nav-link", page === "fixed-complete" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Complete</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/layout-custom-area.html"}
+                class:list={["nav-link", page === "layout-custom-area" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Layout <small>+ Custom Area </small></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 bi bi-circle"></i>
+                <p>Sidebar Mini</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/collapsed-sidebar.html"}
+                class:list={[
+                  "nav-link",
+                  page === "collapsed-sidebar" && "active"
+                ]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Sidebar Mini <small>+ Collapsed</small></p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/collapsed-sidebar-without-hover.html"}
+                class:list={[
+                  "nav-link",
+                  page === "collapsed-sidebar-without-hover" && "active"
+                ]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/logo-switch.html"}
+                class:list={["nav-link", page === "logo-switch" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Sidebar Mini <small>+ Logo Switch</small></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 bi bi-circle"></i>
+                <p>Layout RTL</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li
+          class:list={["nav-item", mainPage === "ui-elements" && "menu-open"]}
+        >
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "ui-elements" && "active"]}
+          >
+            <i class="nav-icon bi bi-tree-fill"></i>
+            <p>
+              UI Elements
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/general.html"}
+                class:list={["nav-link", page === "general" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>General</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/icons.html"}
+                class:list={["nav-link", page === "icons" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Icons</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/timeline.html"}
+                class:list={["nav-link", page === "timeline" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Timeline</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={["nav-item", mainPage === "mailbox" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "mailbox" && "active"]}
+          >
+            <i class="nav-icon bi bi-envelope"></i>
+            <p>
+              Mailbox
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/mailbox/inbox.html"}
+                class:list={["nav-link", page === "inbox" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Inbox</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/mailbox/read.html"}
+                class:list={["nav-link", page === "read" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Read Message</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/mailbox/compose.html"}
+                class:list={["nav-link", page === "compose" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Compose</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+        <li class:list={["nav-item", mainPage === "forms" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "forms" && "active"]}
+          >
+            <i class="nav-icon bi bi-pencil-square"></i>
+            <p>
+              Forms
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/forms/elements.html"}
+                class:list={["nav-link", page === "elements" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Elements</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/forms/layout.html"}
+                class:list={["nav-link", page === "layout" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Layout</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/forms/validation.html"}
+                class:list={["nav-link", page === "validation" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Validation</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/forms/wizard.html"}
+                class:list={["nav-link", page === "wizard" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Wizard</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={["nav-item", mainPage === "tables" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "tables" && "active"]}
+          >
+            <i class="nav-icon bi bi-table"></i>
+            <p>
+              Tables
+              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
+                <p>Simple Tables</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/tables/data.html"}
+                class:list={["nav-link", page === "data" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Data Tables</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+        <li class="nav-header">PAGES</li>
+        <li class:list={["nav-item", mainPage === "pages" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "pages" && "active"]}
+          >
+            <i class="nav-icon bi bi-file-earmark-text"></i>
+            <p>
+              Pages
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/profile.html"}
+                class:list={["nav-link", page === "profile" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Profile</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/settings.html"}
+                class:list={["nav-link", page === "settings" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Settings</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/invoice.html"}
+                class:list={["nav-link", page === "invoice" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Invoice</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/calendar.html"}
+                class:list={["nav-link", page === "calendar" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Calendar</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/kanban.html"}
+                class:list={["nav-link", page === "kanban" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Kanban</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/chat.html"}
+                class:list={["nav-link", page === "chat" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Chat</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/file-manager.html"}
+                class:list={["nav-link", page === "file-manager" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>File Manager</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/projects.html"}
+                class:list={["nav-link", page === "projects" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Projects</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/pricing.html"}
+                class:list={["nav-link", page === "pricing" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Pricing</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/pages/faq.html"}
+                class:list={["nav-link", page === "faq" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>FAQ</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>
+                  Error
+                  <i class="nav-arrow bi bi-chevron-right"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href={htmlPath + "/pages/404.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>404</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/pages/500.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>500</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/pages/maintenance.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Maintenance</p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+
+        <li class="nav-header">EXAMPLES</li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-box-arrow-in-right"></i>
+            <p>
+              Auth
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
+                <p>
+                  Version 1
+                  <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
+                    <p>Login</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/register.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Register</p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-box-arrow-in-right"></i>
+                <p>
+                  Version 2
+                  <i class="nav-arrow bi bi-chevron-right"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Login</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
+                    <i class="nav-icon bi bi-circle"></i>
+                    <p>Register</p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Lockscreen</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+
+
+        <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>
+              Level 1
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>
+                  Level 2
+                  <i class="nav-arrow bi bi-chevron-right"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon bi bi-record-circle-fill"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+
+        <li class="nav-header">LABELS</li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle text-danger"></i>
+            <p class="text">Important</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle text-warning"></i>
+            <p>Warning</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle text-info"></i>
+            <p>Informational</p>
+          </a>
+        </li>
+      </ul>
+      <!--end::Sidebar Menu-->
+    </nav>
+  </div>
+  <!--end::Sidebar Wrapper-->
+</aside>
+<!--end::Sidebar-->

src/html/components/dashboard/_sidenav-docs.astro

@@ -0,0 +1,334 @@
+---
+import { convertPathToHtml } from "../../../utils/index.js"
+const { path, mainPage, page } = Astro.props
+const htmlPath = convertPathToHtml(path);
+
+// Smart path resolution: calculate relative path based on directory depth
+const pathname = Astro.url.pathname;
+const pathSegments = pathname.split('/').filter(segment => segment !== '');
+const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
+const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
+---
+
+<!--begin::Sidebar (docs mode)-->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <!--begin::Sidebar Brand-->
+  <div class="sidebar-brand">
+    <a href={htmlPath + "/docs/introduction.html"} class="brand-link">
+      <img
+        src={deploymentPath + "assets/img/AdminLTELogo.png"}
+        alt="AdminLTE Logo"
+        class="brand-image opacity-75 shadow"
+      />
+      <span class="brand-text fw-light">
+        AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
+      </span>
+    </a>
+  </div>
+  <!--end::Sidebar Brand-->
+  <!--begin::Sidebar Wrapper-->
+  <div class="sidebar-wrapper">
+    <nav class="mt-2">
+      <!-- Back to preview CTA -->
+      <div class="px-3 pb-2">
+        <a
+          href={htmlPath + "/index.html"}
+          class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
+        >
+          <i class="bi bi-arrow-left" aria-hidden="true"></i>
+          Back to live preview
+        </a>
+      </div>
+
+      <!--begin::Sidebar Menu-->
+      <ul
+        class="nav sidebar-menu flex-column"
+        data-lte-toggle="treeview"
+        role="navigation"
+        aria-label="Documentation navigation"
+        data-accordion="false"
+        id="docs-navigation"
+      >
+        <li class="nav-header">START HERE</li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/introduction.html"}
+            class:list={["nav-link", page === "introduction" && "active"]}
+          >
+            <i class="nav-icon bi bi-download"></i>
+            <p>Installation</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/getting-started.html"}
+            class:list={["nav-link", page === "getting-started" && "active"]}
+          >
+            <i class="nav-icon bi bi-rocket-takeoff"></i>
+            <p>Getting Started</p>
+          </a>
+        </li>
+
+        <li class="nav-header">FOUNDATIONS</li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/layout.html"}
+            class:list={["nav-link", page === "layout" && mainPage === "docs" && "active"]}
+          >
+            <i class="nav-icon bi bi-grip-horizontal"></i>
+            <p>Layout Classes</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/layout-blueprint.html"}
+            class:list={["nav-link", page === "layout-blueprint" && "active"]}
+          >
+            <i class="nav-icon bi bi-diagram-3"></i>
+            <p>Layout Blueprint</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/customization.html"}
+            class:list={["nav-link", page === "customization" && "active"]}
+          >
+            <i class="nav-icon bi bi-palette"></i>
+            <p>Customization</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 bi bi-star-half"></i>
+            <p>Color Mode</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/rtl.html"}
+            class:list={["nav-link", page === "rtl" && "active"]}
+          >
+            <i class="nav-icon bi bi-text-paragraph"></i>
+            <p>RTL Support</p>
+          </a>
+        </li>
+
+        <li class="nav-header">BUILDING</li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/recipes.html"}
+            class:list={["nav-link", page === "recipes" && "active"]}
+          >
+            <i class="nav-icon bi bi-clipboard-check"></i>
+            <p>Recipes</p>
+          </a>
+        </li>
+        <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "components" && "active"]}
+          >
+            <i class="nav-icon bi bi-ui-checks-grid"></i>
+            <p>
+              Components
+              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
+                <p>Main Header</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/components/main-sidebar.html"}
+                class:list={["nav-link", page === "main-sidebar" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Main Sidebar</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class:list={["nav-item", mainPage === "javascript" && "menu-open"]}>
+          <a
+            href="#"
+            class:list={["nav-link", mainPage === "javascript" && "active"]}
+          >
+            <i class="nav-icon bi bi-filetype-js"></i>
+            <p>
+              JavaScript Plugins
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/plugins-overview.html"}
+                class:list={["nav-link", page === "plugins-overview" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Overview</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/layout.html"}
+                class:list={["nav-link", page === "layout" && mainPage === "javascript" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Layout</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/pushmenu.html"}
+                class:list={["nav-link", page === "pushmenu" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>PushMenu</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/treeview.html"}
+                class:list={["nav-link", page === "treeview" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Treeview</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/card-widget.html"}
+                class:list={["nav-link", page === "card-widget" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Card Widget</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/direct-chat.html"}
+                class:list={["nav-link", page === "direct-chat" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Direct Chat</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/fullscreen.html"}
+                class:list={["nav-link", page === "fullscreen" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fullscreen</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/docs/javascript/accessibility.html"}
+                class:list={["nav-link", page === "accessibility" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Accessibility</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/integrations.html"}
+            class:list={["nav-link", page === "integrations" && "active"]}
+          >
+            <i class="nav-icon bi bi-puzzle"></i>
+            <p>Integrations</p>
+          </a>
+        </li>
+
+        <li class="nav-header">SHIPPING</li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/migration.html"}
+            class:list={["nav-link", page === "migration" && "active"]}
+          >
+            <i class="nav-icon bi bi-arrow-up-right-square"></i>
+            <p>Migration from v3</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/deployment.html"}
+            class:list={["nav-link", page === "deployment" && "active"]}
+          >
+            <i class="nav-icon bi bi-cloud-upload"></i>
+            <p>Deployment</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/browser-support.html"}
+            class:list={["nav-link", page === "browser-support" && "active"]}
+          >
+            <i class="nav-icon bi bi-browser-chrome"></i>
+            <p>Browser Support</p>
+          </a>
+        </li>
+
+        <li class="nav-header">RESOURCES</li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/faq.html"}
+            class:list={["nav-link", page === "faq" && "active"]}
+          >
+            <i class="nav-icon bi bi-question-circle"></i>
+            <p>FAQ</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/how-to-contribute.html"}
+            class:list={["nav-link", page === "how-to-contribute" && "active"]}
+          >
+            <i class="nav-icon bi bi-people"></i>
+            <p>Contributing</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/docs/license.html"}
+            class:list={["nav-link", page === "license" && "active"]}
+          >
+            <i class="nav-icon bi bi-patch-check"></i>
+            <p>License</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a
+            href="https://github.com/ColorlibHQ/AdminLTE"
+            target="_blank"
+            rel="noopener"
+            class="nav-link"
+          >
+            <i class="nav-icon bi bi-github"></i>
+            <p>
+              GitHub
+              <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
+            </p>
+          </a>
+        </li>
+      </ul>
+      <!--end::Sidebar Menu-->
+    </nav>
+  </div>
+  <!--end::Sidebar Wrapper-->
+</aside>
+<!--end::Sidebar (docs mode)-->

src/html/components/dashboard/_sidenav.astro

@@ -1,975 +1,17 @@
 ---
-import { convertPathToHtml } from "../../../utils/index.js"
+import SidenavDemo from "./_sidenav-demo.astro"
+import SidenavDocs from "./_sidenav-docs.astro"
+
 const { path, mainPage, page } = Astro.props
-const htmlPath = convertPathToHtml(path);
 
-// Smart path resolution: calculate relative path based on directory depth
-const pathname = Astro.url.pathname;
-const pathSegments = pathname.split('/').filter(segment => segment !== '');
-const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
-const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
+// The sidebar shows different navigation depending on whether the visitor is
+// browsing the dashboard demo or reading documentation. Pages declare their
+// mainPage; "docs", "components", and "javascript" are all documentation
+// sections.
+const docsMains = new Set(["docs", "components", "javascript"])
+const isDocsMode = docsMains.has(mainPage)
 ---
 
-<!--begin::Sidebar-->
-<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
-  <!--begin::Sidebar Brand-->
-  <div class="sidebar-brand">
-    <!--begin::Brand Link-->
-    <a href={htmlPath + "/index.html"} class="brand-link">
-      <!--begin::Brand Image-->
-      <img
-        src={deploymentPath + "assets/img/AdminLTELogo.png"}
-        alt="AdminLTE Logo"
-        class="brand-image opacity-75 shadow"
-      />
-      <!--end::Brand Image-->
-      <!--begin::Brand Text-->
-      <span class="brand-text fw-light">AdminLTE 4</span>
-      <!--end::Brand Text-->
-    </a>
-    <!--end::Brand Link-->
-  </div>
-  <!--end::Sidebar Brand-->
-  <!--begin::Sidebar Wrapper-->
-  <div class="sidebar-wrapper">
-    <nav class="mt-2">
-      <!--begin::Sidebar Menu-->
-      <ul
-        class="nav sidebar-menu flex-column"
-        data-lte-toggle="treeview"
-        role="navigation"
-        aria-label="Main navigation"
-        data-accordion="false"
-        id="navigation"
-      >
-        <li class:list={["nav-item", mainPage === "dashboard" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "dashboard" && "active"]}
-          >
-            <i class="nav-icon bi bi-speedometer"></i>
-            <p>
-              Dashboard
-              <i class="nav-arrow bi bi-chevron-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 bi bi-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 bi bi-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 bi bi-circle"></i>
-                <p>Dashboard v3</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/generate/theme.html"}
-            class:list={["nav-link", page === "theme-generate" && "active"]}
-          >
-            <i class="nav-icon bi bi-palette"></i>
-            <p>Theme Generate</p>
-          </a>
-        </li>
-        <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "widgets" && "active"]}
-          >
-            <i class="nav-icon bi bi-box-seam-fill"></i>
-            <p>
-              Widgets
-              <i class="nav-arrow bi bi-chevron-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 bi bi-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 bi bi-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 bi bi-circle"></i>
-                <p>Cards</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class:list={["nav-item", mainPage === "layout" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "layout" && "active"]}
-          >
-            <i class="nav-icon bi bi-clipboard-fill"></i>
-            <p>
-              Layout Options
-              <span class="nav-badge badge text-bg-secondary me-3"
-              >7</span
-              >
-              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
-                <p>Default 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 bi bi-circle"></i>
-                <p>Fixed Sidebar</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/fixed-header.html"}
-                class:list={["nav-link", page === "fixed-header" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Fixed Header</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/fixed-footer.html"}
-                class:list={["nav-link", page === "fixed-footer" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Fixed Footer</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/fixed-complete.html"}
-                class:list={["nav-link", page === "fixed-complete" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Fixed Complete</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/layout-custom-area.html"}
-                class:list={["nav-link", page === "layout-custom-area" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Layout <small>+ Custom Area </small></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 bi bi-circle"></i>
-                <p>Sidebar Mini</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/collapsed-sidebar.html"}
-                class:list={[
-                  "nav-link",
-                  page === "collapsed-sidebar" && "active"
-                ]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Sidebar Mini <small>+ Collapsed</small></p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/collapsed-sidebar-without-hover.html"}
-                class:list={[
-                  "nav-link",
-                  page === "collapsed-sidebar-without-hover" && "active"
-                ]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/layout/logo-switch.html"}
-                class:list={["nav-link", page === "logo-switch" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Sidebar Mini <small>+ Logo Switch</small></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 bi bi-circle"></i>
-                <p>Layout RTL</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li
-          class:list={["nav-item", mainPage === "ui-elements" && "menu-open"]}
-        >
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "ui-elements" && "active"]}
-          >
-            <i class="nav-icon bi bi-tree-fill"></i>
-            <p>
-              UI Elements
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/UI/general.html"}
-                class:list={["nav-link", page === "general" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>General</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/UI/icons.html"}
-                class:list={["nav-link", page === "icons" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Icons</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/UI/timeline.html"}
-                class:list={["nav-link", page === "timeline" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Timeline</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class:list={["nav-item", mainPage === "mailbox" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "mailbox" && "active"]}
-          >
-            <i class="nav-icon bi bi-envelope"></i>
-            <p>
-              Mailbox
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/mailbox/inbox.html"}
-                class:list={["nav-link", page === "inbox" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Inbox</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/mailbox/read.html"}
-                class:list={["nav-link", page === "read" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Read Message</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/mailbox/compose.html"}
-                class:list={["nav-link", page === "compose" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Compose</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-
-        <li class:list={["nav-item", mainPage === "forms" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "forms" && "active"]}
-          >
-            <i class="nav-icon bi bi-pencil-square"></i>
-            <p>
-              Forms
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/forms/elements.html"}
-                class:list={["nav-link", page === "elements" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Elements</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/forms/layout.html"}
-                class:list={["nav-link", page === "layout" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Layout</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/forms/validation.html"}
-                class:list={["nav-link", page === "validation" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Validation</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/forms/wizard.html"}
-                class:list={["nav-link", page === "wizard" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Wizard</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class:list={["nav-item", mainPage === "tables" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "tables" && "active"]}
-          >
-            <i class="nav-icon bi bi-table"></i>
-            <p>
-              Tables
-              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
-                <p>Simple Tables</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/tables/data.html"}
-                class:list={["nav-link", page === "data" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Data Tables</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-
-        <li class="nav-header">PAGES</li>
-        <li class:list={["nav-item", mainPage === "pages" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "pages" && "active"]}
-          >
-            <i class="nav-icon bi bi-file-earmark-text"></i>
-            <p>
-              Pages
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/profile.html"}
-                class:list={["nav-link", page === "profile" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Profile</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/settings.html"}
-                class:list={["nav-link", page === "settings" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Settings</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/invoice.html"}
-                class:list={["nav-link", page === "invoice" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Invoice</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/calendar.html"}
-                class:list={["nav-link", page === "calendar" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Calendar</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/kanban.html"}
-                class:list={["nav-link", page === "kanban" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Kanban</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/chat.html"}
-                class:list={["nav-link", page === "chat" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Chat</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/file-manager.html"}
-                class:list={["nav-link", page === "file-manager" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>File Manager</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/projects.html"}
-                class:list={["nav-link", page === "projects" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Projects</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/pricing.html"}
-                class:list={["nav-link", page === "pricing" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Pricing</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/pages/faq.html"}
-                class:list={["nav-link", page === "faq" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>FAQ</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>
-                  Error
-                  <i class="nav-arrow bi bi-chevron-right"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href={htmlPath + "/pages/404.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>404</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href={htmlPath + "/pages/500.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>500</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href={htmlPath + "/pages/maintenance.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>Maintenance</p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-
-        <li class="nav-header">EXAMPLES</li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-box-arrow-in-right"></i>
-            <p>
-              Auth
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                <p>
-                  Version 1
-                  <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
-                    <p>Login</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href={htmlPath + "/examples/register.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>Register</p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                <p>
-                  Version 2
-                  <i class="nav-arrow bi bi-chevron-right"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>Login</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
-                    <i class="nav-icon bi bi-circle"></i>
-                    <p>Register</p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li class="nav-item">
-              <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Lockscreen</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-
-        <li class="nav-header">DOCUMENTATIONS</li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/introduction.html"}
-            class:list={["nav-link", page === "introduction" && "active"]}
-          >
-            <i class="nav-icon bi bi-download"></i>
-            <p>Installation</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/getting-started.html"}
-            class:list={["nav-link", page === "getting-started" && "active"]}
-          >
-            <i class="nav-icon bi bi-rocket-takeoff"></i>
-            <p>Getting Started</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/layout.html"}
-            class:list={["nav-link", page === "layout" && "active"]}
-          >
-            <i class="nav-icon bi bi-grip-horizontal"></i>
-            <p>Layout</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/layout-blueprint.html"}
-            class:list={["nav-link", page === "layout-blueprint" && "active"]}
-          >
-            <i class="nav-icon bi bi-diagram-3"></i>
-            <p>Layout Blueprint</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/recipes.html"}
-            class:list={["nav-link", page === "recipes" && "active"]}
-          >
-            <i class="nav-icon bi bi-clipboard-check"></i>
-            <p>Recipes</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/customization.html"}
-            class:list={["nav-link", page === "customization" && "active"]}
-          >
-            <i class="nav-icon bi bi-palette"></i>
-            <p>Customization</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 bi bi-star-half"></i>
-            <p>Color Mode</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/rtl.html"}
-            class:list={["nav-link", page === "rtl" && "active"]}
-          >
-            <i class="nav-icon bi bi-text-paragraph"></i>
-            <p>RTL Support</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/migration.html"}
-            class:list={["nav-link", page === "migration" && "active"]}
-          >
-            <i class="nav-icon bi bi-arrow-up-right-square"></i>
-            <p>Migration from v3</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/integrations.html"}
-            class:list={["nav-link", page === "integrations" && "active"]}
-          >
-            <i class="nav-icon bi bi-puzzle"></i>
-            <p>Recommended Integrations</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/deployment.html"}
-            class:list={["nav-link", page === "deployment" && "active"]}
-          >
-            <i class="nav-icon bi bi-cloud-upload"></i>
-            <p>Deployment</p>
-          </a>
-        </li>
-        <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "components" && "active"]}
-          >
-            <i class="nav-icon bi bi-ui-checks-grid"></i>
-            <p>
-              Components
-              <i class="nav-arrow bi bi-chevron-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 bi bi-circle"></i>
-                <p>Main Header</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/components/main-sidebar.html"}
-                class:list={["nav-link", page === "main-sidebar" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Main Sidebar</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class:list={["nav-item", mainPage === "javascript" && "menu-open"]}>
-          <a
-            href="#"
-            class:list={["nav-link", mainPage === "javascript" && "active"]}
-          >
-            <i class="nav-icon bi bi-filetype-js"></i>
-            <p>
-              Javascript
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/plugins-overview.html"}
-                class:list={["nav-link", page === "plugins-overview" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Overview</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/layout.html"}
-                class:list={["nav-link", page === "layout" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Layout</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/pushmenu.html"}
-                class:list={["nav-link", page === "pushmenu" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>PushMenu</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/treeview.html"}
-                class:list={["nav-link", page === "treeview" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Treeview</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/card-widget.html"}
-                class:list={["nav-link", page === "card-widget" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Card Widget</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/direct-chat.html"}
-                class:list={["nav-link", page === "direct-chat" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Direct Chat</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/fullscreen.html"}
-                class:list={["nav-link", page === "fullscreen" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Fullscreen</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a
-                href={htmlPath + "/docs/javascript/accessibility.html"}
-                class:list={["nav-link", page === "accessibility" && "active"]}
-              >
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Accessibility</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 bi bi-browser-edge"></i>
-            <p>Browser Support</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/how-to-contribute.html"}
-            class:list={["nav-link", page === "how-to-contribute" && "active"]}
-          >
-            <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
-            <p>How To Contribute</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/faq.html"}
-            class:list={["nav-link", page === "faq" && "active"]}
-          >
-            <i class="nav-icon bi bi-question-circle-fill"></i>
-            <p>FAQ</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a
-            href={htmlPath + "/docs/license.html"}
-            class:list={["nav-link", page === "license" && "active"]}
-          >
-            <i class="nav-icon bi bi-patch-check-fill"></i>
-            <p>License</p>
-          </a>
-        </li>
-
-        <li class="nav-header">MULTI LEVEL EXAMPLE</li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle-fill"></i>
-            <p>Level 1</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle-fill"></i>
-            <p>
-              Level 1
-              <i class="nav-arrow bi bi-chevron-right"></i>
-            </p>
-          </a>
-          <ul class="nav nav-treeview">
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Level 2</p>
-              </a>
-            </li>
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>
-                  Level 2
-                  <i class="nav-arrow bi bi-chevron-right"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon bi bi-record-circle-fill"></i>
-                    <p>Level 3</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon bi bi-record-circle-fill"></i>
-                    <p>Level 3</p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon bi bi-record-circle-fill"></i>
-                    <p>Level 3</p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon bi bi-circle"></i>
-                <p>Level 2</p>
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle-fill"></i>
-            <p>Level 1</p>
-          </a>
-        </li>
-
-        <li class="nav-header">LABELS</li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle text-danger"></i>
-            <p class="text">Important</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle text-warning"></i>
-            <p>Warning</p>
-          </a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link">
-            <i class="nav-icon bi bi-circle text-info"></i>
-            <p>Informational</p>
-          </a>
-        </li>
-      </ul>
-      <!--end::Sidebar Menu-->
-    </nav>
-  </div>
-  <!--end::Sidebar Wrapper-->
-</aside>
-<!--end::Sidebar-->
+{isDocsMode ?
+  <SidenavDocs path={path} mainPage={mainPage} page={page} /> :
+  <SidenavDemo path={path} mainPage={mainPage} page={page} />}

src/html/components/dashboard/_topbar.astro

@@ -1,9 +1,16 @@
 ---
+import { convertPathToHtml } from "../../../utils/index.js"
+
 // Smart path resolution: calculate relative path based on directory depth
 const pathname = Astro.url.pathname;
 const pathSegments = pathname.split('/').filter(segment => segment !== '');
 const depth = pathSegments.length > 0 ? pathSegments.length - 1 : 0;
 const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
+
+// Cross-link between demo and docs experiences.
+const { path } = Astro.props
+const htmlPath = path ? convertPathToHtml(path) : ""
+const isDocsPage = pathname.includes("/docs/")
 ---
 
 <!--begin::Header-->
@@ -17,12 +24,35 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
           <i class="bi bi-list"></i>
         </a>
       </li>
-      <li class="nav-item d-none d-md-block">
-        <a href="#" class="nav-link">Home</a>
-      </li>
-      <li class="nav-item d-none d-md-block">
-        <a href="#" class="nav-link">Contact</a>
-      </li>
+      {isDocsPage ?
+        <>
+          <li class="nav-item d-none d-md-block">
+            <a href={htmlPath + "/docs/introduction.html"} class="nav-link">
+              <i class="bi bi-book me-1" aria-hidden="true" />
+              Documentation
+            </a>
+          </li>
+          <li class="nav-item d-none d-md-block">
+            <a href={htmlPath + "/index.html"} class="nav-link">
+              <i class="bi bi-arrow-left me-1" aria-hidden="true" />
+              Back to live preview
+            </a>
+          </li>
+        </> :
+        <>
+          <li class="nav-item d-none d-md-block">
+            <a href={htmlPath + "/index.html"} class="nav-link">
+              <i class="bi bi-grid-1x2 me-1" aria-hidden="true" />
+              Live preview
+            </a>
+          </li>
+          <li class="nav-item d-none d-md-block">
+            <a href={htmlPath + "/docs/introduction.html"} class="nav-link">
+              <i class="bi bi-book me-1" aria-hidden="true" />
+              Documentation
+            </a>
+          </li>
+        </>}
     </ul>
     <!--end::Start Navbar Links-->