x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): extract breadcrumb into sub-components

Browse Source 
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
This commit is contained in:
Prad Nu
2026-01-05 18:41:05 -05:00
parent 22bd6bb70a
commit 30ed4e9ec7
11 changed files with 1223 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
components/navbar.templ
View File

@@ -86,95 +86,109 @@ func getSelectedAccountName(accounts []Account, id string) string {
return "Account"
}
// TopBar renders the header bar with breadcrumbs and user dropdown
// BreadcrumbNav renders the breadcrumb navigation for the subheader
templ BreadcrumbNav(navCtx NavContext) {
<nav class="breadcrumb-nav">
<!-- Chain Dropdown -->
<wa-dropdown>
<button slot="trigger" class="breadcrumb-btn">
{ getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID) }
<wa-icon name="chevron-down"></wa-icon>
</button>
<wa-menu>
<wa-menu-label>Mainnets</wa-menu-label>
for _, chain := range navCtx.Blockchains {
if !chain.Testnet {
<wa-menu-item value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color:" + chain.Color }></wa-icon>
{ chain.Name }
</wa-menu-item>
}
}
<wa-divider></wa-divider>
<wa-menu-label>Testnets</wa-menu-label>
for _, chain := range navCtx.Blockchains {
if chain.Testnet {
<wa-menu-item value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color:" + chain.Color }></wa-icon>
{ chain.Name }
</wa-menu-item>
}
}
</wa-menu>
</wa-dropdown>
<span class="breadcrumb-sep">/</span>
<!-- Account Dropdown -->
<wa-dropdown>
<button slot="trigger" class="breadcrumb-btn">
{ getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID) }
<wa-icon name="chevron-down"></wa-icon>
</button>
<wa-menu>
for _, account := range navCtx.Accounts {
<wa-menu-item value={ account.ID }>
<wa-avatar slot="prefix" initials={ account.Initials } style={ "--size:18px;background:" + account.Color }></wa-avatar>
{ account.Name }
</wa-menu-item>
}
<wa-divider></wa-divider>
<wa-menu-item value="__new__">
<wa-icon slot="prefix" name="plus"></wa-icon>
New Account
</wa-menu-item>
</wa-menu>
</wa-dropdown>
</nav>
}
// UserDropdown renders the user avatar dropdown menu
templ UserDropdown(user NavUser) {
<wa-dropdown>
<wa-avatar slot="trigger" initials={ string(user.Name[0]) } style="--size:32px;cursor:pointer;"></wa-avatar>
<wa-menu>
<div class="user-menu-header">
<strong>{ user.Name }</strong>
<span>{ user.Address }</span>
</div>
<wa-divider></wa-divider>
<wa-menu-item value="connections">
<wa-icon slot="prefix" name="plug"></wa-icon>
Connections
</wa-menu-item>
<wa-menu-item value="devices">
<wa-icon slot="prefix" name="mobile"></wa-icon>
Devices
</wa-menu-item>
<wa-menu-item value="settings">
<wa-icon slot="prefix" name="gear"></wa-icon>
Settings
</wa-menu-item>
<wa-divider></wa-divider>
<wa-menu-item value="logout">
<wa-icon slot="prefix" name="arrow-right-from-bracket"></wa-icon>
Sign Out
</wa-menu-item>
</wa-menu>
</wa-dropdown>
}
// Legacy components for backwards compatibility
// TopBar renders the header bar with breadcrumbs and user dropdown (DEPRECATED - use wa-page slots)
templ TopBar(navCtx NavContext) {
<header class="topbar">
<!-- Breadcrumb Navigation -->
<nav class="topbar-nav">
<span class="topbar-title">Sonr</span>
<span class="topbar-sep">/</span>
<!-- Chain Dropdown -->
<wa-dropdown>
<button slot="trigger" class="topbar-btn">
{ getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID) }
<wa-icon name="chevron-down"></wa-icon>
</button>
<wa-menu>
<wa-menu-label>Mainnets</wa-menu-label>
for _, chain := range navCtx.Blockchains {
if !chain.Testnet {
<wa-menu-item value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color:" + chain.Color }></wa-icon>
{ chain.Name }
</wa-menu-item>
}
}
<wa-divider></wa-divider>
<wa-menu-label>Testnets</wa-menu-label>
for _, chain := range navCtx.Blockchains {
if chain.Testnet {
<wa-menu-item value={ chain.ID }>
<wa-icon slot="prefix" name={ chain.Icon } style={ "color:" + chain.Color }></wa-icon>
{ chain.Name }
</wa-menu-item>
}
}
</wa-menu>
</wa-dropdown>
<span class="topbar-sep">/</span>
<!-- Account Dropdown -->
<wa-dropdown>
<button slot="trigger" class="topbar-btn">
{ getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID) }
<wa-icon name="chevron-down"></wa-icon>
</button>
<wa-menu>
for _, account := range navCtx.Accounts {
<wa-menu-item value={ account.ID }>
<wa-avatar slot="prefix" initials={ account.Initials } style={ "--size:18px;background:" + account.Color }></wa-avatar>
{ account.Name }
</wa-menu-item>
}
<wa-divider></wa-divider>
<wa-menu-item value="__new__">
<wa-icon slot="prefix" name="plus"></wa-icon>
New Account
</wa-menu-item>
</wa-menu>
</wa-dropdown>
@BreadcrumbNav(navCtx)
</nav>
<!-- User Dropdown -->
<wa-dropdown>
<wa-avatar slot="trigger" initials={ string(navCtx.User.Name[0]) } style="--size:32px;cursor:pointer;"></wa-avatar>
<wa-menu>
<div class="user-menu-header">
<strong>{ navCtx.User.Name }</strong>
<span>{ navCtx.User.Address }</span>
</div>
<wa-divider></wa-divider>
<wa-menu-item value="connections">
<wa-icon slot="prefix" name="plug"></wa-icon>
Connections
</wa-menu-item>
<wa-menu-item value="devices">
<wa-icon slot="prefix" name="mobile"></wa-icon>
Devices
</wa-menu-item>
<wa-menu-item value="settings">
<wa-icon slot="prefix" name="gear"></wa-icon>
Settings
</wa-menu-item>
<wa-divider></wa-divider>
<wa-menu-item value="logout">
<wa-icon slot="prefix" name="arrow-right-from-bracket"></wa-icon>
Sign Out
</wa-menu-item>
</wa-menu>
</wa-dropdown>
@UserDropdown(navCtx.User)
</header>
}
// TopBarStyles renders the CSS for the top bar
// TopBarStyles renders the CSS for the top bar (DEPRECATED - use wa-page styles)
templ TopBarStyles() {
<style>
/* Top Bar */

204
components/navbar_templ.go
View File

@@ -94,8 +94,8 @@ func getSelectedAccountName(accounts []Account, id string) string {
return "Account"
}
// TopBar renders the header bar with breadcrumbs and user dropdown
func TopBar(navCtx NavContext) templ.Component {
// BreadcrumbNav renders the breadcrumb navigation for the subheader
func BreadcrumbNav(navCtx NavContext) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -116,14 +116,14 @@ func TopBar(navCtx NavContext) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header class=\"topbar\"><!-- Breadcrumb Navigation --><nav class=\"topbar-nav\"><span class=\"topbar-title\">Sonr</span> <span class=\"topbar-sep\">/</span><!-- Chain Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"topbar-btn\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<nav class=\"breadcrumb-nav\"><!-- Chain Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"breadcrumb-btn\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 99, Col: 71}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 95, Col: 70}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
@@ -142,7 +142,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 106, Col: 37}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 102, Col: 36}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
@@ -155,7 +155,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 107, Col: 48}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 103, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
@@ -168,7 +168,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 107, Col: 81}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 103, Col: 80}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
@@ -181,7 +181,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 108, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 104, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
@@ -206,7 +206,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 116, Col: 37}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 112, Col: 36}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
@@ -219,7 +219,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 117, Col: 48}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 113, Col: 47}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@@ -232,7 +232,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 117, Col: 81}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 113, Col: 80}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {
@@ -245,7 +245,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 118, Col: 20}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 114, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
@@ -257,14 +257,14 @@ func TopBar(navCtx NavContext) templ.Component {
}
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</wa-menu></wa-dropdown> <span class=\"topbar-sep\">/</span><!-- Account Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"topbar-btn\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</wa-menu></wa-dropdown> <span class=\"breadcrumb-sep\">/</span><!-- Account Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"breadcrumb-btn\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 128, Col: 72}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 124, Col: 71}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
@@ -282,7 +282,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(account.ID)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 133, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 129, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
@@ -295,7 +295,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(account.Initials)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 134, Col: 59}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 130, Col: 58}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
@@ -308,7 +308,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("--size:18px;background:" + account.Color)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 134, Col: 111}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 130, Col: 110}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
@@ -321,7 +321,7 @@ func TopBar(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(account.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 135, Col: 21}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 131, Col: 20}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil {
@@ -332,46 +332,7 @@ func TopBar(navCtx NavContext) templ.Component {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<wa-divider></wa-divider> <wa-menu-item value=\"__new__\"><wa-icon slot=\"prefix\" name=\"plus\"></wa-icon> New Account</wa-menu-item></wa-menu></wa-dropdown></nav><!-- User Dropdown --><wa-dropdown><wa-avatar slot=\"trigger\" initials=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(string(navCtx.User.Name[0]))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 148, Col: 67}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" style=\"--size:32px;cursor:pointer;\"></wa-avatar> <wa-menu><div class=\"user-menu-header\"><strong>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 151, Col: 31}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</strong> <span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Address)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 152, Col: 32}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</span></div><wa-divider></wa-divider> <wa-menu-item value=\"connections\"><wa-icon slot=\"prefix\" name=\"plug\"></wa-icon> Connections</wa-menu-item> <wa-menu-item value=\"devices\"><wa-icon slot=\"prefix\" name=\"mobile\"></wa-icon> Devices</wa-menu-item> <wa-menu-item value=\"settings\"><wa-icon slot=\"prefix\" name=\"gear\"></wa-icon> Settings</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item value=\"logout\"><wa-icon slot=\"prefix\" name=\"arrow-right-from-bracket\"></wa-icon> Sign Out</wa-menu-item></wa-menu></wa-dropdown></header>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<wa-divider></wa-divider> <wa-menu-item value=\"__new__\"><wa-icon slot=\"prefix\" name=\"plus\"></wa-icon> New Account</wa-menu-item></wa-menu></wa-dropdown></nav>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -379,7 +340,124 @@ func TopBar(navCtx NavContext) templ.Component {
})
}
// TopBarStyles renders the CSS for the top bar
// UserDropdown renders the user avatar dropdown menu
func UserDropdown(user NavUser) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var16 := templ.GetChildren(ctx)
if templ_7745c5c3_Var16 == nil {
templ_7745c5c3_Var16 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<wa-dropdown><wa-avatar slot=\"trigger\" initials=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(string(user.Name[0]))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 147, Col: 59}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" style=\"--size:32px;cursor:pointer;\"></wa-avatar> <wa-menu><div class=\"user-menu-header\"><strong>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(user.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 150, Col: 23}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</strong> <span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var19 string
templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(user.Address)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 151, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</span></div><wa-divider></wa-divider> <wa-menu-item value=\"connections\"><wa-icon slot=\"prefix\" name=\"plug\"></wa-icon> Connections</wa-menu-item> <wa-menu-item value=\"devices\"><wa-icon slot=\"prefix\" name=\"mobile\"></wa-icon> Devices</wa-menu-item> <wa-menu-item value=\"settings\"><wa-icon slot=\"prefix\" name=\"gear\"></wa-icon> Settings</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item value=\"logout\"><wa-icon slot=\"prefix\" name=\"arrow-right-from-bracket\"></wa-icon> Sign Out</wa-menu-item></wa-menu></wa-dropdown>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
// Legacy components for backwards compatibility
// TopBar renders the header bar with breadcrumbs and user dropdown (DEPRECATED - use wa-page slots)
func TopBar(navCtx NavContext) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var20 := templ.GetChildren(ctx)
if templ_7745c5c3_Var20 == nil {
templ_7745c5c3_Var20 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<header class=\"topbar\"><!-- Breadcrumb Navigation --><nav class=\"topbar-nav\"><span class=\"topbar-title\">Sonr</span> <span class=\"topbar-sep\">/</span>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = BreadcrumbNav(navCtx).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "</nav><!-- User Dropdown -->")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = UserDropdown(navCtx.User).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</header>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
// TopBarStyles renders the CSS for the top bar (DEPRECATED - use wa-page styles)
func TopBarStyles() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -396,12 +474,12 @@ func TopBarStyles() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var19 := templ.GetChildren(ctx)
if templ_7745c5c3_Var19 == nil {
templ_7745c5c3_Var19 = templ.NopComponent
templ_7745c5c3_Var21 := templ.GetChildren(ctx)
if templ_7745c5c3_Var21 == nil {
templ_7745c5c3_Var21 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<style>\n\t\t/* Top Bar */\n\t\t.topbar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 56px;\n\t\t\tpadding: 0 24px;\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t\n\t\t.topbar-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t\n\t\t.topbar-title {\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t\tpadding: 6px 8px;\n\t\t}\n\t\t\n\t\t.topbar-sep {\n\t\t\tcolor: var(--wa-color-neutral-300);\n\t\t\tfont-size: 16px;\n\t\t\tpadding: 0 4px;\n\t\t}\n\t\t\n\t\t.topbar-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 10px;\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background 0.15s;\n\t\t}\n\t\t\n\t\t.topbar-btn:hover {\n\t\t\tbackground: var(--wa-color-neutral-100);\n\t\t}\n\t\t\n\t\t.topbar-btn wa-icon {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: var(--wa-color-neutral-400);\n\t\t}\n\t\t\n\t\t/* User Menu */\n\t\t.user-menu-header {\n\t\t\tpadding: 12px 16px;\n\t\t}\n\t\t\n\t\t.user-menu-header strong {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t}\n\t\t\n\t\t.user-menu-header span {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: var(--wa-color-neutral-500);\n\t\t\tfont-family: var(--wa-font-mono);\n\t\t}\n\t</style>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<style>\n\t\t/* Top Bar */\n\t\t.topbar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 56px;\n\t\t\tpadding: 0 24px;\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t\n\t\t.topbar-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t\n\t\t.topbar-title {\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t\tpadding: 6px 8px;\n\t\t}\n\t\t\n\t\t.topbar-sep {\n\t\t\tcolor: var(--wa-color-neutral-300);\n\t\t\tfont-size: 16px;\n\t\t\tpadding: 0 4px;\n\t\t}\n\t\t\n\t\t.topbar-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 10px;\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background 0.15s;\n\t\t}\n\t\t\n\t\t.topbar-btn:hover {\n\t\t\tbackground: var(--wa-color-neutral-100);\n\t\t}\n\t\t\n\t\t.topbar-btn wa-icon {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: var(--wa-color-neutral-400);\n\t\t}\n\t\t\n\t\t/* User Menu */\n\t\t.user-menu-header {\n\t\t\tpadding: 12px 16px;\n\t\t}\n\t\t\n\t\t.user-menu-header strong {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t}\n\t\t\n\t\t.user-menu-header span {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: var(--wa-color-neutral-500);\n\t\t\tfont-family: var(--wa-font-mono);\n\t\t}\n\t</style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

192
components/sidebar.templ
View File

@@ -1,13 +1,13 @@
package components
// SidebarItem represents a navigation item in the sidebar
// SidebarItem represents a navigation item
type SidebarItem struct {
ID string
Icon string
Label string
Href string
Active bool
Badge string
ID string
Icon string
Label string
Href string
Active bool
Badge string
}
// DefaultSidebarItems returns the main navigation items
@@ -28,154 +28,34 @@ func SecondarySidebarItems() []SidebarItem {
}
}
// Sidebar renders the Supabase-style icon sidebar
templ Sidebar(items []SidebarItem, secondaryItems []SidebarItem) {
<aside class="sidebar">
<div class="sidebar-inner">
<!-- Logo -->
<a href="/dashboard" class="sidebar-logo">
<wa-icon name="cube"></wa-icon>
templ NavigationItems(activeTab string) {
for _, item := range DefaultSidebarItems(activeTab) {
<a
href={ templ.SafeURL(item.Href) }
class={ "nav-item", templ.KV("active", item.Active) }
hx-get={ item.Href }
hx-target="#dashboard-content"
hx-swap="outerHTML"
hx-push-url="true"
preload="mousedown"
>
<wa-icon name={ item.Icon }></wa-icon>
{ item.Label }
if item.Badge != "" {
<wa-badge variant="danger" pill>{ item.Badge }</wa-badge>
}
</a>
}
<div class="nav-section">
<div class="nav-section-title">Settings</div>
for _, item := range SecondarySidebarItems() {
<a
href={ templ.SafeURL(item.Href) }
class={ "nav-item", templ.KV("active", item.Active) }
>
<wa-icon name={ item.Icon }></wa-icon>
{ item.Label }
</a>
<!-- Main Navigation -->
<nav class="sidebar-nav">
for _, item := range items {
<wa-tooltip content={ item.Label } placement="right">
<a
href={ templ.SafeURL(item.Href) }
class={ "sidebar-item", templ.KV("active", item.Active) }
hx-get={ item.Href }
hx-target="#main-content"
hx-push-url="true"
hx-swap="innerHTML"
>
<wa-icon name={ item.Icon }></wa-icon>
if item.Badge != "" {
<span class="sidebar-badge">{ item.Badge }</span>
}
</a>
</wa-tooltip>
}
</nav>
<!-- Secondary Navigation (bottom) -->
<nav class="sidebar-nav sidebar-nav-bottom">
for _, item := range secondaryItems {
<wa-tooltip content={ item.Label } placement="right">
<a
href={ templ.SafeURL(item.Href) }
class={ "sidebar-item", templ.KV("active", item.Active) }
>
<wa-icon name={ item.Icon }></wa-icon>
</a>
</wa-tooltip>
}
</nav>
</div>
</aside>
}
// SidebarStyles renders the CSS for the sidebar
templ SidebarStyles() {
<style>
/* Sidebar Container */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: var(--sidebar-width, 64px);
height: 100vh;
background: var(--wa-color-neutral-900);
border-right: 1px solid var(--wa-color-neutral-800);
z-index: 100;
}
.sidebar-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px 0;
}
/* Logo */
.sidebar-logo {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0 auto 16px;
background: linear-gradient(135deg, #17c2ff, #0090ff);
border-radius: 10px;
color: white;
text-decoration: none;
}
.sidebar-logo wa-icon {
font-size: 20px;
}
/* Navigation */
.sidebar-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 12px;
}
.sidebar-nav-bottom {
margin-top: auto;
}
/* Sidebar Item */
.sidebar-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
color: var(--wa-color-neutral-400);
text-decoration: none;
transition: all 0.15s ease;
}
.sidebar-item:hover {
background: var(--wa-color-neutral-800);
color: var(--wa-color-neutral-100);
}
.sidebar-item.active {
background: var(--wa-color-neutral-800);
color: var(--wa-color-primary);
}
.sidebar-item wa-icon {
font-size: 20px;
}
/* Badge */
.sidebar-badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--wa-color-danger);
border-radius: 8px;
font-size: 10px;
font-weight: 600;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* Main content offset */
.app-layout {
margin-left: var(--sidebar-width, 64px);
min-height: 100vh;
}
</style>
}
</div>
}

