nebula/layouts/app.templ

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>
}