Navbars

import { chevLeftOutlineIcon, chevRightOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonShape } from "@hedia/windfall/css/buttons";
import { DropdownMenuAlign } from "@hedia/windfall/css/dropdowns";
import { JustifySelf, NavbarKind } from "@hedia/windfall/css/navbars";
import { button } from "@hedia/windfall/html/buttons";
import { dropdown, dropdownButton, dropdownMenu } from "@hedia/windfall/html/dropdowns";
import { page, pageHeader } from "@hedia/windfall/html/layouts";
import { menuDivider, menuLink } from "@hedia/windfall/html/menus";
import { navbar, navbarBrand, navbarItem, navbarNav, navbarNavGroup } from "@hedia/windfall/html/navbars";
import { text } from "@hedia/windfall/html/text";

page(
	pageHeader(
		navbar(
			{ kind: NavbarKind.Primary },
			navbarItem({ justifySelf: JustifySelf.Start }, navbarBrand(icon("36"))),
			navbarItem(
				{ justifySelf: JustifySelf.End },
				navbarNav(
					dropdown(
						button(
							{
								shape: ButtonShape.Circular,
								kind: ButtonKind.Secondary,
								"data-action": "toggle",
								"data-target": "#navbarmenu0",
							},
							"WF",
						),
						dropdownMenu(
							{
								align: DropdownMenuAlign.Right,
								id: "navbarmenu0",
							},
							menuLink({ href: "#" }, "Link 1"),
							menuLink({ href: "#" }, "Link 2"),
							menuDivider(),
							menuLink({ href: "#" }, "Link 3"),
						),
					),
				),
			),
		),
		navbar(
			{ kind: NavbarKind.Primary },
			navbarItem(
				{ justifySelf: JustifySelf.Start },
				navbarNavGroup(
					navbarNav(
						dropdown(
							dropdownButton({ dataTarget: "#navbarmenu1" }, "Dropdown 1"),
							dropdownMenu(
								{
									align: DropdownMenuAlign.Left,
									id: "navbarmenu1",
								},
								menuLink({ href: "#" }, "Link 1"),
								menuLink({ href: "#" }, "Link 2"),
							),
						),
						button(
							{ href: "#", kind: ButtonKind.Secondary, shape: ButtonShape.Circular },
							chevLeftOutlineIcon(),
						),
						button(
							{ href: "#", kind: ButtonKind.Secondary, shape: ButtonShape.Circular },
							chevRightOutlineIcon(),
						),
						text("Text 1"),
					),
					navbarNav(
						dropdown(
							dropdownButton({ dataTarget: "#navbarmenu2" }, "Dropdown 2"),
							dropdownMenu(
								{
									align: DropdownMenuAlign.Left,
									id: "navbarmenu2",
								},
								menuLink({ href: "#" }, "Link 1"),
								menuLink({ href: "#" }, "Link 2"),
								menuLink({ href: "#" }, "Link 3"),
								menuLink({ href: "#" }, "Link 4"),
								menuDivider(),
								menuLink({ href: "#" }, "Link 5"),
							),
						),
						dropdown(
							dropdownButton(
								{
									"data-target": "#navbarmenu3",
								},
								"Dropdown 3",
							),
							dropdownMenu(
								{
									align: DropdownMenuAlign.Left,
									id: "navbarmenu3",
								},
								menuLink({ href: "#" }, "Link 1"),
								menuLink({ href: "#" }, "Link 2"),
							),
						),
					),
				),
			),
		),
	),
),