docs: add documentation for all JavaScript components

Add doc pages for Layout, Card Widget, Direct Chat, Fullscreen, and
Accessibility modules. Expand PushMenu docs with configuration,
responsive behavior, and CSS class reference. All 7 JS components
now documented and linked in the sidebar navigation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/html/components/dashboard/_sidenav.astro

@@ -231,7 +231,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
                 href={htmlPath + "/layout/collapsed-sidebar-without-hover.html"}
                 class:list={[
                   "nav-link",
-                  page === "collapsed-sidebar-without-hover" && "active",
+                  page === "collapsed-sidebar-without-hover" && "active"
                 ]}
               >
                 <i class="nav-icon bi bi-circle"></i>
@@ -485,6 +485,24 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
             </p>
           </a>
           <ul class="nav nav-treeview">
+            <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"}
@@ -494,6 +512,42 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
                 <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">

src/html/components/javascript/accessibility.mdx

@@ -0,0 +1,82 @@
+The Accessibility module provides WCAG 2.1 AA compliance features that are automatically initialized when AdminLTE loads.
+
+##### Features
+
+| Feature | WCAG Criterion | Description |
+|---------|---------------|-------------|
+| Skip Links | 2.4.1 Bypass Blocks | Adds "Skip to main content" and "Skip to navigation" links. |
+| Focus Management | 2.4.3 & 2.4.7 | Tab cycling, focus trapping in modals, and focus restoration. |
+| Keyboard Navigation | 2.1.1 Keyboard | Arrow key navigation in menus, Enter/Space for custom buttons. |
+| Reduced Motion | 2.3.3 Animation | Respects `prefers-reduced-motion` by disabling animations. |
+| Live Announcements | 4.1.3 Status Messages | Announces errors and success messages to screen readers. |
+| Error Identification | 3.3.1 & 3.3.2 | Auto-labels unlabelled inputs, announces form validation errors. |
+| Table Accessibility | 1.3.1 Info & Relationships | Adds `scope` attributes to table headers automatically. |
+
+##### Configuration
+
+The module is initialized in `adminlte.ts` with all features enabled by default:
+
+```js
+initAccessibility({
+  announcements: true,
+  skipLinks: true,
+  focusManagement: true,
+  keyboardNavigation: true,
+  reducedMotion: true
+})
+```
+
+Set any option to `false` to disable that feature.
+
+##### Public API
+
+```js
+import { initAccessibility } from 'admin-lte'
+
+const a11y = initAccessibility()
+
+// Announce a message to screen readers
+a11y.announce('Item saved successfully', 'polite')
+a11y.announce('Form has errors', 'assertive')
+
+// Focus a specific element
+a11y.focusElement('#my-input')
+
+// Trap focus inside a container (useful for custom modals/dialogs)
+a11y.trapFocus(document.querySelector('.my-dialog'))
+
+// Add semantic landmarks to the page
+a11y.addLandmarks()
+```
+
+##### Utility Functions
+
+```js
+import { accessibilityUtils } from 'admin-lte'
+
+// Check color contrast ratio (WCAG 1.4.3)
+const result = accessibilityUtils.checkColorContrast('rgb(0,0,0)', 'rgb(255,255,255)')
+// { ratio: 21, passes: true }
+
+// Check if an element is focusable
+accessibilityUtils.isFocusable(element)
+
+// Generate a unique ID for ARIA attributes
+accessibilityUtils.generateId('modal') // "modal-x7k2m9p4q"
+```
+
+##### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `skip-links` | Container for skip navigation links. |
+| `skip-link` | Individual skip link, visible only on focus. |
+| `reduce-motion` | Added to `<body>` when user prefers reduced motion. |
+| `sr-only` | Screen reader only content (visually hidden). |
+| `live-region` | ARIA live region for dynamic announcements. |
+
+##### Notes
+
+- The module integrates with Bootstrap's modal and dropdown events for focus management.
+- Modal Escape key handling is deferred to Bootstrap to respect `keyboard: false` and stacked modals.
+- Form validation announcements work automatically for any input with HTML5 validation attributes.

src/html/components/javascript/card-widget.mdx

