release: WRNexusJS 0.5.10

packages/ui/components/Sidebar.wrn

@@ -3,18 +3,77 @@ component Sidebar {
     @event toggle = function
     @event open = function
     @event close = function
+    @event select = function
     size = "default"
     color = "primary"
     label = "Sidebar"
     items = []
     active = ""
     orientation = "horizontal"
+    mobileLabel = "Open navigation"
     class = ""
   }
+
+  state mobileOpen = false
+
+  functions {
+    function toggleSidebar() {
+      mobileOpen = !mobileOpen
+      $emit("toggle", { open: mobileOpen })
+      $emit(mobileOpen ? "open" : "close", { source: "mobile" })
+    }
+
+    function closeSidebar() {
+      mobileOpen = false
+      $emit("close", { source: "mobile" })
+    }
+
+    function selectItem(item, level) {
+      mobileOpen = false
+      $emit("select", { item: item, value: item.value || "", level: level })
+    }
+  }
+
   view {
-    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--sidebar wire-next--{orientation} {class}" aria-label="{label}">
-      {#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
-      <slot />
-    </nav>
+    <div class="wire-sidebar-shell wire-next--color-{color} wire-next--size-{size} {mobileOpen ? 'is-open' : ''} {class}">
+      <button type="button" class="wire-sidebar-toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleSidebar()">
+        <span class="icon-[lucide--panel-left-open]" aria-hidden="true"></span>
+        <span>{label}</span>
+      </button>
+      <button type="button" class="wire-sidebar-backdrop" aria-label="Close navigation" @click="closeSidebar()"></button>
+      <nav class="wire-next wire-next--sidebar wire-next--{orientation} wire-sidebar-panel" aria-label="{label}">
+        <div class="wire-sidebar-panel__head">
+          <strong>{label}</strong>
+          <button type="button" aria-label="Close navigation" @click="closeSidebar()"><span class="icon-[lucide--x]" aria-hidden="true"></span></button>
+        </div>
+        <div class="wire-sidebar-items">
+          {#each items as item}
+            {#if item.children && item.children.length}
+              <details class="wire-sidebar-group" name="wire-sidebar-group">
+                <summary>
+                  {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                  <span>{item.label}</span>
+                  <span class="icon-[lucide--chevron-down]" aria-hidden="true"></span>
+                </summary>
+                <div class="wire-sidebar-group__children">
+                  {#each item.children as child}
+                    <a href="{child.href || '#'}" aria-current="{child.value === active ? 'page' : ''}" @click="selectItem(child, 2)">
+                      {#if child.icon}<span class="{child.icon}" aria-hidden="true"></span>{/if}
+                      <span>{child.label}</span>
+                    </a>
+                  {/each}
+                </div>
+              </details>
+            {:else}
+              <a href="{item.href || '#'}" aria-current="{item.value === active ? 'page' : ''}" @click="selectItem(item, 1)">
+                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
+                <span>{item.label}</span>
+              </a>
+            {/if}
+          {/each}
+        </div>
+        <slot />
+      </nav>
+    </div>
   }
 }