WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): repair sidebar drawer, dropdown focus and footer slots

Browse Source
This commit is contained in:
Clintchiz committed 2026-08-26 12:03:50 +05:30
1 parent f7fe3bb17b
commit 6acf78a72c
8 files changed
+378 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/Sidebar.wrn
+113 -11
View File
@@ -30,6 +30,8 @@ component Sidebar {
active: string = ""
mobileLabel: string = "Open navigation"
drawerTitle: string = "Navigation"
mobile: boolean = true
drawerPlacement: string = "left"
class: string = ""
}
@@ -60,14 +62,16 @@ component Sidebar {
return Boolean(entry.value) && entry.value === active
}
client function choose(entry, level) {
client function choose(entry, level, sourceEvent) {
if (entry.disabled) {
sourceEvent.preventDefault()
return
}
output.select({ item: entry, value: entry.value || "", level: level })
if (drawerOpen) {
drawerOpen = false
output.close({ source: "select" })
output.toggle({ open: false })
}
}
@@ -91,6 +95,7 @@ component Sidebar {
class='wrn-sidebar {class}'
data-color='{color}'
data-size='{size}'
data-mobile='{mobile ? "true" : "false"}'
>
<button
type="button"
@@ -117,7 +122,8 @@ component Sidebar {
data-active='{isActive(entry)}'
aria-current='{isActive(entry) ? "page" : "false"}'
aria-disabled='{entry.disabled ? "true" : "false"}'
@click='choose(entry, 1)'
tabindex='{entry.disabled ? "-1" : "0"}'
@click='choose(entry, 1, event)'
>
<span
class='wrn-sidebar__icon {entry.icon}'
@@ -137,7 +143,9 @@ component Sidebar {
data-active='{isActive(child)}'
aria-current='{isActive(child) ? "page" : "false"}'
aria-disabled='{child.disabled ? "true" : "false"}'
@click='choose(child, 2)'
data-wrn-roving-item="true"
tabindex='{child.disabled ? "-1" : "0"}'
@click='choose(child, 2, event)'
>
<span
class='wrn-sidebar__icon {child.icon}'
@@ -159,7 +167,10 @@ component Sidebar {
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
aria-current='{isActive(leaf) ? "page" : "false"}'
@click='choose(leaf, 3)'
aria-disabled='{leaf.disabled ? "true" : "false"}'
data-wrn-roving-item="true"
tabindex='{leaf.disabled ? "-1" : "0"}'
@click='choose(leaf, 3, event)'
>
<span class="wrn-sidebar__label">{leaf.label}</span>
</a>
@@ -175,15 +186,94 @@ component Sidebar {
<slot />
</nav>
{#if mobile}
<Drawer
open={drawerOpen}
placement="left"
placement={drawerPlacement}
title={drawerTitle}
label={label}
@close="closeDrawer()"
>
<nav class="wrn-sidebar__drawer-nav" aria-label='{label}'>
<ul class="wrn-sidebar__list" data-wrn-roving="vertical">
{#each entryList() as entry}
<li class="wrn-sidebar__entry" data-group='{isGroup(entry)}'>
<p class="wrn-sidebar__heading" data-show="entry.heading">{entry.heading}</p>
<a
class="wrn-sidebar__link"
data-show="!entry.heading"
href='{entry.href || "#"}'
data-wrn-roving-item="true"
data-active='{isActive(entry)}'
aria-current='{isActive(entry) ? "page" : "false"}'
aria-disabled='{entry.disabled ? "true" : "false"}'
tabindex='{entry.disabled ? "-1" : "0"}'
@click='choose(entry, 1, event)'
>
<span
class='wrn-sidebar__icon {entry.icon}'
data-show="entry.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{entry.label}</span>
<span class="wrn-sidebar__badge" data-show="entry.badge">{entry.badge}</span>
</a>
<ul class="wrn-sidebar__sublist" data-show="childrenOf(entry).length > 0">
{#each childrenOf(entry) as child}
<li class="wrn-sidebar__entry">
<a
class="wrn-sidebar__link"
href='{child.href || "#"}'
data-active='{isActive(child)}'
aria-current='{isActive(child) ? "page" : "false"}'
aria-disabled='{child.disabled ? "true" : "false"}'
data-wrn-roving-item="true"
tabindex='{child.disabled ? "-1" : "0"}'
@click='choose(child, 2, event)'
>
<span
class='wrn-sidebar__icon {child.icon}'
data-show="child.icon"
aria-hidden="true"
></span>
<span class="wrn-sidebar__label">{child.label}</span>
<span class="wrn-sidebar__badge" data-show="child.badge">{child.badge}</span>
</a>
<ul
class="wrn-sidebar__sublist wrn-sidebar__sublist--level3"
data-show="childrenOf(child).length > 0"
>
{#each childrenOf(child) as leaf}
<li class="wrn-sidebar__entry">
<a
class="wrn-sidebar__link"
href='{leaf.href || "#"}'
data-active='{isActive(leaf)}'
aria-current='{isActive(leaf) ? "page" : "false"}'
aria-disabled='{leaf.disabled ? "true" : "false"}'
data-wrn-roving-item="true"
tabindex='{leaf.disabled ? "-1" : "0"}'
@click='choose(leaf, 3, event)'
>
<span class="wrn-sidebar__label">{leaf.label}</span>
</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
</nav>
<slot name="drawer"></slot>
</Drawer>
{/if}
</div>
}
@@ -231,9 +321,21 @@ component Sidebar {
}
.wrn-sidebar__sublist {
margin-left: 0.85rem;
padding-left: 0.5rem;
border-left: 1px solid var(--wrn-color-border);
margin-inline-start: 0.85rem;
padding-inline-start: 0.5rem;
border-inline-start: 1px solid var(--wrn-color-border);
}
.wrn-sidebar__entry[data-group="true"] > .wrn-sidebar__sublist {
margin-inline-start: 0;
padding-inline-start: 0;
border-inline-start: 0;
}
.wrn-sidebar__icon {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
}
.wrn-sidebar__entry[data-group="true"] + .wrn-sidebar__entry {
@@ -286,7 +388,7 @@ component Sidebar {
}
.wrn-sidebar__badge {
margin-left: auto;
margin-inline-start: auto;
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--sidebar-accent) 16%, transparent);
@@ -323,11 +425,11 @@ component Sidebar {
* the focus trap and the scroll lock.
*/
@media (max-width: 767px) {
.wrn-sidebar__launcher {
.wrn-sidebar[data-mobile="true"] > .wrn-sidebar__launcher {
display: inline-flex;
}
.wrn-sidebar__rail {
.wrn-sidebar[data-mobile="true"] > .wrn-sidebar__rail {
display: none;
}
}