Prad Nukala
30ed4e9ec7
fix(docs): document breadcrumb components refactor(sdk): migrate to new navigation components feat(sdk): create isolated sidebar component breaking(components): deprecate old topbar component feat(components): create new topbar components feat(components): create user dropdown feat(components): create breadcrumb feat(components): create navigation items docs(components): document new components perf(components): improve performance of sidebar test(components): add test for navigation components
152 lines
3.3 KiB
Plaintext
152 lines
3.3 KiB
Plaintext
package layouts
|
|
|
|
import "nebula/components"
|
|
|
|
type WalletUser struct {
|
|
Name string
|
|
Address string
|
|
}
|
|
|
|
// DashboardLayout renders the dashboard using wa-page component
|
|
templ DashboardLayout(title string, user WalletUser, activeTab string) {
|
|
@Base(title) {
|
|
@pageStyles()
|
|
<wa-page mobile-breakpoint="920">
|
|
<div slot="header">
|
|
<a href="/dashboard" class="header-logo">
|
|
<wa-icon name="cube"></wa-icon>
|
|
<span>Sonr</span>
|
|
</a>
|
|
<wa-button data-toggle-nav variant="neutral" appearance="plain" class="wa-mobile-only">
|
|
<wa-icon name="bars"></wa-icon>
|
|
</wa-button>
|
|
@components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address})
|
|
</div>
|
|
<nav slot="navigation">
|
|
@components.NavigationItems(activeTab)
|
|
</nav>
|
|
<main>
|
|
{ children... }
|
|
</main>
|
|
</wa-page>
|
|
}
|
|
}
|
|
|
|
// AppLayout is a simplified layout without navigation (for non-dashboard pages)
|
|
templ AppLayout(title string, user WalletUser) {
|
|
@Base(title) {
|
|
@pageStyles()
|
|
<wa-page>
|
|
<!-- Header: Logo + User Avatar -->
|
|
<div slot="header">
|
|
<a href="/dashboard" class="header-logo">
|
|
<wa-icon name="cube"></wa-icon>
|
|
<span>Sonr</span>
|
|
</a>
|
|
@components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address})
|
|
</div>
|
|
<!-- Main Content -->
|
|
<main>
|
|
{ children... }
|
|
</main>
|
|
</wa-page>
|
|
}
|
|
}
|
|
|
|
templ pageStyles() {
|
|
<style>
|
|
/* Header Logo */
|
|
.header-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-s);
|
|
text-decoration: none;
|
|
color: var(--wa-color-neutral-900);
|
|
font-weight: 600;
|
|
font-size: var(--wa-font-size-l);
|
|
}
|
|
|
|
.header-logo wa-icon {
|
|
font-size: 24px;
|
|
color: var(--wa-color-primary);
|
|
}
|
|
|
|
/* Navigation Items */
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--wa-space-s);
|
|
padding: var(--wa-space-s) var(--wa-space-m);
|
|
border-radius: var(--wa-radius-m);
|
|
color: var(--wa-color-neutral-600);
|
|
text-decoration: none;
|
|
font-size: var(--wa-font-size-s);
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--wa-color-neutral-100);
|
|
color: var(--wa-color-neutral-900);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--wa-color-primary-subtle);
|
|
color: var(--wa-color-primary);
|
|
}
|
|
|
|
.nav-item wa-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Navigation Section */
|
|
.nav-section {
|
|
margin-top: var(--wa-space-l);
|
|
padding-top: var(--wa-space-l);
|
|
border-top: 1px solid var(--wa-color-neutral-200);
|
|
}
|
|
|
|
.nav-section-title {
|
|
padding: var(--wa-space-xs) var(--wa-space-m);
|
|
font-size: var(--wa-font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--wa-color-neutral-500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* User Menu */
|
|
.user-menu-header {
|
|
padding: var(--wa-space-m) var(--wa-space-l);
|
|
}
|
|
|
|
.user-menu-header strong {
|
|
display: block;
|
|
font-size: var(--wa-font-size-s);
|
|
color: var(--wa-color-neutral-900);
|
|
}
|
|
|
|
.user-menu-header span {
|
|
font-size: var(--wa-font-size-xs);
|
|
color: var(--wa-color-neutral-500);
|
|
font-family: var(--wa-font-mono);
|
|
}
|
|
|
|
/* Page customizations */
|
|
wa-page {
|
|
--menu-width: 240px;
|
|
}
|
|
|
|
wa-page[view='mobile'] {
|
|
--menu-width: auto;
|
|
}
|
|
|
|
/* Main content padding */
|
|
wa-page main {
|
|
padding: var(--wa-space-l);
|
|
background: var(--wa-color-surface-alt);
|
|
min-height: 100%;
|
|
}
|
|
</style>
|
|
}
|