nebula/pkg/wa/page.templ

// Code generated by wa-generator. DO NOT EDIT.
// Source: Web Awesome wa-page

package wa

import (
	"github.com/a-h/templ"
)

// Pages offer an easy way to scaffold entire page layouts using minimal markup.
//
// Web Awesome component: <wa-page>

// PageProps holds all properties for the wa-page component
type PageProps struct {
	// The view is a reflection of the "mobileBreakpoint", when the page is larger than the mobile-breakpoint (768px by
	// Valid values: "mobile", "desktop"
	View string `attr:"view"`
	// Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
	NavOpen bool `attr:"nav-open"`
	// At what page width to hide the "navigation" slot and collapse into a hamburger button.
	MobileBreakpoint string `attr:"mobile-breakpoint"`
	// Where to place the navigation when in the mobile viewport.
	// Valid values: "start", "end"
	NavigationPlacement string `attr:"navigation-placement"`
	// Determines whether or not to hide the default hamburger button.
	DisableNavigationToggle bool `attr:"disable-navigation-toggle"`

	// Events

	// Slots contains named slot content
	Slots PageSlots

	// Attrs contains additional HTML attributes
	Attrs templ.Attributes
}

// PageSlots holds named slot content for the component
type PageSlots struct {
	// The banner that gets display above the header. The banner will not be shown if no content is provided.
	Banner templ.Component
	// The header to display at the top of the page. If a banner is present, the header will appear below the banner. The he...
	Header templ.Component
	// A subheader to display below the header. This is a good place to put things like breadcrumbs.
	Subheader templ.Component
	// The left side of the page. If you slot an element in here, you will override the default navigation slot and will be ...
	Menu templ.Component
	// The header for a navigation area. On mobile this will be the header for <wa-drawer>.
	NavigationHeader templ.Component
	// The main content to display in the navigation area. This is displayed on the left side of the page, if menu is not us...
	Navigation templ.Component
	// The footer for a navigation area. On mobile this will be the footer for <wa-drawer>.
	NavigationFooter templ.Component
	// Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a <wa-button> + ...
	NavigationToggle templ.Component
	// Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars <wa-icon>.
	NavigationToggleIcon templ.Component
	// Header to display inline above the main content.
	MainHeader templ.Component
	// Footer to display inline below the main content.
	MainFooter templ.Component
	// Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "st...
	Aside templ.Component
	// The "skip to content" slot. You can override this If you would like to override the Skip to content button and add ad...
	SkipToContent templ.Component
	// The content to display in the footer. This is always displayed underneath the viewport so will always make the page "...
	Footer templ.Component
}

// PageBuilder provides a fluent API for constructing PageProps
type PageBuilder struct {
	props PageProps
}

// NewPage creates a new builder for wa-page
func NewPage() *PageBuilder {
	return &PageBuilder{}
}

// View sets the view attribute
// The view is a reflection of the "mobileBreakpoint", when the page is larger than the mobile-breakpoint (768px by
func (b *PageBuilder) View(v string) *PageBuilder {
	b.props.View = v
	return b
}

// NavOpen sets the nav-open attribute
// Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
func (b *PageBuilder) NavOpen(v bool) *PageBuilder {
	b.props.NavOpen = v
	return b
}

// MobileBreakpoint sets the mobile-breakpoint attribute
// At what page width to hide the "navigation" slot and collapse into a hamburger button.
func (b *PageBuilder) MobileBreakpoint(v string) *PageBuilder {
	b.props.MobileBreakpoint = v
	return b
}

// NavigationPlacement sets the navigation-placement attribute
// Where to place the navigation when in the mobile viewport.
func (b *PageBuilder) NavigationPlacement(v string) *PageBuilder {
	b.props.NavigationPlacement = v
	return b
}

// DisableNavigationToggle sets the disable-navigation-toggle attribute
// Determines whether or not to hide the default hamburger button.
func (b *PageBuilder) DisableNavigationToggle(v bool) *PageBuilder {
	b.props.DisableNavigationToggle = v
	return b
}

// BannerSlot sets the banner slot content
// The banner that gets display above the header. The banner will not be shown if no content is provided.
func (b *PageBuilder) BannerSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Banner = c
	return b
}

// HeaderSlot sets the header slot content
// The header to display at the top of the page. If a banner is present, the header will appear below the banner. The he...
func (b *PageBuilder) HeaderSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Header = c
	return b
}

// SubheaderSlot sets the subheader slot content
// A subheader to display below the header. This is a good place to put things like breadcrumbs.
func (b *PageBuilder) SubheaderSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Subheader = c
	return b
}

// MenuSlot sets the menu slot content
// The left side of the page. If you slot an element in here, you will override the default navigation slot and will be ...
func (b *PageBuilder) MenuSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Menu = c
	return b
}

// NavigationHeaderSlot sets the navigation-header slot content
// The header for a navigation area. On mobile this will be the header for <wa-drawer>.
func (b *PageBuilder) NavigationHeaderSlot(c templ.Component) *PageBuilder {
	b.props.Slots.NavigationHeader = c
	return b
}

// NavigationSlot sets the navigation slot content
// The main content to display in the navigation area. This is displayed on the left side of the page, if menu is not us...
func (b *PageBuilder) NavigationSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Navigation = c
	return b
}