@@ -0,0 +1,55 @@
+The CardWidget plugin provides collapse, expand, remove, and maximize functionality for card components.
+
+##### Usage
+
+This plugin is activated via data attributes on buttons inside a `.card` element.
+
+**Data API**
+
+Add `data-lte-toggle="card-collapse"` to toggle card body visibility, `data-lte-toggle="card-remove"` to remove the card, or `data-lte-toggle="card-maximize"` to maximize it.
+
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Card Title</h3>
+    <div class="card-tools">
+      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+      </button>
+      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize" title="Maximize">
+        <i class="bi bi-fullscreen"></i>
+      </button>
+      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove" title="Remove">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+  </div>
+  <div class="card-body">Card content here.</div>
+  <div class="card-footer">Card footer</div>
+</div>
+```
+
+##### Events
+
+The plugin dispatches the following events on the trigger element:
+
+| Event | Description |
+|-------|-------------|
+| `collapsed.lte.card-widget` | Fired when the card body is collapsed. |
+| `expanded.lte.card-widget` | Fired when the card body is expanded. |
+| `remove.lte.card-widget` | Fired when the card is removed. |
+| `maximized.lte.card-widget` | Fired when the card is maximized. |
+| `minimized.lte.card-widget` | Fired when the card is minimized (restored from maximized). |
+
+##### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `collapsed-card` | Applied to the card when collapsed. |
+| `maximized-card` | Applied to the card when maximized. |
+
+##### Notes
+
+- Nested cards are handled correctly: collapsing a parent card does not affect child cards.
+- The animation speed defaults to 500ms.

src/html/components/javascript/direct-chat.mdx

@@ -0,0 +1,43 @@
+The DirectChat plugin toggles the contacts pane in a direct chat widget.
+
+##### Usage
+
+This plugin is activated via data attributes.
+
+**Data API**
+
+Add `data-lte-toggle="chat-pane"` to a button inside a `.direct-chat` container to toggle the contacts list.
+
+```html
+<div class="card direct-chat">
+  <div class="card-header">
+    <h3 class="card-title">Direct Chat</h3>
+    <div class="card-tools">
+      <button type="button" class="btn btn-tool" data-lte-toggle="chat-pane" title="Toggle Contacts">
+        <i class="bi bi-people-fill"></i>
+      </button>
+    </div>
+  </div>
+  <div class="card-body">
+    <div class="direct-chat-messages">
+      <!-- Chat messages go here -->
+    </div>
+    <div class="direct-chat-contacts">
+      <!-- Contacts list goes here -->
+    </div>
+  </div>
+</div>
+```
+
+##### Events
+
+| Event | Description |
+|-------|-------------|
+| `expanded.lte.direct-chat` | Fired when the contacts pane is opened. |
+| `collapsed.lte.direct-chat` | Fired when the contacts pane is closed. |
+
+##### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `direct-chat-contacts-open` | Applied to the `.direct-chat` container when the contacts pane is visible. |

src/html/components/javascript/fullscreen.mdx

@@ -0,0 +1,28 @@
+The FullScreen plugin toggles the browser's native fullscreen mode.
+
+##### Usage
+
+This plugin is activated via data attributes.
+
+**Data API**
+
+Add `data-lte-toggle="fullscreen"` to a button element. Use `data-lte-icon="maximize"` and `data-lte-icon="minimize"` on child icon elements to toggle their visibility.
+
+```html
+<button type="button" class="btn" data-lte-toggle="fullscreen">
+  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
+  <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
+</button>
+```
+
+##### Events
+
+| Event | Description |
+|-------|-------------|
+| `maximized.lte.fullscreen` | Fired when entering fullscreen mode. |
+| `minimized.lte.fullscreen` | Fired when exiting fullscreen mode. |
+
+##### Notes
+
+- Requires browser support for the Fullscreen API (`document.fullscreenEnabled`).
+- The maximize icon is hidden when in fullscreen mode, and the minimize icon is shown (and vice versa).

src/html/components/javascript/layout.mdx

@@ -0,0 +1,35 @@
+The Layout plugin manages CSS transitions during layout changes and signals when the app has finished loading.
+
+##### Behavior
+
+The Layout plugin performs two key tasks automatically:
+
+1. **Hold Transitions** - During window resize, CSS transitions on the sidebar, navbar, and content area are temporarily disabled to prevent visual glitches. The `hold-transition` class is added to `<body>` for the duration.
+
+2. **App Loaded Signal** - After a 400ms delay on DOMContentLoaded, the `app-loaded` class is added to `<body>`. Use this class in CSS to defer animations until the app is ready, preventing flicker on initial page load.
+
+##### CSS Classes
+
+| Class | Description |
+|-------|-------------|
+| `hold-transition` | Temporarily disables CSS transitions on layout elements. Applied during window resize. |
+| `app-loaded` | Added to `<body>` after the initial layout is ready. Use for entrance animations. |
+
+##### Usage in CSS
+
+```css
+/* Hide sidebar transitions until the app is loaded */
+body:not(.app-loaded) .app-sidebar {
+  transition: none !important;
+}
+
+/* Only animate after app is loaded */
+body.app-loaded .app-sidebar {
+  transition: width 0.3s ease;
+}
+```
+
+##### Notes
+
+- The `hold-transition` class is automatically removed after 200ms (on resize) or 100ms (default).
+- No data attributes or manual initialization required. The plugin initializes automatically.

src/html/components/javascript/pushmenu.mdx

@@ -1,17 +1,54 @@
-The Pushmenu plugin is used to toggle the visibility of a sidebar menu. It allows users to collapse or expand the sidebar by clicking on a button or a link.
+The PushMenu plugin toggles the sidebar between expanded and collapsed states. It handles responsive behavior, optional localStorage persistence, and overlay management on mobile.
 
 ##### Usage
 
-This plugin can be used as the data api.
+This plugin is activated via data attributes on the sidebar element and toggle buttons.
 
 **Data API**
 
-Add `data-lte-toggle="sidebar"` to any button or link element to activate the plugin.
+Add `data-lte-toggle="sidebar"` to any button or link to toggle the sidebar.
 
 ```html
 <a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
 ```
 
+##### Configuration
+
+Configure the sidebar via data attributes on the `.app-sidebar` element:
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `data-sidebar-breakpoint` | `992` | Screen width (px) below which the sidebar is considered mobile. |
+| `data-enable-persistence` | `false` | Save sidebar state to localStorage across page loads. |
+
+```html
+<aside class="app-sidebar" data-enable-persistence="true" data-sidebar-breakpoint="768">
+  <!-- sidebar content -->
+</aside>
+```
+
+##### Responsive Behavior
+
+- **Desktop** (above breakpoint): Sidebar is expanded by default. Collapse is remembered if persistence is enabled.
+- **Mobile** (at or below breakpoint): Sidebar is collapsed by default. An overlay appears when the sidebar is open, clicking it collapses the sidebar.
+
+##### CSS Classes
+
+| Class | Applied to | Description |
+|-------|-----------|-------------|
+| `sidebar-collapse` | `<body>` | Sidebar is collapsed. |
+| `sidebar-open` | `<body>` | Sidebar is explicitly open on mobile. |
+| `sidebar-mini` | `<body>` | Enables mini sidebar mode (icons only when collapsed). |
+| `sidebar-without-hover` | `<body>` | Prevents collapsed sidebar from expanding on hover. |
+| `sidebar-expand-{breakpoint}` | `<body>` | Sets the responsive breakpoint (`sm`, `md`, `lg`, `xl`, `xxl`). |
+
+##### Events
+
+| Event | Description |
+|-------|-------------|
+| `open.lte.push-menu` | Fired when the sidebar is expanded. |
+| `collapse.lte.push-menu` | Fired when the sidebar is collapsed. |
+
 ##### Example
 
 <a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>

src/html/pages/docs/javascript/accessibility.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import AccessibilityDoc from "@components/javascript/accessibility.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Accessibility Module | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "accessibility";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Accessibility Module</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Accessibility Module
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <AccessibilityDoc />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/docs/javascript/card-widget.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import CardWidgetDoc from "@components/javascript/card-widget.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Card Widget Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "card-widget";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Card Widget Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Card Widget Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <CardWidgetDoc />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/docs/javascript/direct-chat.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import DirectChatDoc from "@components/javascript/direct-chat.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Direct Chat Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "direct-chat";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Direct Chat Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Direct Chat Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <DirectChatDoc />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/docs/javascript/fullscreen.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import FullscreenDoc from "@components/javascript/fullscreen.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Fullscreen Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "fullscreen";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fullscreen Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Fullscreen Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <FullscreenDoc />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/docs/javascript/layout.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import LayoutDoc from "@components/javascript/layout.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Layout Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "layout";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Layout Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Layout Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <LayoutDoc />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>