Files
nebula/layouts/app.templ

70 lines
1.8 KiB
Plaintext

package layouts
import "nebula/components"
type WalletUser struct {
Name string
Address string
}
// DashboardLayout renders the dashboard with sidebar and topbar
templ DashboardLayout(title string, user WalletUser, activeTab string) {
@Base(title) {
@components.SidebarStyles()
@components.TopBarStyles()
<!-- Sidebar -->
@components.Sidebar(
components.DefaultSidebarItems(activeTab),
components.SecondarySidebarItems(),
)
<!-- Main App Area -->
<div class="app-layout">
<!-- Top Bar -->
@components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
})
<!-- Main Content -->
<main id="main-content" class="main-content">
{ children... }
</main>
</div>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
}
}
// AppLayout is a simplified layout without sidebar (for non-dashboard pages)
templ AppLayout(title string, user WalletUser) {
@Base(title) {
@components.TopBarStyles()
<!-- Top Bar -->
@components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
})
<!-- Main Content -->
<main class="main-content">
{ children... }
</main>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
}
}