nebula/components/sidebar.templ

package components

// SidebarItem represents a navigation item in the sidebar
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},
	}
}

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