bottomNav.templ

package templdais

type BottomNavAttrs struct {
	Size  string
	Brand string
	Items []BtmNavItem
	Class string
}

type BtmNavItem struct {
	Body  templ.Component
	Button ButtonAttrs
	Attrs  templ.Attributes
	Active bool
}

script SetActive(index int) {
    var items = document.querySelectorAll('.btm-nav button')
    items.forEach((item, i) => {
        if (i === index) {
            item.classList.add('active')
        } else {
            item.classList.remove('active')
        }
    })
}

func (btm BottomNavAttrs) GetClassName() string {
	var class = "btm-nav" + getClassName("", btm.Size, "", "btm-nav")

	if btm.Class != "" {
		class += ` ` + btm.Class
	}

	return trimSpaces(class)
}

func (item BtmNavItem) GetClassName(brand string) string {
	var class = getClassName(brand, item.Button.Figure, item.Button.Size, "text")

	if item.Button.Class != "" {
		class += " " + item.Button.Class
	}

	return trimSpaces(class)
	
}


templ BottomNav(attrs BottomNavAttrs) {
	<nav class={ attrs.GetClassName() }>
		for i, item := range attrs.Items {
			<button 
			{item.Attrs...}
			onfocus={SetActive(i)}
			class={ item.GetClassName(attrs.Brand) }>
				@item.Body
			</button>
		}
	</nav>
}