// NavigationFooterSlot sets the navigation-footer slot content
// The footer for a navigation area. On mobile this will be the footer for <wa-drawer>.
func (b *PageBuilder) NavigationFooterSlot(c templ.Component) *PageBuilder {
	b.props.Slots.NavigationFooter = c
	return b
}

// NavigationToggleSlot sets the navigation-toggle slot content
// Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a <wa-button> + ...
func (b *PageBuilder) NavigationToggleSlot(c templ.Component) *PageBuilder {
	b.props.Slots.NavigationToggle = c
	return b
}

// NavigationToggleIconSlot sets the navigation-toggle-icon slot content
// Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars <wa-icon>.
func (b *PageBuilder) NavigationToggleIconSlot(c templ.Component) *PageBuilder {
	b.props.Slots.NavigationToggleIcon = c
	return b
}

// MainHeaderSlot sets the main-header slot content
// Header to display inline above the main content.
func (b *PageBuilder) MainHeaderSlot(c templ.Component) *PageBuilder {
	b.props.Slots.MainHeader = c
	return b
}

// MainFooterSlot sets the main-footer slot content
// Footer to display inline below the main content.
func (b *PageBuilder) MainFooterSlot(c templ.Component) *PageBuilder {
	b.props.Slots.MainFooter = c
	return b
}

// AsideSlot sets the aside slot content
// Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "st...
func (b *PageBuilder) AsideSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Aside = c
	return b
}

// SkipToContentSlot sets the skip-to-content slot content
// The "skip to content" slot. You can override this If you would like to override the Skip to content button and add ad...
func (b *PageBuilder) SkipToContentSlot(c templ.Component) *PageBuilder {
	b.props.Slots.SkipToContent = c
	return b
}

// FooterSlot sets the footer slot content
// The content to display in the footer. This is always displayed underneath the viewport so will always make the page "...
func (b *PageBuilder) FooterSlot(c templ.Component) *PageBuilder {
	b.props.Slots.Footer = c
	return b
}

// Attr adds a custom HTML attribute
func (b *PageBuilder) Attr(name, value string) *PageBuilder {
	if b.props.Attrs == nil {
		b.props.Attrs = templ.Attributes{}
	}
	b.props.Attrs[name] = value
	return b
}

// Attrs merges multiple attributes
func (b *PageBuilder) Attrs(attrs templ.Attributes) *PageBuilder {
	if b.props.Attrs == nil {
		b.props.Attrs = templ.Attributes{}
	}
	for k, v := range attrs {
		b.props.Attrs[k] = v
	}
	return b
}

// Props returns the built properties
func (b *PageBuilder) Props() PageProps {
	return b.props
}

// Build returns the props (alias for Props for semantic clarity)
func (b *PageBuilder) Build() PageProps {
	return b.props
}

// Page renders the wa-page component
templ Page(props PageProps) {
	<wa-page
		if props.View != "" {
			view={ props.View }
		}
		if props.NavOpen {
			nav-open
		}
		if props.MobileBreakpoint != "" {
			mobile-breakpoint={ props.MobileBreakpoint }
		}
		if props.NavigationPlacement != "" {
			navigation-placement={ props.NavigationPlacement }
		}
		if props.DisableNavigationToggle {
			disable-navigation-toggle
		}
		{ props.Attrs... }
	>
		if props.Slots.Banner != nil {
			<div slot="banner">
				@props.Slots.Banner
			</div>
		}
		if props.Slots.Header != nil {
			<div slot="header">
				@props.Slots.Header
			</div>
		}
		if props.Slots.Subheader != nil {
			<div slot="subheader">
				@props.Slots.Subheader
			</div>
		}
		if props.Slots.Menu != nil {
			<div slot="menu">
				@props.Slots.Menu
			</div>
		}
		if props.Slots.NavigationHeader != nil {
			<div slot="navigation-header">
				@props.Slots.NavigationHeader
			</div>
		}
		if props.Slots.Navigation != nil {
			<div slot="navigation">
				@props.Slots.Navigation
			</div>
		}
		if props.Slots.NavigationFooter != nil {
			<div slot="navigation-footer">
				@props.Slots.NavigationFooter
			</div>
		}
		if props.Slots.NavigationToggle != nil {
			<div slot="navigation-toggle">
				@props.Slots.NavigationToggle
			</div>
		}
		if props.Slots.NavigationToggleIcon != nil {
			<div slot="navigation-toggle-icon">
				@props.Slots.NavigationToggleIcon
			</div>
		}
		if props.Slots.MainHeader != nil {
			<div slot="main-header">
				@props.Slots.MainHeader
			</div>
		}
		if props.Slots.MainFooter != nil {
			<div slot="main-footer">
				@props.Slots.MainFooter
			</div>
		}
		if props.Slots.Aside != nil {
			<div slot="aside">
				@props.Slots.Aside
			</div>
		}
		if props.Slots.SkipToContent != nil {
			<div slot="skip-to-content">
				@props.Slots.SkipToContent
			</div>
		}
		if props.Slots.Footer != nil {
			<div slot="footer">
				@props.Slots.Footer
			</div>
		}
		{ children... }
	</wa-page>
}

// PageFunc renders with a builder function for inline configuration
templ PageFunc(fn func(*PageBuilder)) {
	{{ b := NewPage(); fn(b) }}
	@Page(b.Props()) {
		{ children... }
	}
}