149
components/sidebar_templ.go
View File

@@ -8,7 +8,7 @@ package components
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
// SidebarItem represents a navigation item in the sidebar
// SidebarItem represents a navigation item
type SidebarItem struct {
ID string
Icon string
@@ -36,8 +36,7 @@ func SecondarySidebarItems() []SidebarItem {
}
}
// Sidebar renders the Supabase-style icon sidebar
func Sidebar(items []SidebarItem, secondaryItems []SidebarItem) templ.Component {
func NavigationItems(activeTab string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -58,215 +57,173 @@ func Sidebar(items []SidebarItem, secondaryItems []SidebarItem) templ.Component
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside class=\"sidebar\"><div class=\"sidebar-inner\"><!-- Logo --><a href=\"/dashboard\" class=\"sidebar-logo\"><wa-icon name=\"cube\"></wa-icon></a><!-- Main Navigation --><nav class=\"sidebar-nav\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, item := range items {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<wa-tooltip content=\"")
for _, item := range DefaultSidebarItems(activeTab) {
var templ_7745c5c3_Var2 = []any{"nav-item", templ.KV("active", item.Active)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 42, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" placement=\"right\">")
var templ_7745c5c3_Var3 templ.SafeURL
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 34, Col: 34}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 = []any{"sidebar-item", templ.KV("active", item.Active)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var3...)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<a href=\"")
var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var4 templ.SafeURL
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 44, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\" class=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" hx-get=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var3).String())
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(item.Href)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 36, Col: 21}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\" hx-get=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" hx-target=\"#dashboard-content\" hx-swap=\"outerHTML\" hx-push-url=\"true\" preload=\"mousedown\"><wa-icon name=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Href)
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 46, Col: 25}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 42, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\" hx-target=\"#main-content\" hx-push-url=\"true\" hx-swap=\"innerHTML\"><wa-icon name=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"></wa-icon> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 51, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 43, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "\"></wa-icon> ")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if item.Badge != "" {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<span class=\"sidebar-badge\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<wa-badge variant=\"danger\" pill>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Badge)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 53, Col: 48}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 45, Col: 48}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</wa-badge>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</a></wa-tooltip>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</nav><!-- Secondary Navigation (bottom) --><nav class=\"sidebar-nav sidebar-nav-bottom\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div class=\"nav-section\"><div class=\"nav-section-title\">Settings</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, item := range secondaryItems {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<wa-tooltip content=\"")
for _, item := range SecondarySidebarItems() {
var templ_7745c5c3_Var9 = []any{"nav-item", templ.KV("active", item.Active)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var9...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 62, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\" placement=\"right\">")
var templ_7745c5c3_Var10 templ.SafeURL
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 53, Col: 35}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 = []any{"sidebar-item", templ.KV("active", item.Active)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var10...)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<a href=\"")
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var9).String())
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 templ.SafeURL
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(item.Href))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 64, Col: 38}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"><wa-icon name=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var10).String())
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 1, Col: 0}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 56, Col: 29}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "\"><wa-icon name=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"></wa-icon> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(item.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 67, Col: 32}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/sidebar.templ`, Line: 57, Col: 16}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\"></wa-icon></a></wa-tooltip>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</nav></div></aside>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
// SidebarStyles renders the CSS for the sidebar
func SidebarStyles() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var14 := templ.GetChildren(ctx)
if templ_7745c5c3_Var14 == nil {
templ_7745c5c3_Var14 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<style>\n\t\t/* Sidebar Container */\n\t\t.sidebar {\n\t\t\tposition: fixed;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: var(--sidebar-width, 64px);\n\t\t\theight: 100vh;\n\t\t\tbackground: var(--wa-color-neutral-900);\n\t\t\tborder-right: 1px solid var(--wa-color-neutral-800);\n\t\t\tz-index: 100;\n\t\t}\n\t\t\n\t\t.sidebar-inner {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\theight: 100%;\n\t\t\tpadding: 12px 0;\n\t\t}\n\t\t\n\t\t/* Logo */\n\t\t.sidebar-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tmargin: 0 auto 16px;\n\t\t\tbackground: linear-gradient(135deg, #17c2ff, #0090ff);\n\t\t\tborder-radius: 10px;\n\t\t\tcolor: white;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t\n\t\t.sidebar-logo wa-icon {\n\t\t\tfont-size: 20px;\n\t\t}\n\t\t\n\t\t/* Navigation */\n\t\t.sidebar-nav {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 0 12px;\n\t\t}\n\t\t\n\t\t.sidebar-nav-bottom {\n\t\t\tmargin-top: auto;\n\t\t}\n\t\t\n\t\t/* Sidebar Item */\n\t\t.sidebar-item {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tborder-radius: 8px;\n\t\t\tcolor: var(--wa-color-neutral-400);\n\t\t\ttext-decoration: none;\n\t\t\ttransition: all 0.15s ease;\n\t\t}\n\t\t\n\t\t.sidebar-item:hover {\n\t\t\tbackground: var(--wa-color-neutral-800);\n\t\t\tcolor: var(--wa-color-neutral-100);\n\t\t}\n\t\t\n\t\t.sidebar-item.active {\n\t\t\tbackground: var(--wa-color-neutral-800);\n\t\t\tcolor: var(--wa-color-primary);\n\t\t}\n\t\t\n\t\t.sidebar-item wa-icon {\n\t\t\tfont-size: 20px;\n\t\t}\n\t\t\n\t\t/* Badge */\n\t\t.sidebar-badge {\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tright: 4px;\n\t\t\tmin-width: 16px;\n\t\t\theight: 16px;\n\t\t\tpadding: 0 4px;\n\t\t\tbackground: var(--wa-color-danger);\n\t\t\tborder-radius: 8px;\n\t\t\tfont-size: 10px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: white;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t\t\n\t\t/* Main content offset */\n\t\t.app-layout {\n\t\t\tmargin-left: var(--sidebar-width, 64px);\n\t\t\tmin-height: 100vh;\n\t\t}\n\t</style>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}