npm - @keenmate/pure-admin-core - Versions diffs - 1.0.0-rc01 - Mend

@keenmate/pure-admin-core 1.0.0-rc01

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/LICENSE +21 -0
package/README.md +172 -0
package/dist/css/main.css +11542 -0
package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtE2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtU2Hw.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtY2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtg2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvto2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvts2H68T.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nijogp5.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nmjogp5.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdZ8g_vT0.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdZsg_.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdaMg_vT0.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjsphPho.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjspuPho7vA.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjspvPho7vA.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjTYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjXYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6Vj_YJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjbYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjvYJw.woff2 +0 -0
package/dist/fonts/google/fonts-tracklist.txt +48 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbBjM4.woff2 +0 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbOjM7sfA.woff2 +0 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbPjM7sfA.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bk.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnBeA.woff2 +0 -0
package/package.json +60 -0
package/snippets/alerts.html +281 -0
package/snippets/badges.html +212 -0
package/snippets/buttons.html +287 -0
package/snippets/cards.html +393 -0
package/snippets/checkbox-lists.html +490 -0
package/snippets/code.html +225 -0
package/snippets/command-palette.html +210 -0
package/snippets/comparison.html +428 -0
package/snippets/customization.html +142 -0
package/snippets/forms.html +477 -0
package/snippets/grid.html +338 -0
package/snippets/layout.html +598 -0
package/snippets/lists.html +232 -0
package/snippets/loaders.html +183 -0
package/snippets/manifest.json +388 -0
package/snippets/modal-dialogs.html +411 -0
package/snippets/modals.html +310 -0
package/snippets/popconfirm.html +253 -0
package/snippets/profile.html +264 -0
package/snippets/tables.html +317 -0
package/snippets/tabs.html +930 -0
package/snippets/timeline.html +364 -0
package/snippets/toasts.html +154 -0
package/snippets/tooltips.html +411 -0
package/snippets/typography.html +101 -0
package/snippets/utilities.html +595 -0
package/snippets/virtual-scroll.html +322 -0
package/snippets/web-daterangepicker.html +634 -0
package/snippets/web-multiselect.html +362 -0
package/src/scss/.claude/settings.local.json +11 -0
package/src/scss/_base-css-variables.scss +348 -0
package/src/scss/_core.scss +99 -0
package/src/scss/_fonts.scss +67 -0
package/src/scss/_purecss-grid-responsive.scss +138 -0
package/src/scss/_purecss-grid.scss +58 -0
package/src/scss/_variables.scss +14 -0
package/src/scss/core-components/_alerts.scss +212 -0
package/src/scss/core-components/_badges.scss +16 -0
package/src/scss/core-components/_base.scss +124 -0
package/src/scss/core-components/_buttons.scss +473 -0
package/src/scss/core-components/_cards.scss +285 -0
package/src/scss/core-components/_checkbox-lists.scss +289 -0
package/src/scss/core-components/_code.scss +141 -0
package/src/scss/core-components/_command-palette.scss +518 -0
package/src/scss/core-components/_comparison.scss +172 -0
package/src/scss/core-components/_file-selector.scss +780 -0
package/src/scss/core-components/_forms.scss +16 -0
package/src/scss/core-components/_grid.scss +264 -0
package/src/scss/core-components/_layout.scss +15 -0
package/src/scss/core-components/_lists.scss +211 -0
package/src/scss/core-components/_loaders.scss +277 -0
package/src/scss/core-components/_logic-tree.scss +280 -0
package/src/scss/core-components/_modals.scss +209 -0
package/src/scss/core-components/_notifications.scss +253 -0
package/src/scss/core-components/_pagers.scss +141 -0
package/src/scss/core-components/_popconfirm.scss +170 -0
package/src/scss/core-components/_profile.scss +281 -0
package/src/scss/core-components/_settings-panel.scss +128 -0
package/src/scss/core-components/_statistics.scss +200 -0
package/src/scss/core-components/_tables.scss +555 -0
package/src/scss/core-components/_tabs.scss +438 -0
package/src/scss/core-components/_timeline.scss +589 -0
package/src/scss/core-components/_toasts.scss +281 -0
package/src/scss/core-components/_tooltips.scss +503 -0
package/src/scss/core-components/_utilities.scss +241 -0
package/src/scss/core-components/_web-components-theme.scss +294 -0
package/src/scss/core-components/badges/_badge-base.scss +131 -0
package/src/scss/core-components/badges/_badge-group.scss +25 -0
package/src/scss/core-components/badges/_composite-badge-variants.scss +396 -0
package/src/scss/core-components/badges/_composite-badge.scss +70 -0
package/src/scss/core-components/badges/_index.scss +10 -0
package/src/scss/core-components/badges/_labels.scss +155 -0
package/src/scss/core-components/forms/_checkboxes-radios.scss +205 -0
package/src/scss/core-components/forms/_form-inputs.scss +100 -0
package/src/scss/core-components/forms/_form-layout.scss +66 -0
package/src/scss/core-components/forms/_form-states.scss +89 -0
package/src/scss/core-components/forms/_index.scss +12 -0
package/src/scss/core-components/forms/_input-groups.scss +149 -0
package/src/scss/core-components/forms/_input-wrapper.scss +89 -0
package/src/scss/core-components/forms/_query-editor.scss +313 -0
package/src/scss/core-components/layout/_index.scss +11 -0
package/src/scss/core-components/layout/_layout-container.scss +105 -0
package/src/scss/core-components/layout/_layout-responsive.scss +100 -0
package/src/scss/core-components/layout/_navbar-elements.scss +238 -0
package/src/scss/core-components/layout/_navbar.scss +71 -0
package/src/scss/core-components/layout/_sidebar-states.scss +228 -0
package/src/scss/core-components/layout/_sidebar.scss +177 -0
package/src/scss/main.scss +7 -0
package/src/scss/themes/_dark-base.scss +207 -0
package/src/scss/themes/audi-light.scss +311 -0
package/src/scss/themes/audi.scss +288 -0
package/src/scss/themes/corporate.scss +203 -0
package/src/scss/themes/dark-blue.scss +152 -0
package/src/scss/themes/dark-green.scss +156 -0
package/src/scss/themes/dark-red.scss +160 -0
package/src/scss/themes/dark.scss +145 -0
package/src/scss/themes/express.scss +281 -0
package/src/scss/themes/minimal.scss +121 -0
package/src/scss/utilities.scss +481 -0
package/src/scss/variables/_base.scss +81 -0
package/src/scss/variables/_colors.scss +148 -0
package/src/scss/variables/_components.scss +509 -0
package/src/scss/variables/_index.scss +13 -0
package/src/scss/variables/_layout.scss +65 -0
package/src/scss/variables/_spacing.scss +66 -0
package/src/scss/variables/_system.scss +80 -0
package/src/scss/variables/_typography.scss +37 -0

