gentelella
Version:
Gentelella Admin is a free to use Bootstrap admin template
1,934 lines • 197 kB
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css">
<link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
<style id="jtd-nav-activation">
.site-nav > ul.nav-list:first-child > li:not(:nth-child(7)) > a,
.site-nav > ul.nav-list:first-child > li > ul > li a {
background-image: none;
}
.site-nav > ul.nav-list:not(:first-child) a,
.site-nav li.external a {
background-image: none;
}
.site-nav > ul.nav-list:first-child > li:nth-child(7) > a {
font-weight: 600;
text-decoration: none;
}.site-nav > ul.nav-list:first-child > li:nth-child(7) > button svg {
transform: rotate(-90deg);
}.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(7) > ul.nav-list {
display: block;
}
</style>
<script src="/gentelella/assets/js/vendor/lunr.min.js"></script>
<script src="/gentelella/assets/js/just-the-docs.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">
<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Customization Guide | Gentelella Admin Template</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="Customization Guide" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
<meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" />
<link rel="canonical" href="http://localhost:4000/gentelella/customization/" />
<meta property="og:url" content="http://localhost:4000/gentelella/customization/" />
<meta property="og:site_name" content="Gentelella Admin Template" />
<meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" />
<meta property="twitter:title" content="Customization Guide" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Customization Guide","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/customization/"}</script>
<!-- End Jekyll SEO tag -->
</head>
<body>
<a class="skip-to-main" href="#main-content">Skip to main content</a>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="svg-link" viewBox="0 0 24 24">
<title>Link</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</symbol>
<symbol id="svg-menu" viewBox="0 0 24 24">
<title>Menu</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</symbol>
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
<title>Expand</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</symbol>
<!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
<title id="svg-external-link-title">(external link)</title>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>
<symbol id="svg-doc" viewBox="0 0 24 24">
<title>Document</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
</svg>
</symbol>
<symbol id="svg-search" viewBox="0 0 24 24">
<title>Search</title>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</symbol>
<!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
<title>Copy</title>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
</svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
<title>Copied</title>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
<path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
</svg>
</symbol>
</svg>
<div class="side-bar">
<div class="site-header" role="banner">
<a href="/gentelella/" class="site-title lh-tight">
Gentelella Admin Template
</a>
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
</button>
</div>
<nav aria-label="Main" id="site-nav" class="site-nav">
<ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul>
</nav>
<footer class="site-footer">
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
</footer>
</div>
<div class="main" id="top">
<div id="main-header" class="main-header">
<div class="search" role="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off">
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
</div>
<div id="search-results" class="search-results"></div>
</div>
<nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list">
<li class="aux-nav-list-item">
<a href="//github.com/puikinsh/gentelella" class="site-button"
>
Gentelella on GitHub
</a>
</li>
<li class="aux-nav-list-item">
<a href="//colorlib.com" class="site-button"
>
Colorlib
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content-wrap">
<div id="main-content" class="main-content">
<main>
<h1 class="no_toc" id="customization-guide">
<a href="#customization-guide" class="anchor-heading" aria-labelledby="customization-guide"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Customization Guide
</h1>
<p class="fs-6 fw-300">Learn how to customize and extend Gentelella Admin Template to match your brand and requirements</p>
<h2 class="no_toc text-delta" id="table-of-contents">
<a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents
</h2>
<ol id="markdown-toc">
<li><a href="#branding-and-theming" id="markdown-toc-branding-and-theming">Branding and Theming</a> <ol>
<li><a href="#color-scheme-customization" id="markdown-toc-color-scheme-customization">Color Scheme Customization</a> <ol>
<li><a href="#primary-colors" id="markdown-toc-primary-colors">Primary Colors</a></li>
<li><a href="#dark-theme-support" id="markdown-toc-dark-theme-support">Dark Theme Support</a></li>
<li><a href="#theme-toggle-implementation" id="markdown-toc-theme-toggle-implementation">Theme Toggle Implementation</a></li>
</ol>
</li>
<li><a href="#logo-and-branding" id="markdown-toc-logo-and-branding">Logo and Branding</a> <ol>
<li><a href="#custom-logo-implementation" id="markdown-toc-custom-logo-implementation">Custom Logo Implementation</a></li>
</ol>
</li>
<li><a href="#typography-customization" id="markdown-toc-typography-customization">Typography Customization</a> <ol>
<li><a href="#custom-font-integration" id="markdown-toc-custom-font-integration">Custom Font Integration</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#layout-customization" id="markdown-toc-layout-customization">Layout Customization</a> <ol>
<li><a href="#sidebar-modifications" id="markdown-toc-sidebar-modifications">Sidebar Modifications</a> <ol>
<li><a href="#collapsible-sidebar" id="markdown-toc-collapsible-sidebar">Collapsible Sidebar</a></li>
<li><a href="#custom-menu-items" id="markdown-toc-custom-menu-items">Custom Menu Items</a></li>
</ol>
</li>
<li><a href="#header-customization" id="markdown-toc-header-customization">Header Customization</a> <ol>
<li><a href="#custom-navigation-bar" id="markdown-toc-custom-navigation-bar">Custom Navigation Bar</a></li>
<li><a href="#search-functionality" id="markdown-toc-search-functionality">Search Functionality</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#component-customization" id="markdown-toc-component-customization">Component Customization</a> <ol>
<li><a href="#custom-dashboard-widgets" id="markdown-toc-custom-dashboard-widgets">Custom Dashboard Widgets</a> <ol>
<li><a href="#widget-factory" id="markdown-toc-widget-factory">Widget Factory</a></li>
<li><a href="#widget-configuration" id="markdown-toc-widget-configuration">Widget Configuration</a></li>
</ol>
</li>
<li><a href="#form-builder" id="markdown-toc-form-builder">Form Builder</a> <ol>
<li><a href="#dynamic-form-generator" id="markdown-toc-dynamic-form-generator">Dynamic Form Generator</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#advanced-customization" id="markdown-toc-advanced-customization">Advanced Customization</a> <ol>
<li><a href="#plugin-system" id="markdown-toc-plugin-system">Plugin System</a> <ol>
<li><a href="#plugin-architecture" id="markdown-toc-plugin-architecture">Plugin Architecture</a></li>
<li><a href="#example-plugin" id="markdown-toc-example-plugin">Example Plugin</a></li>
</ol>
</li>
</ol>
</li>
<li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li>
</ol><hr />
<h2 id="branding-and-theming">
<a href="#branding-and-theming" class="anchor-heading" aria-labelledby="branding-and-theming"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Branding and Theming
</h2>
<h3 id="color-scheme-customization">
<a href="#color-scheme-customization" class="anchor-heading" aria-labelledby="color-scheme-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Color Scheme Customization
</h3>
<h4 id="primary-colors">
<a href="#primary-colors" class="anchor-heading" aria-labelledby="primary-colors"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Primary Colors
</h4>
<p>Override Bootstrap variables in <code class="language-plaintext highlighter-rouge">src/scss/variables.scss</code>:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Brand colors</span>
<span class="nv">$primary</span><span class="p">:</span> <span class="mh">#73879C</span><span class="p">;</span> <span class="c1">// Main brand color</span>
<span class="nv">$secondary</span><span class="p">:</span> <span class="mh">#6c757d</span><span class="p">;</span> <span class="c1">// Secondary color</span>
<span class="nv">$success</span><span class="p">:</span> <span class="mh">#26B99A</span><span class="p">;</span> <span class="c1">// Success actions</span>
<span class="nv">$info</span><span class="p">:</span> <span class="mh">#3498DB</span><span class="p">;</span> <span class="c1">// Information</span>
<span class="nv">$warning</span><span class="p">:</span> <span class="mh">#F39C12</span><span class="p">;</span> <span class="c1">// Warnings</span>
<span class="nv">$danger</span><span class="p">:</span> <span class="mh">#E74C3C</span><span class="p">;</span> <span class="c1">// Errors</span>
<span class="c1">// Sidebar colors</span>
<span class="nv">$sidebar-bg</span><span class="p">:</span> <span class="mh">#2A3F54</span><span class="p">;</span>
<span class="nv">$sidebar-text</span><span class="p">:</span> <span class="mh">#E7E7E7</span><span class="p">;</span>
<span class="nv">$sidebar-text-hover</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="nv">$sidebar-active-bg</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span>
<span class="c1">// Dashboard colors</span>
<span class="nv">$dashboard-bg</span><span class="p">:</span> <span class="mh">#F7F7F7</span><span class="p">;</span>
<span class="nv">$card-bg</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="nv">$card-border</span><span class="p">:</span> <span class="mh">#E6E9ED</span><span class="p">;</span>
<span class="c1">// Text colors</span>
<span class="nv">$text-primary</span><span class="p">:</span> <span class="mh">#73879C</span><span class="p">;</span>
<span class="nv">$text-secondary</span><span class="p">:</span> <span class="mh">#ABB1B7</span><span class="p">;</span>
<span class="nv">$text-dark</span><span class="p">:</span> <span class="mh">#566573</span><span class="p">;</span>
</code></pre></div></div>
<h4 id="dark-theme-support">
<a href="#dark-theme-support" class="anchor-heading" aria-labelledby="dark-theme-support"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dark Theme Support
</h4>
<p>Create <code class="language-plaintext highlighter-rouge">src/scss/themes/_dark.scss</code>:</p>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Dark theme variables</span>
<span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="s2">"dark"</span><span class="o">]</span> <span class="p">{</span>
<span class="na">--bs-body-bg</span><span class="p">:</span> <span class="mh">#1a1a1a</span><span class="p">;</span>
<span class="na">--bs-body-color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="na">--bs-card-bg</span><span class="p">:</span> <span class="mh">#2d2d2d</span><span class="p">;</span>
<span class="na">--bs-border-color</span><span class="p">:</span> <span class="mh">#404040</span><span class="p">;</span>
<span class="c1">// Sidebar dark theme</span>
<span class="nc">.left_col</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="mh">#0F1419</span><span class="p">;</span>
<span class="nc">.nav-link</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="mh">#CCCCCC</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">255</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">&</span><span class="nc">.active</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-primary</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Cards and panels</span>
<span class="nc">.x_panel</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-card-bg</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-border-color</span><span class="p">);</span>
<span class="nc">.x_title</span> <span class="p">{</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-border-color</span><span class="p">);</span>
<span class="nt">h2</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-body-color</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Tables</span>
<span class="nc">.table</span> <span class="p">{</span>
<span class="na">--bs-table-bg</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-card-bg</span><span class="p">);</span>
<span class="na">--bs-table-border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-border-color</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-body-color</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Forms</span>
<span class="nc">.form-control</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="mh">#3d3d3d</span><span class="p">;</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-border-color</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-body-color</span><span class="p">);</span>
<span class="k">&</span><span class="nd">:focus</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="mh">#4d4d4d</span><span class="p">;</span>
<span class="nl">border-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">bs-primary</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="theme-toggle-implementation">
<a href="#theme-toggle-implementation" class="anchor-heading" aria-labelledby="theme-toggle-implementation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Theme Toggle Implementation
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/theme-toggle.js</span>
<span class="kd">class</span> <span class="nx">ThemeToggle</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">theme</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Apply saved theme</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-theme</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span><span class="p">);</span>
<span class="c1">// Create toggle button</span>
<span class="k">this</span><span class="p">.</span><span class="nx">createToggleButton</span><span class="p">();</span>
<span class="c1">// Listen for toggle events</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">theme-toggle</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toggle</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="p">}</span>
<span class="nx">createToggleButton</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">btn btn-outline-secondary theme-toggle</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">dark</span><span class="dl">'</span>
<span class="p">?</span> <span class="dl">'</span><span class="s1"><i class="fa fa-sun"></i></span><span class="dl">'</span>
<span class="p">:</span> <span class="dl">'</span><span class="s1"><i class="fa fa-moon"></i></span><span class="dl">'</span><span class="p">;</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">toggle</span><span class="p">());</span>
<span class="c1">// Add to navbar</span>
<span class="kd">const</span> <span class="nx">navbar</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.navbar-nav</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">navbar</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">li</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">li</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">nav-item</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">li</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
<span class="nx">navbar</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">toggle</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">dark</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">light</span><span class="dl">'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-theme</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span><span class="p">);</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">theme</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span><span class="p">);</span>
<span class="c1">// Update button icon</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.theme-toggle</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">button</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">dark</span><span class="dl">'</span>
<span class="p">?</span> <span class="dl">'</span><span class="s1"><i class="fa fa-sun"></i></span><span class="dl">'</span>
<span class="p">:</span> <span class="dl">'</span><span class="s1"><i class="fa fa-moon"></i></span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Trigger custom event</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">dispatchEvent</span><span class="p">(</span><span class="k">new</span> <span class="nx">CustomEvent</span><span class="p">(</span><span class="dl">'</span><span class="s1">theme-changed</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">detail</span><span class="p">:</span> <span class="p">{</span> <span class="na">theme</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span> <span class="p">}</span>
<span class="p">}));</span>
<span class="p">}</span>
<span class="nx">getTheme</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">theme</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Initialize theme toggle</span>
<span class="k">new</span> <span class="nx">ThemeToggle</span><span class="p">();</span>
</code></pre></div></div>
<h3 id="logo-and-branding">
<a href="#logo-and-branding" class="anchor-heading" aria-labelledby="logo-and-branding"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Logo and Branding
</h3>
<h4 id="custom-logo-implementation">
<a href="#custom-logo-implementation" class="anchor-heading" aria-labelledby="custom-logo-implementation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Logo Implementation
</h4>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/scss/components/_logo.scss</span>
<span class="nc">.site_title</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">15px</span> <span class="m">20px</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$sidebar-text</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nc">.logo</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">32px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nt">img</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">object-fit</span><span class="p">:</span> <span class="n">contain</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.brand-text</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="nc">.brand-suffix</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">400</span><span class="p">;</span>
<span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="mi">.8</span><span class="p">;</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Responsive logo</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.site_title</span> <span class="p">{</span>
<span class="nc">.brand-text</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"><!-- Update logo in HTML files --></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">class=</span><span class="s">"site_title"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"logo"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"/images/logo.svg"</span> <span class="na">alt=</span><span class="s">"Your Brand"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"brand-text"</span><span class="nt">></span>
Your Brand
<span class="nt"><small</span> <span class="na">class=</span><span class="s">"brand-suffix"</span><span class="nt">></span>Admin Panel<span class="nt"></small></span>
<span class="nt"></span></span>
<span class="nt"></a></span>
</code></pre></div></div>
<h3 id="typography-customization">
<a href="#typography-customization" class="anchor-heading" aria-labelledby="typography-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Typography Customization
</h3>
<h4 id="custom-font-integration">
<a href="#custom-font-integration" class="anchor-heading" aria-labelledby="custom-font-integration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Font Integration
</h4>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/scss/base/_typography.scss</span>
<span class="c1">// Import custom fonts</span>
<span class="k">@import</span> <span class="sx">url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap')</span><span class="p">;</span>
<span class="c1">// Typography variables</span>
<span class="nv">$font-family-base</span><span class="p">:</span> <span class="s1">'Inter'</span><span class="o">,</span> <span class="s1">'Segoe UI'</span><span class="o">,</span> <span class="n">Roboto</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nv">$font-family-heading</span><span class="p">:</span> <span class="s1">'Inter'</span><span class="o">,</span> <span class="s1">'Segoe UI'</span><span class="o">,</span> <span class="n">Roboto</span><span class="o">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
<span class="nv">$font-family-monospace</span><span class="p">:</span> <span class="s1">'SF Mono'</span><span class="o">,</span> <span class="n">Monaco</span><span class="o">,</span> <span class="s1">'Cascadia Code'</span><span class="o">,</span> <span class="nb">monospace</span><span class="p">;</span>
<span class="c1">// Font sizes</span>
<span class="nv">$font-size-xs</span><span class="p">:</span> <span class="m">0</span><span class="mi">.75rem</span><span class="p">;</span> <span class="c1">// 12px</span>
<span class="nv">$font-size-sm</span><span class="p">:</span> <span class="m">0</span><span class="mi">.875rem</span><span class="p">;</span> <span class="c1">// 14px</span>
<span class="nv">$font-size-base</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="c1">// 16px</span>
<span class="nv">$font-size-lg</span><span class="p">:</span> <span class="m">1</span><span class="mi">.125rem</span><span class="p">;</span> <span class="c1">// 18px</span>
<span class="nv">$font-size-xl</span><span class="p">:</span> <span class="m">1</span><span class="mi">.25rem</span><span class="p">;</span> <span class="c1">// 20px</span>
<span class="c1">// Font weights</span>
<span class="nv">$font-weight-light</span><span class="p">:</span> <span class="m">300</span><span class="p">;</span>
<span class="nv">$font-weight-normal</span><span class="p">:</span> <span class="m">400</span><span class="p">;</span>
<span class="nv">$font-weight-medium</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="nv">$font-weight-semibold</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span>
<span class="nv">$font-weight-bold</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span>
<span class="c1">// Line heights</span>
<span class="nv">$line-height-tight</span><span class="p">:</span> <span class="m">1</span><span class="mi">.25</span><span class="p">;</span>
<span class="nv">$line-height-normal</span><span class="p">:</span> <span class="m">1</span><span class="mi">.5</span><span class="p">;</span>
<span class="nv">$line-height-relaxed</span><span class="p">:</span> <span class="m">1</span><span class="mi">.75</span><span class="p">;</span>
<span class="c1">// Apply typography</span>
<span class="nt">body</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nv">$font-family-base</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="nv">$font-size-base</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nv">$font-weight-normal</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="nv">$line-height-normal</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Headings</span>
<span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nv">$font-family-heading</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="nv">$font-weight-semibold</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="nv">$line-height-tight</span><span class="p">;</span>
<span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="mi">.5em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2</span><span class="mi">.5rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h2</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">2rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h3</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.75rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h4</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.5rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h5</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.25rem</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">h6</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="p">}</span>
<span class="c1">// Code and monospace</span>
<span class="nt">code</span><span class="o">,</span> <span class="nt">pre</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="nv">$font-family-monospace</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div><hr />
<h2 id="layout-customization">
<a href="#layout-customization" class="anchor-heading" aria-labelledby="layout-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Layout Customization
</h2>
<h3 id="sidebar-modifications">
<a href="#sidebar-modifications" class="anchor-heading" aria-labelledby="sidebar-modifications"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Sidebar Modifications
</h3>
<h4 id="collapsible-sidebar">
<a href="#collapsible-sidebar" class="anchor-heading" aria-labelledby="collapsible-sidebar"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Collapsible Sidebar
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/sidebar.js</span>
<span class="kd">class</span> <span class="nx">Sidebar</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sidebar</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.left_col</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">mainContent</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.right_col</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.sidebar-toggle</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebar-collapsed</span><span class="dl">'</span><span class="p">)</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Apply saved state</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collapse</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// Create toggle button if it doesn't exist</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">createToggleButton</span><span class="p">();</span>
<span class="p">}</span>
<span class="c1">// Add event listeners</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">?.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">toggle</span><span class="p">());</span>
<span class="c1">// Handle responsive behavior</span>
<span class="k">this</span><span class="p">.</span><span class="nx">handleResize</span><span class="p">();</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">resize</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">handleResize</span><span class="p">());</span>
<span class="p">}</span>
<span class="nx">createToggleButton</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">btn btn-link sidebar-toggle</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">button</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><i class="fa fa-bars"></i></span><span class="dl">'</span><span class="p">;</span>
<span class="c1">// Add to navbar</span>
<span class="kd">const</span> <span class="nx">navbar</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.navbar</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">navbar</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">navbar</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">button</span><span class="p">,</span> <span class="nx">navbar</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span> <span class="o">=</span> <span class="nx">button</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">toggle</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">expand</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collapse</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">collapse</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sidebar</span><span class="p">?.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">collapsed</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">mainContent</span><span class="p">?.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebar-collapsed</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebar-collapsed</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// Update toggle button icon</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><i class="fa fa-bars"></i></span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">expand</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sidebar</span><span class="p">?.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">collapsed</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">mainContent</span><span class="p">?.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebar-collapsed</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebar-collapsed</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">false</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// Update toggle button icon</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleBtn</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><i class="fa fa-times"></i></span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">handleResize</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
<span class="c1">// Auto-collapse on mobile</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">width</span> <span class="o"><</span> <span class="mi">768</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">collapse</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">width</span> <span class="o">></span> <span class="mi">1200</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">isCollapsed</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">expand</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Initialize sidebar</span>
<span class="k">new</span> <span class="nx">Sidebar</span><span class="p">();</span>
</code></pre></div></div>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/scss/components/_sidebar.scss</span>
<span class="nc">.left_col</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">230px</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0</span><span class="mi">.3s</span> <span class="n">ease</span><span class="p">;</span>
<span class="k">&</span><span class="nc">.collapsed</span> <span class="p">{</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">70px</span><span class="p">;</span>
<span class="nc">.nav_title</span> <span class="p">{</span>
<span class="nc">.brand-text</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.main_menu_side</span> <span class="p">{</span>
<span class="nc">.nav</span> <span class="o">></span> <span class="nt">li</span> <span class="o">></span> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span> <span class="m">0</span><span class="p">;</span>
<span class="nc">.menu-text</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.fa</span> <span class="p">{</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.child_menu</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.right_col</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">230px</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0</span><span class="mi">.3s</span> <span class="n">ease</span><span class="p">;</span>
<span class="k">&</span><span class="nc">.sidebar-collapsed</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">70px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span>
<span class="nc">.left_col</span> <span class="p">{</span>
<span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">-100%</span><span class="p">);</span>
<span class="k">&</span><span class="nc">.mobile-show</span> <span class="p">{</span>
<span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nc">.right_col</span> <span class="p">{</span>
<span class="nl">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="custom-menu-items">
<a href="#custom-menu-items" class="anchor-heading" aria-labelledby="custom-menu-items"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Menu Items
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/menu-builder.js</span>
<span class="kd">class</span> <span class="nx">MenuBuilder</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">menuConfig</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="nx">menuConfig</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">menuContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">#sidebar-menu</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">buildMenu</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">buildMenu</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">menuContainer</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">menuContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">sections</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">section</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">sectionElement</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSection</span><span class="p">(</span><span class="nx">section</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">menuContainer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">sectionElement</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">createSection</span><span class="p">(</span><span class="nx">section</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">sectionDiv</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">sectionDiv</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">menu_section</span><span class="dl">'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">section</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">h3</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">section</span><span class="p">.</span><span class="nx">title</span><span class="p">;</span>
<span class="nx">sectionDiv</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">title</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">menuList</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">menuList</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">nav side-menu</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">section</span><span class="p">.</span><span class="nx">items</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">menuItem</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createMenuItem</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>
<span class="nx">menuList</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">menuItem</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">sectionDiv</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">menuList</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">sectionDiv</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createMenuItem</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">li</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">);</span>
<span class="c1">// Set link properties</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">url</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Add icon</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">icon</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">icon</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">i</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">icon</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">`fa fa-</span><span class="p">${</span><span class="nx">item</span><span class="p">.</span><span class="nx">icon</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">icon</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Add text</span>
<span class="kd">const</span> <span class="nx">textSpan</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">span</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">textSpan</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">menu-text</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">textSpan</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">textSpan</span><span class="p">);</span>
<span class="c1">// Add submenu indicator</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">children</span> <span class="o">&&</span> <span class="nx">item</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">chevron</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">span</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">chevron</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">fa fa-chevron-down</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">chevron</span><span class="p">);</span>
<span class="c1">// Create submenu</span>
<span class="kd">const</span> <span class="nx">submenu</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSubmenu</span><span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">children</span><span class="p">);</span>
<span class="nx">li</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">submenu</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Add click handler for submenus</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">.</span><span class="nx">children</span> <span class="o">&&</span> <span class="nx">item</span><span class="p">.</span><span class="nx">children</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">toggleSubmenu</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">li</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">li</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createSubmenu</span><span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">ul</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">ul</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">nav child_menu</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">ul</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">items</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">li</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">url</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">#</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
<span class="nx">li</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="nx">ul</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">ul</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">toggleSubmenu</span><span class="p">(</span><span class="nx">parentLi</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">submenu</span> <span class="o">=</span> <span class="nx">parentLi</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.child_menu</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">chevron</span> <span class="o">=</span> <span class="nx">parentLi</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.fa-chevron-down, .fa-chevron-up</span><span class="dl">'</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">submenu</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">submenu</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">chevron</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">chevron</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">'</span><span class="s1">chevron-down</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">chevron-up</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">submenu</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">chevron</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="nx">chevron</span><span class="p">.</span><span class="nx">className</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="dl">'</span><span class="s1">chevron-up</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">chevron-down</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Menu configuration</span>
<span class="kd">const</span> <span class="nx">menuConfig</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">sections</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">General</span><span class="dl">'</span><span class="p">,</span>
<span class="na">items</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Dashboard</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">home</span><span class="dl">'</span><span class="p">,</span>
<span class="na">children</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Dashboard 1</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">index.html</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Dashboard 2</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">index2.html</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Dashboard 3</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">index3.html</span><span class="dl">'</span> <span class="p">}</span>
<span class="p">]</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Analytics</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bar-chart-o</span><span class="dl">'</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">analytics.html</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Forms</span><span class="dl">'</span><span class="p">,</span>
<span class="na">items</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Form Elements</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">edit</span><span class="dl">'</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">form.html</span><span class="dl">'</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Form Validation</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">check-square-o</span><span class="dl">'</span><span class="p">,</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">form_validation.html</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">};</span>
<span class="c1">// Initialize menu</span>
<span class="k">new</span> <span class="nx">MenuBuilder</span><span class="p">(</span><span class="nx">menuConfig</span><span class="p">);</span>
</code></pre></div></div>
<h3 id="header-customization">
<a href="#header-customization" class="anchor-heading" aria-labelledby="header-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Header Customization
</h3>
<h4 id="custom-navigation-bar">
<a href="#custom-navigation-bar" class="anchor-heading" aria-labelledby="custom-navigation-bar"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Navigation Bar
</h4>
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/scss/components/_navbar.scss</span>
<span class="nc">.nav_menu</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="mh">#ffffff</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="mh">#E6E9ED</span><span class="p">;</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">4px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nc">.navbar-nav</span> <span class="p">{</span>
<span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="nc">.nav-item</span> <span class="p">{</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span>
<span class="nc">.nav-link</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">12px</span><span class="p">;</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span>
<span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0</span><span class="mi">.2s</span> <span class="n">ease</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">115</span><span class="o">,</span> <span class="m">135</span><span class="o">,</span> <span class="m">156</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// User dropdown</span>
<span class="k">&</span><span class="nc">.dropdown</span> <span class="p">{</span>
<span class="nc">.dropdown-menu</span> <span class="p">{</span>
<span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">8px</span> <span class="m">24px</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="mi">.15</span><span class="p">);</span>
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
<span class="nc">.dropdown-item</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span> <span class="m">20px</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">115</span><span class="o">,</span> <span class="m">135</span><span class="o">,</span> <span class="m">156</span><span class="o">,</span> <span class="m">0</span><span class="mi">.1</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Breadcrumb</span>
<span class="nc">.breadcrumb</span> <span class="p">{</span>
<span class="nl">background</span><span class="p">:</span> <span class="nb">transparent</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nc">.breadcrumb-item</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="mh">#566573</span><span class="p">;</span>
<span class="k">&</span><span class="nc">.active</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span>
<span class="nl">font-weight</span><span class="p">:</span> <span class="m">500</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="mh">#566573</span><span class="p">;</span>
<span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
<span class="k">&</span><span class="nd">:hover</span> <span class="p">{</span>
<span class="nl">color</span><span class="p">:</span> <span class="nv">$primary</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="search-functionality">
<a href="#search-functionality" class="anchor-heading" aria-labelledby="search-functionality"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Search Functionality
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/search.js</span>
<span class="kd">class</span> <span class="nx">GlobalSearch</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchInput</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">global-search</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">search-results</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchData</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">async</span> <span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="c1">// Load search data</span>
<span class="k">await</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadSearchData</span><span class="p">();</span>
<span class="c1">// Add event listeners</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">,</span>
<span class="k">this</span><span class="p">.</span><span class="nx">debounce</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSearch</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span> <span class="mi">300</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">focus</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">showResults</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">hideResults</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">async</span> <span class="nx">loadSearchData</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Load searchable content</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchData</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Dashboard</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">index.html</span><span class="dl">'</span><span class="p">,</span> <span class="na">category</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Page</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Form Elements</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">form.html</span><span class="dl">'</span><span class="p">,</span> <span class="na">category</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Page</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Tables</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">tables.html</span><span class="dl">'</span><span class="p">,</span> <span class="na">category</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Page</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Charts</span><span class="dl">'</span><span class="p">,</span> <span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">chartjs.html</span><span class="dl">'</span><span class="p">,</span> <span class="na">category</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Page</span><span class="dl">'</span> <span class="p">},</span>
<span class="c1">// Add more searchable items</span>
<span class="p">];</span>
<span class="p">}</span>
<span class="nx">handleSearch</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">trim</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">query</span><span class="p">.</span><span class="nx">length</span> <span class="o"><</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hideResults</span><span class="p">();</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">searchData</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">item</span> <span class="o">=></span>
<span class="nx">item</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="o">||</span>
<span class="nx">item</span><span class="p">.</span><span class="nx">category</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">().</span><span class="nx">includes</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span>
<span class="p">).</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">displayResults</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">query</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">displayResults</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">noResults</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">noResults</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">search-no-results</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">noResults</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">No results found</span><span class="dl">'</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">noResults</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">result</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">item</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createResultItem</span><span class="p">(</span><span class="nx">result</span><span class="p">,</span> <span class="nx">query</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">showResults</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">createResultItem</span><span class="p">(</span><span class="nx">result</span><span class="p">,</span> <span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">item</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">item</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">search-result-item</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">item</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">url</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">search-result-title</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">title</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">highlightQuery</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="nx">query</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">category</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">category</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">search-result-category</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">category</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">category</span><span class="p">;</span>
<span class="nx">item</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">title</span><span class="p">);</span>
<span class="nx">item</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">category</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">item</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">highlightQuery</span><span class="p">(</span><span class="nx">text</span><span class="p">,</span> <span class="nx">query</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">regex</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">`(</span><span class="p">${</span><span class="nx">query</span><span class="p">}</span><span class="s2">)`</span><span class="p">,</span> <span class="dl">'</span><span class="s1">gi</span><span class="dl">'</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">text</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">regex</span><span class="p">,</span> <span class="dl">'</span><span class="s1"><mark>$1</mark></span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">showResults</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">hideResults</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">event</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">searchResults</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">debounce</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">let</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="nx">executedFunction</span><span class="p">(...</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">later</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">func</span><span class="p">(...</span><span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">later</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Initialize search</span>
<span class="k">new</span> <span class="nx">GlobalSearch</span><span class="p">();</span>
</code></pre></div></div><hr />
<h2 id="component-customization">
<a href="#component-customization" class="anchor-heading" aria-labelledby="component-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Component Customization
</h2>
<h3 id="custom-dashboard-widgets">
<a href="#custom-dashboard-widgets" class="anchor-heading" aria-labelledby="custom-dashboard-widgets"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Dashboard Widgets
</h3>
<h4 id="widget-factory">
<a href="#widget-factory" class="anchor-heading" aria-labelledby="widget-factory"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Widget Factory
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/widgets/widget-factory.js</span>
<span class="kd">class</span> <span class="nx">WidgetFactory</span> <span class="p">{</span>
<span class="kd">static</span> <span class="nx">createWidget</span><span class="p">(</span><span class="nx">type</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">stat</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">StatWidget</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">chart</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">ChartWidget</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">list</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">ListWidget</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">progress</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">new</span> <span class="nx">ProgressWidget</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="nl">default</span><span class="p">:</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s2">`Unknown widget type: </span><span class="p">${</span><span class="nx">type</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">class</span> <span class="nx">BaseWidget</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="nx">config</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">render</span><span class="p">(</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">container</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">afterRender</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">template</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="dl">'</span><span class="s1"><div>Base Widget</div></span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">afterRender</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Override in subclasses</span>
<span class="p">}</span>
<span class="nx">destroy</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">class</span> <span class="nx">StatWidget</span> <span class="kd">extends</span> <span class="nx">BaseWidget</span> <span class="p">{</span>
<span class="nx">template</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`
<div class="x_panel tile fixed_height_320">
<div class="x_title">
<h2></span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="s2"></h2>
</div>
<div class="x_content">
<div class="widget-stat">
<div class="stat-icon">
<i class="fa fa-</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">icon</span><span class="p">}</span><span class="s2">"></i>
</div>
<div class="stat-content">
<div class="stat-value"></span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span><span class="s2"></div>
<div class="stat-label"></span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">label</span><span class="p">}</span><span class="s2"></div>
</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">change</span> <span class="p">?</span> <span class="s2">`
<div class="stat-change </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">change</span> <span class="o">></span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">positive</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">negative</span><span class="dl">'</span><span class="p">}</span><span class="s2">">
<i class="fa fa-</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">change</span> <span class="o">></span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">arrow-up</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">arrow-down</span><span class="dl">'</span><span class="p">}</span><span class="s2">"></i>
</span><span class="p">${</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">change</span><span class="p">)}</span><span class="s2">%
</div>
`</span> <span class="p">:</span> <span class="dl">''</span><span class="p">}</span><span class="s2">
</div>
</div>
</div>
</div>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">class</span> <span class="nx">ChartWidget</span> <span class="kd">extends</span> <span class="nx">BaseWidget</span> <span class="p">{</span>
<span class="nx">template</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">`
<div class="x_panel">
<div class="x_title">
<h2></span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">title</span><span class="p">}</span><span class="s2"></h2>
</div>
<div class="x_content">
<canvas id="chart-</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="s2">" width="400" height="200"></canvas>
</div>
</div>
`</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">afterRender</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">initChart</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">async</span> <span class="nx">initChart</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="p">{</span> <span class="nx">Chart</span> <span class="p">}</span> <span class="o">=</span> <span class="k">await</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">chart.js/auto</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">ctx</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">`chart-</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span>
<span class="k">new</span> <span class="nx">Chart</span><span class="p">(</span><span class="nx">ctx</span><span class="p">,</span> <span class="p">{</span>
<span class="na">type</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">chartType</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">line</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span>
<span class="na">options</span><span class="p">:</span> <span class="p">{</span>
<span class="na">responsive</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">maintainAspectRatio</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="p">...</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">options</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div></div>
<h4 id="widget-configuration">
<a href="#widget-configuration" class="anchor-heading" aria-labelledby="widget-configuration"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Widget Configuration
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/dashboard-config.js</span>
<span class="kd">const</span> <span class="nx">dashboardConfig</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">widgets</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">users-stat</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">stat</span><span class="dl">'</span><span class="p">,</span>
<span class="na">grid</span><span class="p">:</span> <span class="p">{</span> <span class="na">x</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="na">y</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="na">w</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">h</span><span class="p">:</span> <span class="mi">1</span> <span class="p">},</span>
<span class="na">config</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Total Users</span><span class="dl">'</span><span class="p">,</span>
<span class="na">value</span><span class="p">:</span> <span class="dl">'</span><span class="s1">2,564</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Active Users</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">users</span><span class="dl">'</span><span class="p">,</span>
<span class="na">change</span><span class="p">:</span> <span class="mf">12.5</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">revenue-stat</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">stat</span><span class="dl">'</span><span class="p">,</span>
<span class="na">grid</span><span class="p">:</span> <span class="p">{</span> <span class="na">x</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">y</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="na">w</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">h</span><span class="p">:</span> <span class="mi">1</span> <span class="p">},</span>
<span class="na">config</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Revenue</span><span class="dl">'</span><span class="p">,</span>
<span class="na">value</span><span class="p">:</span> <span class="dl">'</span><span class="s1">$52,147</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">This Month</span><span class="dl">'</span><span class="p">,</span>
<span class="na">icon</span><span class="p">:</span> <span class="dl">'</span><span class="s1">dollar</span><span class="dl">'</span><span class="p">,</span>
<span class="na">change</span><span class="p">:</span> <span class="o">-</span><span class="mf">3.2</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">id</span><span class="p">:</span> <span class="dl">'</span><span class="s1">sales-chart</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">chart</span><span class="dl">'</span><span class="p">,</span>
<span class="na">grid</span><span class="p">:</span> <span class="p">{</span> <span class="na">x</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span> <span class="na">y</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">w</span><span class="p">:</span> <span class="mi">6</span><span class="p">,</span> <span class="na">h</span><span class="p">:</span> <span class="mi">2</span> <span class="p">},</span>
<span class="na">config</span><span class="p">:</span> <span class="p">{</span>
<span class="na">title</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Sales Overview</span><span class="dl">'</span><span class="p">,</span>
<span class="na">chartType</span><span class="p">:</span> <span class="dl">'</span><span class="s1">line</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">labels</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Jan</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Feb</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Mar</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Apr</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">May</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Jun</span><span class="dl">'</span><span class="p">],</span>
<span class="na">datasets</span><span class="p">:</span> <span class="p">[{</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Sales</span><span class="dl">'</span><span class="p">,</span>
<span class="na">data</span><span class="p">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">],</span>
<span class="na">borderColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#73879C</span><span class="dl">'</span><span class="p">,</span>
<span class="na">backgroundColor</span><span class="p">:</span> <span class="dl">'</span><span class="s1">rgba(115, 135, 156, 0.1)</span><span class="dl">'</span>
<span class="p">}]</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">]</span>
<span class="p">};</span>
<span class="c1">// Initialize dashboard</span>
<span class="kd">class</span> <span class="nx">Dashboard</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span> <span class="o">=</span> <span class="nx">config</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">widgets</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">dashboard-container</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">init</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">createGrid</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">renderWidgets</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">createGrid</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">dashboard-grid</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">renderWidgets</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">widgets</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">widgetConfig</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">widget</span> <span class="o">=</span> <span class="nx">WidgetFactory</span><span class="p">.</span><span class="nx">createWidget</span><span class="p">(</span>
<span class="nx">widgetConfig</span><span class="p">.</span><span class="nx">type</span><span class="p">,</span>
<span class="nx">widgetConfig</span><span class="p">.</span><span class="nx">config</span>
<span class="p">);</span>
<span class="kd">const</span> <span class="nx">widgetContainer</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createWidgetContainer</span><span class="p">(</span><span class="nx">widgetConfig</span><span class="p">);</span>
<span class="nx">widget</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">widgetContainer</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">widgets</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">widgetConfig</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">widget</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">createWidgetContainer</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">dashboard-widget</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">gridColumn</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2"> / </span><span class="p">${</span><span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">x</span> <span class="o">+</span> <span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">w</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">gridRow</span> <span class="o">=</span> <span class="s2">`</span><span class="p">${</span><span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">y</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2"> / </span><span class="p">${</span><span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">y</span> <span class="o">+</span> <span class="nx">config</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">1</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">container</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">container</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Initialize dashboard</span>
<span class="k">new</span> <span class="nx">Dashboard</span><span class="p">(</span><span class="nx">dashboardConfig</span><span class="p">).</span><span class="nx">init</span><span class="p">();</span>
</code></pre></div></div>
<h3 id="form-builder">
<a href="#form-builder" class="anchor-heading" aria-labelledby="form-builder"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Form Builder
</h3>
<h4 id="dynamic-form-generator">
<a href="#dynamic-form-generator" class="anchor-heading" aria-labelledby="dynamic-form-generator"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Dynamic Form Generator
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/forms/form-builder.js</span>
<span class="kd">class</span> <span class="nx">FormBuilder</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">(</span><span class="nx">container</span><span class="p">,</span> <span class="nx">schema</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">container</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">schema</span> <span class="o">=</span> <span class="nx">schema</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">build</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">form</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">dynamic-form</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-validate</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">true</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">schema</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">fieldConfig</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createField</span><span class="p">(</span><span class="nx">fieldConfig</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="p">});</span>
<span class="c1">// Add submit button</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">schema</span><span class="p">.</span><span class="nx">submit</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">submitBtn</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSubmitButton</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">schema</span><span class="p">.</span><span class="nx">submit</span><span class="p">);</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">submitBtn</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">form</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">initializeValidation</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">form</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createField</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">fieldContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">fieldContainer</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-group row mb-3</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">// Create label</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">label</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">label</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">label</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">label</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">col-form-label col-md-3 col-sm-3</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">label</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
<span class="nx">label</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">for</span><span class="dl">'</span><span class="p">,</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">fieldContainer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">label</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// Create field wrapper</span>
<span class="kd">const</span> <span class="nx">fieldWrapper</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">fieldWrapper</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">col-md-6 col-sm-6</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">// Create field based on type</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createFieldByType</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="nx">fieldWrapper</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="c1">// Add help text</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">help</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">helpText</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">small</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">helpText</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-text text-muted</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">helpText</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">help</span><span class="p">;</span>
<span class="nx">fieldWrapper</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">helpText</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">fieldContainer</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">fieldWrapper</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="nx">field</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">fieldContainer</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createFieldByType</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">text</span><span class="dl">'</span><span class="p">:</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">email</span><span class="dl">'</span><span class="p">:</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">password</span><span class="dl">'</span><span class="p">:</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">number</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createInput</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">textarea</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createTextarea</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">select</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSelect</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">checkbox</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createCheckbox</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">radio</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createRadioGroup</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">file</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createFileInput</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="k">case</span> <span class="dl">'</span><span class="s1">date</span><span class="dl">'</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createDateInput</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="nl">default</span><span class="p">:</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">createInput</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">createInput</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">type</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">text</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-control</span><span class="dl">'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">placeholder</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">required</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">required</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">pattern</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">pattern</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">pattern</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">min</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">min</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">min</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">max</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">max</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">max</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">input</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createSelect</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">select</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">select</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-control</span><span class="dl">'</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">multiple</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">multiple</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">className</span> <span class="o">+=</span> <span class="dl">'</span><span class="s1"> select2</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">placeholderOption</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">option</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">placeholderOption</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
<span class="nx">placeholderOption</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">;</span>
<span class="nx">placeholderOption</span><span class="p">.</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">placeholderOption</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">placeholderOption</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">config</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">option</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">optionElement</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">option</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">optionElement</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">option</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="nx">optionElement</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">option</span><span class="p">.</span><span class="nx">label</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">option</span><span class="p">.</span><span class="nx">selected</span><span class="p">)</span> <span class="nx">optionElement</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">select</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">optionElement</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">select</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">createTextarea</span><span class="p">(</span><span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">textarea</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">textarea</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">textarea</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">textarea</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
<span class="nx">textarea</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-control</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">textarea</span><span class="p">.</span><span class="nx">rows</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">rows</span> <span class="o">||</span> <span class="mi">4</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">)</span> <span class="nx">textarea</span><span class="p">.</span><span class="nx">placeholder</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">placeholder</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="nx">textarea</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">config</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">config</span><span class="p">.</span><span class="nx">required</span><span class="p">)</span> <span class="nx">textarea</span><span class="p">.</span><span class="nx">required</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">textarea</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">getData</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">field</span><span class="p">,</span> <span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">checkbox</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">radio</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">checked</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">`input[name="</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">"]:checked`</span><span class="p">);</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">checked</span> <span class="p">?</span> <span class="nx">checked</span><span class="p">.</span><span class="nx">value</span> <span class="p">:</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">setData</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">data</span><span class="p">).</span><span class="nx">forEach</span><span class="p">(([</span><span class="nx">name</span><span class="p">,</span> <span class="nx">value</span><span class="p">])</span> <span class="o">=></span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">field</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">checkbox</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">initializeValidation</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Initialize form validation if Parsley is available</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">Parsley</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">form</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">form</span><span class="p">).</span><span class="nx">parsley</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Form schema example</span>
<span class="kd">const</span> <span class="nx">userFormSchema</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">fields</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">firstName</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">text</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">First Name</span><span class="dl">'</span><span class="p">,</span>
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Enter first name</span><span class="dl">'</span><span class="p">,</span>
<span class="na">required</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">email</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">email</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Email Address</span><span class="dl">'</span><span class="p">,</span>
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Enter email</span><span class="dl">'</span><span class="p">,</span>
<span class="na">required</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">role</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">select</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Role</span><span class="dl">'</span><span class="p">,</span>
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Select role</span><span class="dl">'</span><span class="p">,</span>
<span class="na">options</span><span class="p">:</span> <span class="p">[</span>
<span class="p">{</span> <span class="na">value</span><span class="p">:</span> <span class="dl">'</span><span class="s1">admin</span><span class="dl">'</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Administrator</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">value</span><span class="p">:</span> <span class="dl">'</span><span class="s1">user</span><span class="dl">'</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">User</span><span class="dl">'</span> <span class="p">},</span>
<span class="p">{</span> <span class="na">value</span><span class="p">:</span> <span class="dl">'</span><span class="s1">moderator</span><span class="dl">'</span><span class="p">,</span> <span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Moderator</span><span class="dl">'</span> <span class="p">}</span>
<span class="p">],</span>
<span class="na">required</span><span class="p">:</span> <span class="kc">true</span>
<span class="p">},</span>
<span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">bio</span><span class="dl">'</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">textarea</span><span class="dl">'</span><span class="p">,</span>
<span class="na">label</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Biography</span><span class="dl">'</span><span class="p">,</span>
<span class="na">placeholder</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Tell us about yourself</span><span class="dl">'</span><span class="p">,</span>
<span class="na">rows</span><span class="p">:</span> <span class="mi">4</span>
<span class="p">}</span>
<span class="p">],</span>
<span class="na">submit</span><span class="p">:</span> <span class="p">{</span>
<span class="na">text</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Create User</span><span class="dl">'</span><span class="p">,</span>
<span class="na">className</span><span class="p">:</span> <span class="dl">'</span><span class="s1">btn btn-primary</span><span class="dl">'</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// Usage</span>
<span class="kd">const</span> <span class="nx">formContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">form-container</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">formBuilder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FormBuilder</span><span class="p">(</span><span class="nx">formContainer</span><span class="p">,</span> <span class="nx">userFormSchema</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nx">formBuilder</span><span class="p">.</span><span class="nx">build</span><span class="p">();</span>
</code></pre></div></div><hr />
<h2 id="advanced-customization">
<a href="#advanced-customization" class="anchor-heading" aria-labelledby="advanced-customization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Advanced Customization
</h2>
<h3 id="plugin-system">
<a href="#plugin-system" class="anchor-heading" aria-labelledby="plugin-system"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Plugin System
</h3>
<h4 id="plugin-architecture">
<a href="#plugin-architecture" class="anchor-heading" aria-labelledby="plugin-architecture"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Plugin Architecture
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/core/plugin-system.js</span>
<span class="kd">class</span> <span class="nx">PluginSystem</span> <span class="p">{</span>
<span class="kd">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">plugins</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hooks</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">registerPlugin</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">plugin</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">name</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">warn</span><span class="p">(</span><span class="s2">`Plugin </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2"> already registered`</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="c1">// Initialize plugin</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">plugin</span><span class="p">.</span><span class="nx">init</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">function</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">plugin</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">plugin</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`Plugin </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2"> registered successfully`</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">getPlugin</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">plugins</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addHook</span><span class="p">(</span><span class="nx">hookName</span><span class="p">,</span> <span class="nx">callback</span><span class="p">,</span> <span class="nx">priority</span> <span class="o">=</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">hookName</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="nx">hookName</span><span class="p">,</span> <span class="p">[]);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">hookName</span><span class="p">).</span><span class="nx">push</span><span class="p">({</span> <span class="nx">callback</span><span class="p">,</span> <span class="nx">priority</span> <span class="p">});</span>
<span class="c1">// Sort by priority</span>
<span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">hookName</span><span class="p">).</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span><span class="p">.</span><span class="nx">priority</span> <span class="o">-</span> <span class="nx">b</span><span class="p">.</span><span class="nx">priority</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">async</span> <span class="nx">executeHook</span><span class="p">(</span><span class="nx">hookName</span><span class="p">,</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{})</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">hookName</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">hooks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">hookName</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">data</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">hook</span> <span class="k">of</span> <span class="nx">hooks</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">hookResult</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">hook</span><span class="p">.</span><span class="nx">callback</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hookResult</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">result</span> <span class="o">=</span> <span class="nx">hookResult</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s2">`Error in hook </span><span class="p">${</span><span class="nx">hookName</span><span class="p">}</span><span class="s2">:`</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">removeHook</span><span class="p">(</span><span class="nx">hookName</span><span class="p">,</span> <span class="nx">callback</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="nx">has</span><span class="p">(</span><span class="nx">hookName</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">hooks</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">hooks</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="nx">hookName</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">index</span> <span class="o">=</span> <span class="nx">hooks</span><span class="p">.</span><span class="nx">findIndex</span><span class="p">(</span><span class="nx">hook</span> <span class="o">=></span> <span class="nx">hook</span><span class="p">.</span><span class="nx">callback</span> <span class="o">===</span> <span class="nx">callback</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">hooks</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// Global plugin system instance</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">GentelellaPlugins</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">PluginSystem</span><span class="p">();</span>
</code></pre></div></div>
<h4 id="example-plugin">
<a href="#example-plugin" class="anchor-heading" aria-labelledby="example-plugin"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Example Plugin
</h4>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// src/js/plugins/notification-plugin.js</span>
<span class="kd">const</span> <span class="nx">NotificationPlugin</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">notifications</span><span class="dl">'</span><span class="p">,</span>
<span class="nx">init</span><span class="p">(</span><span class="nx">pluginSystem</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">pluginSystem</span> <span class="o">=</span> <span class="nx">pluginSystem</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">notifications</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">bindHooks</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">createContainer</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">notification-container</span><span class="dl">'</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">notification-container</span><span class="dl">'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">bindHooks</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Hook into form submissions</span>
<span class="k">this</span><span class="p">.</span><span class="nx">pluginSystem</span><span class="p">.</span><span class="nx">addHook</span><span class="p">(</span><span class="dl">'</span><span class="s1">form.submit.success</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="dl">'</span><span class="s1">Form submitted successfully!</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">success</span><span class="dl">'</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">pluginSystem</span><span class="p">.</span><span class="nx">addHook</span><span class="p">(</span><span class="dl">'</span><span class="s1">form.submit.error</span><span class="dl">'</span><span class="p">,</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="dl">'</span><span class="s1">Error submitting form</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">error</span><span class="dl">'</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">show</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">type</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">info</span><span class="dl">'</span><span class="p">,</span> <span class="nx">duration</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">notification</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">div</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s2">`notification notification-</span><span class="p">${</span><span class="nx">type</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`
<div class="notification-content">
<i class="fa fa-</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">getIcon</span><span class="p">(</span><span class="nx">type</span><span class="p">)}</span><span class="s2">"></i>
<span></span><span class="p">${</span><span class="nx">message</span><span class="p">}</span><span class="s2"></span>
<button class="notification-close">&times;</button>
</div>
`</span><span class="p">;</span>
<span class="c1">// Add close functionality</span>
<span class="kd">const</span> <span class="nx">closeBtn</span> <span class="o">=</span> <span class="nx">notification</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">.notification-close</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">closeBtn</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">notification</span><span class="p">));</span>
<span class="c1">// Auto remove after duration</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">notification</span><span class="p">),</span> <span class="nx">duration</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">container</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">notification</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">notifications</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">notification</span><span class="p">);</span>
<span class="c1">// Animate in</span>
<span class="nx">requestAnimationFrame</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">notification-show</span><span class="dl">'</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">remove</span><span class="p">(</span><span class="nx">notification</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="dl">'</span><span class="s1">notification-hide</span><span class="dl">'</span><span class="p">);</span>
<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">notification</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">notification</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">notification</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">notifications</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">notification</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">notifications</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span> <span class="mi">300</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">getIcon</span><span class="p">(</span><span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">icons</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">success</span><span class="p">:</span> <span class="dl">'</span><span class="s1">check-circle</span><span class="dl">'</span><span class="p">,</span>
<span class="na">error</span><span class="p">:</span> <span class="dl">'</span><span class="s1">exclamation-circle</span><span class="dl">'</span><span class="p">,</span>
<span class="na">warning</span><span class="p">:</span> <span class="dl">'</span><span class="s1">exclamation-triangle</span><span class="dl">'</span><span class="p">,</span>
<span class="na">info</span><span class="p">:</span> <span class="dl">'</span><span class="s1">info-circle</span><span class="dl">'</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">icons</span><span class="p">[</span><span class="nx">type</span><span class="p">]</span> <span class="o">||</span> <span class="nx">icons</span><span class="p">.</span><span class="nx">info</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="c1">// Register plugin</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">GentelellaPlugins</span><span class="p">.</span><span class="nx">registerPlugin</span><span class="p">(</span><span class="dl">'</span><span class="s1">notifications</span><span class="dl">'</span><span class="p">,</span> <span class="nx">NotificationPlugin</span><span class="p">);</span>
</code></pre></div></div><hr />
<h2 id="next-steps">
<a href="#next-steps" class="anchor-heading" aria-labelledby="next-steps"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Next Steps
</h2>
<ul>
<li><strong><a href="/gentelella/docs/api-integration/">API Integration</a></strong> - Connect with backend APIs</li>
<li><strong><a href="/gentelella/docs/security/">Security Guide</a></strong> - Implement security best practices</li>
<li><strong><a href="/gentelella/docs/testing/">Testing Guide</a></strong> - Test your customizations</li>
</ul><hr />
<p class="highlight">💡 <strong>Pro Tip</strong>: Start with small customizations and gradually build complexity. Always test your changes across different screen sizes and browsers to ensure compatibility.</p>
</main>
<hr>
<footer>
<p><a href="#top" id="back-to-top">Back to top</a></p>
<p class="text-small text-grey-dk-100 mb-0">Copyright © {{ 'now' | date: '%Y' }} Colorlib. Distributed under the <a href="https://github.com/puikinsh/gentelella/blob/master/LICENSE.txt">MIT license</a>.</p>
</footer>
</div>
</div>
<div class="search-overlay"></div>
</div>
</body>
</html>