@kodaris/krubble-app-components 1.0.53 → 1.0.55

package/dist/krubble-app.umd.js

@@ -331,6 +331,7 @@
    * @property {'light'|'dark'} scheme - Color scheme: 'light' (default) or 'dark'
    * @property {KRNavItem[]} nav - Navigation items as JSON array
    * @property {KRUser} user - User profile data
+   * @property {boolean} navEnabled - Whether to show the nav drawer (menu toggle remains visible when false)
    *
    *
    * TODO
@@ -378,6 +379,11 @@
            * Whether to show the subbar with menu toggle
            */
           this.subbar = false;
+          /**
+           * Whether to hide the navigation drawer.
+           * Menu toggle button remains visible and emits menu-click events.
+           */
+          this.navEnabled = true;
           /**
            * Breadcrumbs to display in the subbar
            */
@@ -1342,52 +1348,54 @@
       ` : A}
 
       <div class="wrapper">
-        <nav class=${e({
+        ${this.navEnabled ? b `
+          <nav class=${e({
             'nav': true,
             'nav--scrolled': this.isNavScrolled,
             'nav--opened': !this.subbar || this.isNavOpened,
         })}>
-          <div class="nav-header" @click=${this.handleNavHeaderClick}>
-            ${this.label
+            <div class="nav-header" @click=${this.handleNavHeaderClick}>
+              ${this.label
             ? b `<span class="nav-title">${this.label}</span>`
             : this.logo
                 ? b `<img class="nav-logo" src=${this.logo} alt="Logo" />`
                 : A}
-          </div>
-          <div class="nav-content" @scroll=${this.handleNavScroll}>
-            ${totalTopLevelItems > 20 ? b `
-              <div class="nav-search">
-                <div class="nav-search__wrapper">
-                  <span class="nav-search__icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
-                    </svg>
-                  </span>
-                  <input
-                    class="nav-search__input"
-                    type="text"
-                    placeholder="Search..."
-                    .value=${this.navQuery}
-                    @input=${this.handleNavQueryChange}
-                  />
-                  ${this.navQuery ? b `
-                    <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
+            </div>
+            <div class="nav-content" @scroll=${this.handleNavScroll}>
+              ${totalTopLevelItems > 20 ? b `
+                <div class="nav-search">
+                  <div class="nav-search__wrapper">
+                    <span class="nav-search__icon">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                       </svg>
-                    </button>
-                  ` : A}
+                    </span>
+                    <input
+                      class="nav-search__input"
+                      type="text"
+                      placeholder="Search..."
+                      .value=${this.navQuery}
+                      @input=${this.handleNavQueryChange}
+                    />
+                    ${this.navQuery ? b `
+                      <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                        </svg>
+                      </button>
+                    ` : A}
+                  </div>
                 </div>
+              ` : A}
+              <div class="nav-items">
+                ${topLevelItems.map((item) => this.renderNavItem(item))}
               </div>
-            ` : A}
-            <div class="nav-items">
-              ${topLevelItems.map((item) => this.renderNavItem(item))}
             </div>
-          </div>
-          <!-- <div class="nav-footer">
-            ${this.isEditing ? this.renderEditFooter() : this.renderNormalFooter()}
-          </div> -->
-        </nav>
+            <!-- <div class="nav-footer">
+              ${this.isEditing ? this.renderEditFooter() : this.renderNormalFooter()}
+            </div> -->
+          </nav>
+        ` : A}
 
         <main class="main">
           <slot></slot>
@@ -2186,6 +2194,9 @@
   __decorate$4([
       n({ type: Boolean })
   ], exports.Scaffold.prototype, "subbar", void 0);
+  __decorate$4([
+      n({ type: Boolean, attribute: 'nav-enabled' })
+  ], exports.Scaffold.prototype, "navEnabled", void 0);
   __decorate$4([
       n({ type: Array })
   ], exports.Scaffold.prototype, "breadcrumbs", void 0);