diff --git a/components/navbar.templ b/components/navbar.templ
new file mode 100644
index 0000000..ea3e441
--- /dev/null
+++ b/components/navbar.templ
@@ -0,0 +1,285 @@
+package components
+
+// Blockchain represents a supported blockchain network
+type Blockchain struct {
+ ID string
+ Name string
+ Symbol string
+ Icon string
+ Color string
+ Testnet bool
+}
+
+// Account represents a wallet account
+type Account struct {
+ ID string
+ Name string
+ Address string
+ Initials string
+ Color string
+ Active bool
+}
+
+// NavUser holds user display info
+type NavUser struct {
+ Name string
+ Address string
+}
+
+// NavTab represents a tab in the navigation
+type NavTab struct {
+ ID string
+ Label string
+ Icon string
+ Active bool
+}
+
+// NavContext holds navigation state for the header
+type NavContext struct {
+ User NavUser
+ Blockchains []Blockchain
+ Accounts []Account
+ Tabs []NavTab
+ SelectedChainID string
+ SelectedAccountID string
+ ActiveTab string
+}
+
+// DefaultBlockchains returns the available blockchain networks
+func DefaultBlockchains() []Blockchain {
+ return []Blockchain{
+ {ID: "sonr", Name: "Sonr", Symbol: "SNR", Icon: "cube", Color: "var(--wa-color-primary)", Testnet: false},
+ {ID: "ethereum", Name: "Ethereum", Symbol: "ETH", Icon: "ethereum", Color: "#627eea", Testnet: false},
+ {ID: "avalanche", Name: "Avalanche", Symbol: "AVAX", Icon: "mountain", Color: "#e84142", Testnet: false},
+ {ID: "polygon", Name: "Polygon", Symbol: "MATIC", Icon: "hexagon", Color: "#8247e5", Testnet: false},
+ {ID: "sonr-testnet", Name: "Sonr Testnet", Symbol: "tSNR", Icon: "cube", Color: "var(--wa-color-warning)", Testnet: true},
+ }
+}
+
+// DefaultAccounts returns the user's wallet accounts
+func DefaultAccounts() []Account {
+ return []Account{
+ {ID: "main", Name: "Main Wallet", Address: "sonr1x9f...7k2m", Initials: "M", Color: "var(--wa-color-primary)", Active: true},
+ {ID: "trading", Name: "Trading", Address: "sonr1k4m...9p3q", Initials: "T", Color: "var(--wa-color-success)", Active: false},
+ {ID: "savings", Name: "Savings", Address: "sonr1r7t...2w8x", Initials: "S", Color: "var(--wa-color-warning)", Active: false},
+ }
+}
+
+// DashboardTabs returns the default dashboard tabs
+func DashboardTabs(activeTab string) []NavTab {
+ return []NavTab{
+ {ID: "overview", Label: "Overview", Icon: "grid-2", Active: activeTab == "overview" || activeTab == ""},
+ {ID: "transactions", Label: "Transactions", Icon: "arrow-right-arrow-left", Active: activeTab == "transactions"},
+ {ID: "tokens", Label: "Tokens", Icon: "coins", Active: activeTab == "tokens"},
+ {ID: "nfts", Label: "NFTs", Icon: "image", Active: activeTab == "nfts"},
+ {ID: "activity", Label: "Activity", Icon: "chart-line", Active: activeTab == "activity"},
+ }
+}
+
+// DefaultNavContext returns the default navigation context
+func DefaultNavContext() NavContext {
+ return NavContext{
+ User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"},
+ Blockchains: DefaultBlockchains(),
+ Accounts: DefaultAccounts(),
+ Tabs: DashboardTabs(""),
+ SelectedChainID: "sonr",
+ SelectedAccountID: "main",
+ ActiveTab: "overview",
+ }
+}
+
+// getSelectedChainName returns the name of the currently selected chain
+func getSelectedChainName(chains []Blockchain, id string) string {
+ for _, c := range chains {
+ if c.ID == id {
+ return c.Name
+ }
+ }
+ return "Network"
+}
+
+// getSelectedAccountName returns the name of the currently selected account
+func getSelectedAccountName(accounts []Account, id string) string {
+ for _, a := range accounts {
+ if a.ID == id {
+ return a.Name
+ }
+ }
+ return "Account"
+}
+
+// AppHeader renders the header section for wa-page header slot
+templ AppHeader(navCtx NavContext) {
+
+}
+
+// AppSubheader renders the tabs section for wa-page subheader slot
+templ AppSubheader(tabs []NavTab) {
+
+}
+
+// AppNavStyles renders the CSS styles for the navigation components
+templ AppNavStyles() {
+
+}
diff --git a/components/navbar_templ.go b/components/navbar_templ.go
new file mode 100644
index 0000000..6ec8f18
--- /dev/null
+++ b/components/navbar_templ.go
@@ -0,0 +1,532 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.977
+package components
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+// Blockchain represents a supported blockchain network
+type Blockchain struct {
+ ID string
+ Name string
+ Symbol string
+ Icon string
+ Color string
+ Testnet bool
+}
+
+// Account represents a wallet account
+type Account struct {
+ ID string
+ Name string
+ Address string
+ Initials string
+ Color string
+ Active bool
+}
+
+// NavUser holds user display info
+type NavUser struct {
+ Name string
+ Address string
+}
+
+// NavTab represents a tab in the navigation
+type NavTab struct {
+ ID string
+ Label string
+ Icon string
+ Active bool
+}
+
+// NavContext holds navigation state for the header
+type NavContext struct {
+ User NavUser
+ Blockchains []Blockchain
+ Accounts []Account
+ Tabs []NavTab
+ SelectedChainID string
+ SelectedAccountID string
+ ActiveTab string
+}
+
+// DefaultBlockchains returns the available blockchain networks
+func DefaultBlockchains() []Blockchain {
+ return []Blockchain{
+ {ID: "sonr", Name: "Sonr", Symbol: "SNR", Icon: "cube", Color: "var(--wa-color-primary)", Testnet: false},
+ {ID: "ethereum", Name: "Ethereum", Symbol: "ETH", Icon: "ethereum", Color: "#627eea", Testnet: false},
+ {ID: "avalanche", Name: "Avalanche", Symbol: "AVAX", Icon: "mountain", Color: "#e84142", Testnet: false},
+ {ID: "polygon", Name: "Polygon", Symbol: "MATIC", Icon: "hexagon", Color: "#8247e5", Testnet: false},
+ {ID: "sonr-testnet", Name: "Sonr Testnet", Symbol: "tSNR", Icon: "cube", Color: "var(--wa-color-warning)", Testnet: true},
+ }
+}
+
+// DefaultAccounts returns the user's wallet accounts
+func DefaultAccounts() []Account {
+ return []Account{
+ {ID: "main", Name: "Main Wallet", Address: "sonr1x9f...7k2m", Initials: "M", Color: "var(--wa-color-primary)", Active: true},
+ {ID: "trading", Name: "Trading", Address: "sonr1k4m...9p3q", Initials: "T", Color: "var(--wa-color-success)", Active: false},
+ {ID: "savings", Name: "Savings", Address: "sonr1r7t...2w8x", Initials: "S", Color: "var(--wa-color-warning)", Active: false},
+ }
+}
+
+// DashboardTabs returns the default dashboard tabs
+func DashboardTabs(activeTab string) []NavTab {
+ return []NavTab{
+ {ID: "overview", Label: "Overview", Icon: "grid-2", Active: activeTab == "overview" || activeTab == ""},
+ {ID: "transactions", Label: "Transactions", Icon: "arrow-right-arrow-left", Active: activeTab == "transactions"},
+ {ID: "tokens", Label: "Tokens", Icon: "coins", Active: activeTab == "tokens"},
+ {ID: "nfts", Label: "NFTs", Icon: "image", Active: activeTab == "nfts"},
+ {ID: "activity", Label: "Activity", Icon: "chart-line", Active: activeTab == "activity"},
+ }
+}
+
+// DefaultNavContext returns the default navigation context
+func DefaultNavContext() NavContext {
+ return NavContext{
+ User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"},
+ Blockchains: DefaultBlockchains(),
+ Accounts: DefaultAccounts(),
+ Tabs: DashboardTabs(""),
+ SelectedChainID: "sonr",
+ SelectedAccountID: "main",
+ ActiveTab: "overview",
+ }
+}
+
+// getSelectedChainName returns the name of the currently selected chain
+func getSelectedChainName(chains []Blockchain, id string) string {
+ for _, c := range chains {
+ if c.ID == id {
+ return c.Name
+ }
+ }
+ return "Network"
+}
+
+// getSelectedAccountName returns the name of the currently selected account
+func getSelectedAccountName(accounts []Account, id string) string {
+ for _, a := range accounts {
+ if a.ID == id {
+ return a.Name
+ }
+ }
+ return "Account"
+}
+
+// AppHeader renders the header section for wa-page header slot
+func AppHeader(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_Var1 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var1 == nil {
+ templ_7745c5c3_Var1 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ return nil
+ })
+}
+
+// AppSubheader renders the tabs section for wa-page subheader slot
+func AppSubheader(tabs []NavTab) 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_Var19 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var19 == nil {
+ templ_7745c5c3_Var19 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ return nil
+ })
+}
+
+// AppNavStyles renders the CSS styles for the navigation components
+func AppNavStyles() 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_Var25 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var25 == nil {
+ templ_7745c5c3_Var25 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ return nil
+ })
+}
+
+var _ = templruntime.GeneratedTemplate