package/snippets/layout.html ADDED Viewed

@@ -0,0 +1,598 @@
+<!-- ================================
+     LAYOUT & SIDEBAR SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+<!-- ================================
+     BASIC LAYOUT STRUCTURE
+     ================================ -->
+<!-- Navbar (outside layout container) -->
+<nav class="pa-navbar">
+    <div class="pa-navbar__inner">
+        <!-- Navbar content uses pa-header__ classes for elements -->
+        <!-- Burger menu, brand, navigation, page title, profile -->
+        <!-- See HEADER/NAVBAR section below for complete example -->
+    </div>
+</nav>
+<!-- Layout Container (below navbar) -->
+<div class="pa-layout">
+    <!-- Layout Inner: Sidebar + Content -->
+    <div class="pa-layout__inner">
+        <!-- Sidebar -->
+        <aside class="pa-layout__sidebar">
+            <nav class="pa-sidebar__nav">
+                <ul>
+                    <!-- Sidebar menu items here -->
+                    <!-- See SIDEBAR sections below for complete examples -->
+                </ul>
+            </nav>
+        </aside>
+        <!-- Layout Content: Main only -->
+        <div class="pa-layout__content">
+            <!-- Main Content -->
+            <main class="pa-layout__main">
+                <div class="pa-layout__main__inner">
+                    <!-- Your page content here -->
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- Footer (outside inner, inside layout) -->
+    <footer class="pa-layout__footer">
+        <div class="pa-layout__footer__content">
+            <p>&copy; 2024 Pure Admin Framework</p>
+        </div>
+    </footer>
+</div>
+<!-- ================================
+     LAYOUT WIDTH VARIANTS
+     Width is controlled by body classes, not div classes
+     ================================ -->
+<!-- Fluid Layout (Full Width) - Default -->
+<body>
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- Small Container (768px) -->
+<body class="pa-container-sm">
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- Medium Container (1024px) -->
+<body class="pa-container-md">
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- Large Container (1280px) -->
+<body class="pa-container-lg">
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- Extra Large Container (1600px) -->
+<body class="pa-container-xl">
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- 2X Large Container (1920px) -->
+<body class="pa-container-2xl">
+    <div class="pa-layout">
+        <!-- Content -->
+    </div>
+</body>
+<!-- ================================
+     SIDEBAR - BASIC MENU
+     ================================ -->
+<!-- Sidebar with Simple Links -->
+<aside class="pa-layout__sidebar">
+    <nav class="pa-sidebar__nav">
+        <ul>
+            <li class="pa-sidebar__item">
+                <a href="/" class="pa-sidebar__link pa-sidebar__link--active">
+                    <span class="pa-sidebar__icon">📊</span>
+                    <span class="pa-sidebar__label">Dashboard</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/components" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🧩</span>
+                    <span class="pa-sidebar__label">Components</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/forms" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">📝</span>
+                    <span class="pa-sidebar__label">Forms</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/tables" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">📋</span>
+                    <span class="pa-sidebar__label">Tables</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</aside>
+<!-- ================================
+     SIDEBAR - WITH FONT AWESOME ICONS
+     ================================ -->
+<!-- Sidebar with Font Awesome Icons -->
+<aside class="pa-layout__sidebar">
+    <nav class="pa-sidebar__nav">
+        <ul>
+            <li class="pa-sidebar__item">
+                <a href="/" class="pa-sidebar__link pa-sidebar__link--active">
+                    <span class="pa-sidebar__icon"><i class="fa-solid fa-chart-line"></i></span>
+                    <span class="pa-sidebar__label">Dashboard</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/users" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon"><i class="fa-solid fa-users"></i></span>
+                    <span class="pa-sidebar__label">Users</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/settings" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon"><i class="fa-solid fa-gear"></i></span>
+                    <span class="pa-sidebar__label">Settings</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</aside>
+<!-- ================================
+     SIDEBAR - WITH COLLAPSIBLE SUBMENU
+     ================================ -->
+<!-- Sidebar with Submenu (Two Levels) -->
+<aside class="pa-layout__sidebar">
+    <nav class="pa-sidebar__nav">
+        <ul>
+            <!-- Regular link -->
+            <li class="pa-sidebar__item">
+                <a href="/" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">📊</span>
+                    <span class="pa-sidebar__label">Dashboard</span>
+                </a>
+            </li>
+            <!-- Collapsible submenu -->
+            <li class="pa-sidebar__item">
+                <button class="pa-sidebar__toggle" onclick="toggleSubmenu(this)">
+                    <span class="pa-sidebar__icon">📋</span>
+                    <span class="pa-sidebar__label">Tables</span>
+                    <span class="pa-sidebar__chevron">›</span>
+                </button>
+                <ul class="pa-sidebar__submenu">
+                    <li class="pa-sidebar__item">
+                        <a href="/tables" class="pa-sidebar__link">
+                            <span class="pa-sidebar__icon">📊</span>
+                            <span class="pa-sidebar__label">Standard Tables</span>
+                        </a>
+                    </li>
+                    <li class="pa-sidebar__item">
+                        <a href="/tables-lazy" class="pa-sidebar__link">
+                            <span class="pa-sidebar__icon">⚡</span>
+                            <span class="pa-sidebar__label">Lazy Loading</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
+</aside>
+<!-- ================================
+     SIDEBAR - THREE-LEVEL NESTED MENU
+     ================================ -->
+<!-- Sidebar with Three-Level Nesting -->
+<aside class="pa-layout__sidebar">
+    <nav class="pa-sidebar__nav">
+        <ul>
+            <!-- Level 1 -->
+            <li class="pa-sidebar__item">
+                <button class="pa-sidebar__toggle" onclick="toggleSubmenu(this)">
+                    <span class="pa-sidebar__icon">⚙️</span>
+                    <span class="pa-sidebar__label">Settings</span>
+                    <span class="pa-sidebar__chevron">›</span>
+                </button>
+                <ul class="pa-sidebar__submenu">
+                    <!-- Level 2 -->
+                    <li class="pa-sidebar__item">
+                        <button class="pa-sidebar__toggle" onclick="toggleSubmenu(this)">
+                            <span class="pa-sidebar__icon">🔧</span>
+                            <span class="pa-sidebar__label">Advanced</span>
+                            <span class="pa-sidebar__chevron">›</span>
+                        </button>
+                        <ul class="pa-sidebar__submenu">
+                            <!-- Level 3 -->
+                            <li class="pa-sidebar__item">
+                                <a href="/settings/advanced/security" class="pa-sidebar__link">
+                                    <span class="pa-sidebar__icon">•</span>
+                                    <span class="pa-sidebar__label">Security</span>
+                                </a>
+                            </li>
+                            <li class="pa-sidebar__item">
+                                <a href="/settings/advanced/performance" class="pa-sidebar__link">
+                                    <span class="pa-sidebar__icon">•</span>
+                                    <span class="pa-sidebar__label">Performance</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
+</aside>
+<!-- ================================
+     SIDEBAR - COMPLETE EXAMPLE
+     ================================ -->
+<!-- Full Sidebar with Mixed Links and Submenus -->
+<aside class="pa-layout__sidebar">
+    <nav class="pa-sidebar__nav">
+        <ul>
+            <li class="pa-sidebar__item">
+                <a href="/" class="pa-sidebar__link pa-sidebar__link--active">
+                    <span class="pa-sidebar__icon">📊</span>
+                    <span class="pa-sidebar__label">Dashboard</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/components" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🧩</span>
+                    <span class="pa-sidebar__label">Components</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/forms" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">📝</span>
+                    <span class="pa-sidebar__label">Forms</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/buttons" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🔘</span>
+                    <span class="pa-sidebar__label">Buttons</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/cards" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🃏</span>
+                    <span class="pa-sidebar__label">Cards</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/badges" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🏷️</span>
+                    <span class="pa-sidebar__label">Badges</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/modals" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">🪟</span>
+                    <span class="pa-sidebar__label">Modals</span>
+                </a>
+            </li>
+            <li class="pa-sidebar__item">
+                <a href="/alerts" class="pa-sidebar__link">
+                    <span class="pa-sidebar__icon">⚠️</span>
+                    <span class="pa-sidebar__label">Alerts</span>
+                </a>
+            </li>
+            <!-- Tables submenu -->
+            <li class="pa-sidebar__item">
+                <button class="pa-sidebar__toggle" onclick="toggleSubmenu(this)">
+                    <span class="pa-sidebar__icon">📋</span>
+                    <span class="pa-sidebar__label">Tables</span>
+                    <span class="pa-sidebar__chevron">›</span>
+                </button>
+                <ul class="pa-sidebar__submenu">
+                    <li class="pa-sidebar__item">
+                        <a href="/tables" class="pa-sidebar__link">
+                            <span class="pa-sidebar__icon">📊</span>
+                            <span class="pa-sidebar__label">Standard Tables</span>
+                        </a>
+                    </li>
+                    <li class="pa-sidebar__item">
+                        <a href="/tables-lazy" class="pa-sidebar__link">
+                            <span class="pa-sidebar__icon">⚡</span>
+                            <span class="pa-sidebar__label">Lazy Loading</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </nav>
+</aside>
+<!-- ================================
+     SIDEBAR MODES
+     ================================ -->
+<!-- Sticky Sidebar (stays fixed while content scrolls) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--sticky">
+    <!-- Nav content -->
+</aside>
+<!-- Icon-collapse Sidebar (collapses to icon bar instead of hiding) -->
+<aside class="pa-layout__sidebar pa-layout__sidebar--icon-collapse">
+    <!-- Nav content -->
+</aside>
+<!-- ================================
+     NAVBAR/HEADER (with burger menu and navigation)
+     ================================ -->
+<!-- Complete Navbar Example (hybrid: pa-navbar wrapper, pa-header__ elements) -->
+<nav class="pa-navbar">
+    <div class="pa-navbar__inner">
+        <!-- Hamburger Menu (burger) -->
+        <button class="pa-header__burger burger-menu" onclick="toggleSidebar()" aria-label="Toggle sidebar">
+            <span></span>
+            <span></span>
+            <span></span>
+        </button>
+        <!-- Brand -->
+        <div class="pa-header__brand">
+            <h1>Pure Admin</h1>
+        </div>
+        <!-- Left Navigation Links -->
+        <nav class="pa-header__nav pa-header__nav--left">
+            <ul>
+                <li><a href="/">📊 Dashboard</a></li>
+                <li><a href="/components">🧩 Components</a></li>
+                <li><a href="/forms">📝 Forms</a></li>
+            </ul>
+        </nav>
+        <!-- Page Title (flexible, with ellipsis) -->
+        <div class="pa-header__title">
+            <h2>Dashboard</h2>
+        </div>
+        <!-- Right Navigation Links -->
+        <nav class="pa-header__nav pa-header__nav--right">
+            <ul>
+                <li><a href="/alerts">⚠️ Alerts</a></li>
+                <li><a href="/tables">📋 Tables</a></li>
+            </ul>
+        </nav>
+        <!-- Profile Button -->
+        <button class="pa-header__profile-btn" onclick="toggleProfilePanel()" aria-label="User Profile">
+            <span class="pa-btn__icon">👤</span>
+            <span class="pa-header__profile-name">John Doe</span>
+        </button>
+    </div>
+</nav>
+<!-- ================================
+     JAVASCRIPT - BURGER MENU TOGGLE
+     ================================ -->
+<script>
+/**
+ * Toggle sidebar visibility (burger menu)
+ */
+function toggleSidebar() {
+    const body = document.body;
+    const burgerMenu = document.querySelector('.burger-menu');
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile) {
+        // Mobile: Toggle sidebar visibility
+        body.classList.toggle('sidebar-visible');
+        burgerMenu.classList.toggle('active');
+    } else {
+        // Desktop: Toggle sidebar hidden state
+        body.classList.toggle('sidebar-hidden');
+        burgerMenu.classList.toggle('active');
+        const isHidden = body.classList.contains('sidebar-hidden');
+        localStorage.setItem('sidebar-hidden', isHidden);
+    }
+}
+</script>
+<!-- ================================
+     JAVASCRIPT - SUBMENU TOGGLE
+     ================================ -->
+<script>
+/**
+ * Toggle sidebar submenu open/closed
+ * Saves state to localStorage for persistence
+ *
+ * @param {HTMLElement} button - The .pa-sidebar__toggle button element
+ */
+function toggleSubmenu(button) {
+    const parentItem = button.closest('.pa-sidebar__item');
+    const submenu = parentItem.querySelector('.pa-sidebar__submenu');
+    if (!submenu) return;
+    const isOpen = parentItem.classList.contains('pa-sidebar__item--open');
+    // Toggle current submenu
+    if (isOpen) {
+        parentItem.classList.remove('pa-sidebar__item--open');
+        submenu.classList.remove('pa-sidebar__submenu--open');
+    } else {
+        parentItem.classList.add('pa-sidebar__item--open');
+        submenu.classList.add('pa-sidebar__submenu--open');
+    }
+    // Save state to localStorage (optional)
+    const submenuId = button.querySelector('.pa-sidebar__label').textContent.toLowerCase().replace(/\s+/g, '-');
+    localStorage.setItem(`submenu-${submenuId}`, !isOpen ? 'open' : 'closed');
+}
+/**
+ * Restore submenu states from localStorage on page load (optional)
+ */
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.pa-sidebar__toggle').forEach(button => {
+        const label = button.querySelector('.pa-sidebar__label');
+        if (!label) return;
+        const submenuId = label.textContent.toLowerCase().replace(/\s+/g, '-');
+        const savedState = localStorage.getItem(`submenu-${submenuId}`);
+        if (savedState === 'open') {
+            const parentItem = button.closest('.pa-sidebar__item');
+            const submenu = parentItem.querySelector('.pa-sidebar__submenu');
+            if (submenu) {
+                parentItem.classList.add('pa-sidebar__item--open');
+                submenu.classList.add('pa-sidebar__submenu--open');
+            }
+        }
+    });
+});
+</script>
+<!-- ================================
+     USAGE NOTES
+     ================================ -->
+<!--
+LAYOUT STRUCTURE (HYBRID NAMING):
+The framework uses a hybrid naming approach:
+- Navbar wrapper: .pa-navbar + .pa-navbar__inner
+- Navbar elements inside use: .pa-header__ classes (burger, brand, nav, title, profile)
+- Layout wrapper: .pa-layout + .pa-layout__inner
+- Sidebar container: .pa-layout__sidebar
+- Sidebar nav elements use: .pa-sidebar__ classes
+NAVBAR CLASSES:
+- .pa-navbar - Navbar outer wrapper (outside layout container)
+- .pa-navbar__inner - Navbar inner container
+HEADER/NAVBAR ELEMENT CLASSES (inside pa-navbar__inner):
+- .pa-header__burger - Burger menu button
+- .burger-menu - Burger menu class (same as __burger)
+- .pa-header__brand - Brand/logo area
+- .pa-header__nav - Navigation container
+- .pa-header__nav--left/right - Navigation alignment
+- .pa-header__title - Page title area (flexible, with ellipsis)
+- .pa-header__profile-btn - Profile button
+- .pa-header__profile-name - Profile name text
+LAYOUT CLASSES:
+- .pa-layout - Main layout wrapper (below navbar)
+- .pa-layout__inner - Inner wrapper for sidebar + content
+- .pa-layout__sidebar - Sidebar container
+- .pa-layout__content - Content wrapper
+- .pa-layout__main - Main content area
+- .pa-layout__main__inner - Main content inner wrapper
+- .pa-layout__footer - Footer container
+- .pa-layout__footer__content - Footer content wrapper
+LAYOUT WIDTH VARIANTS (applied to body tag):
+- No class - Fluid layout (full width)
+- .pa-container-sm - Small (768px)
+- .pa-container-md - Medium (1024px)
+- .pa-container-lg - Large (1280px)
+- .pa-container-xl - Extra Large (1600px)
+- .pa-container-2xl - 2X Large (1920px)
+SIDEBAR STRUCTURE:
+- .pa-layout__sidebar - Sidebar container
+- .pa-sidebar__nav - Navigation wrapper
+- .pa-sidebar__item - Menu item container
+- .pa-sidebar__link - Regular menu link
+- .pa-sidebar__toggle - Collapsible menu toggle button
+- .pa-sidebar__icon - Icon container (fixed width)
+- .pa-sidebar__label - Text label
+- .pa-sidebar__chevron - Expand/collapse indicator
+- .pa-sidebar__submenu - Submenu container
+- .pa-sidebar__link--active - Active link state
+- .pa-sidebar__item--open - Open submenu state
+- .pa-sidebar__submenu--open - Open submenu state
+SIDEBAR MODES (modifiers on .pa-layout__sidebar):
+- Default - Sidebar scrolls with content
+- .pa-layout__sidebar--sticky - Sidebar stays fixed while content scrolls
+- .pa-layout__sidebar--icon-collapse - Sidebar collapses to icon bar instead of hiding
+BURGER MENU:
+- .burger-menu - Burger menu button (same as .pa-header__burger)
+- Three <span> elements inside for the three lines
+- .active - Active state (X shape when clicked)
+BURGER MENU ANIMATION:
+- NO .active class → ☰ (3 bars) → Sidebar is visible
+- WITH .active class → ✕ (X shape) → Sidebar is hidden
+- JavaScript toggles .active class on click
+- CSS animates the transition in 150ms (ease-out)
+- Animation details:
+  - Top bar: Rotates 45° and translates down/right
+  - Middle bar: Fades out (opacity: 0)
+  - Bottom bar: Rotates -45° and translates up/right
+- Customizable via SCSS variables:
+  - $burger-width: 1.5rem
+  - $burger-height: 1.5rem
+  - $burger-bar-height: 2px
+  - $burger-transform-offset: 3px
+  - $transition-normal: 0.15s
+  - $easing-snappy: ease-out
+BODY CLASSES (for sidebar state):
+- .sidebar-hidden - Desktop: Sidebar is hidden
+- .sidebar-visible - Mobile: Sidebar is visible (overlay)
+JAVASCRIPT:
+- toggleSidebar() - Toggle sidebar visibility (burger menu)
+- toggleSubmenu(button) - Toggle submenu open/closed
+- Stores state in localStorage for persistence across page loads
+-->