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
62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
package components
|
|
|
|
// SidebarItem represents a navigation item
|
|
type SidebarItem struct {
|
|
ID string
|
|
Icon string
|
|
Label string
|
|
Href string
|
|
Active bool
|
|
Badge string
|
|
}
|
|
|
|
// DefaultSidebarItems returns the main navigation items
|
|
func DefaultSidebarItems(activeTab string) []SidebarItem {
|
|
return []SidebarItem{
|
|
{ID: "overview", Icon: "house", Label: "Overview", Href: "/dashboard?tab=overview", Active: activeTab == "overview" || activeTab == ""},
|
|
{ID: "transactions", Icon: "right-left", Label: "Transactions", Href: "/dashboard?tab=transactions", Active: activeTab == "transactions"},
|
|
{ID: "tokens", Icon: "wallet", Label: "Tokens", Href: "/dashboard?tab=tokens", Active: activeTab == "tokens"},
|
|
{ID: "nfts", Icon: "images", Label: "NFTs", Href: "/dashboard?tab=nfts", Active: activeTab == "nfts"},
|
|
{ID: "activity", Icon: "clock-rotate-left", Label: "Activity", Href: "/dashboard?tab=activity", Active: activeTab == "activity"},
|
|
}
|
|
}
|
|
|
|
// SecondarySidebarItems returns the bottom navigation items
|
|
func SecondarySidebarItems() []SidebarItem {
|
|
return []SidebarItem{
|
|
{ID: "settings", Icon: "gear", Label: "Settings", Href: "/settings", Active: false},
|
|
}
|
|
}
|
|
|
|
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>
|
|
}
|
|
</div>
|
|
}
|