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

feat(ui): own responsive marketing layout APIs
Quality / quality (ubuntu-latest) (push) Failing after 10m42s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-24 19:44:26 +05:30
parent 3b402b4e36
commit f9e285b182
15 changed files with 589 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/Navbar.wrn
+58 -6
View File
@@ -20,6 +20,12 @@ size: string = "default"
openOnHover: boolean = false
maxWidth: string = "full"
mobileLabel: string = "Toggle navigation"
collapseAt: string = "900px"
mobilePanel: string = "content"
mobileUtilitiesPosition: string = "header"
gutter: string = "md"
contentGutter: string = "md"
flushMobile: boolean = false
translationPrefix: string = ""
class: string = ""
}
@@ -70,7 +76,7 @@ size: string = "default"
}
view {
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}">
<header class="wrn-navbar wrn-navbar--width-{maxWidth} wrn-component--color-{color} wrn-component--size-{size} {sticky ? 'wrn-navbar--sticky' : ''} {class}" data-wrn-navbar data-open-on-hover="{openOnHover}" data-collapse-at="{collapseAt}" data-mobile-panel="{mobilePanel}" data-mobile-utilities-position="{mobileUtilitiesPosition}" data-gutter="{gutter}" data-content-gutter="{contentGutter}" data-flush-mobile="{flushMobile ? 'true' : 'false'}">
<div class="wrn-navbar__topbar" aria-label="{topbarLabel}">
<slot name="topbar" />
</div>
@@ -93,10 +99,6 @@ size: string = "default"
</a>
{/if}
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
<div class="wrn-navbar__collapse {mobileOpen ? 'is-open' : ''}">
<nav class="wrn-navbar__menus" aria-label="{label}" data-wrn-roving="horizontal">
{#each items as item}
@@ -149,6 +151,12 @@ size: string = "default"
<slot name="actions" />
</div>
</div>
<div class="wrn-navbar__utilities"><slot name="utilities" /></div>
<button type="button" class="wrn-navbar__toggle" aria-label="{mobileLabel}" aria-expanded="{mobileOpen}" @click="toggleNavigation()">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</button>
</div>
</header>
}
@@ -198,6 +206,17 @@ size: string = "default"
gap: 1.5rem;
}
.wrn-navbar[data-gutter="sm"] .wrn-navbar__main { padding-inline: 1rem; }
.wrn-navbar[data-gutter="lg"] .wrn-navbar__main { padding-inline: clamp(1.5rem, 5vw, 4rem); }
.wrn-navbar__utilities {
display: inline-flex;
align-items: center;
flex: none;
}
.wrn-navbar__utilities:not(:has(> *)) { display: none; }
.wrn-navbar--width-full .wrn-navbar__main {
width: 100%;
max-width: none;
@@ -532,12 +551,15 @@ size: string = "default"
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
height: calc(100dvh - 3.5rem);
height: auto;
max-height: calc(100dvh - 3.5rem);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.wrn-navbar[data-mobile-panel="sheet"] .wrn-navbar__collapse {
height: calc(100dvh - 3.5rem);
}
.wrn-navbar__collapse.is-open {
display: flex;
}
@@ -582,7 +604,37 @@ size: string = "default"
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__toggle { display: block; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
max-height: calc(100dvh - 3.5rem);
padding: 0.75rem 1rem 1rem;
align-items: stretch;
flex-direction: column;
overflow-y: auto;
background: var(--wrn-color-surface);
border-bottom: 1px solid var(--wrn-color-border);
box-shadow: 0 16px 32px rgb(15 23 42 / 0.12);
}
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__actions {
width: 100%;
align-items: stretch;
flex: none;
flex-direction: column;
}
.wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
.wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__panel { position: static; width: 100%; max-width: none; transform: none; }
}
@media (max-width: 600px) {
.wrn-navbar[data-flush-mobile="false"] .wrn-navbar__main { padding-inline: 1rem; }
.wrn-navbar__brand-copy small {
display: none;
}