}
+ */
+ get applyDOMChangesFn() {
+ return this._applyDOMChangesFn
+ }
+
+ set applyDOMChangesFn(value) {
+ this._applyDOMChangesFn = value
+ }
+
+ /** methods */
+
+ /**
+ * Runs the focus manager to initialize the collections.
+ */
+ run() {
+ this._items[this._id].forEach((item) => {
+ const menuItemContent = item.textContent?.trim().toLowerCase()[0]
+ if (menuItemContent) this._firstChars[this._id].push(menuItemContent)
+
+ if (!this._firstItem[this._id]) {
+ this._firstItem[this._id] = item
+ }
+ this._lastItem[this._id] = item
+ })
+ }
+
+ /**
+ * Sets the focus to the first item.
+ * @param {string} [cId] - Optional ID of the component.
+ */
+ setFocusToFirstItem(cId) {
+ const id = this._resolveId(cId)
+ this._setFocusToItem(this._firstItem[id])
+ }
+
+ /**
+ * Sets the focus to the last item.
+ * @param {string} [cId] - Optional ID of the component.
+ */
+ setFocusToLastItem(cId) {
+ const id = this._resolveId(cId)
+ this._setFocusToItem(this._lastItem[id])
+ }
+
+ /**
+ * Sets the focus to the previous item relative to the current item.
+ * @param {HTMLElement} currentItem - The current item.
+ * @param {string} [cId] - Optional ID of the component.
+ * @returns {HTMLElement} The new focused item.
+ */
+ setFocusToPreviousItem(currentItem, cId) {
+ const id = this._resolveId(cId)
+ let newMenuItem, index
+
+ if (currentItem === this._firstItem[id]) {
+ newMenuItem = this._lastItem[id]
+ } else {
+ index = this._items[id].indexOf(currentItem)
+ newMenuItem = this._items[id][index - 1]
+ }
+
+ this._setFocusToItem(newMenuItem)
+ return newMenuItem
+ }
+
+ /**
+ * Sets the focus to the next item relative to the current item.
+ * @param {HTMLElement} currentItem - The current item.
+ * @param {string} [cId] - Optional ID of the component.
+ * @returns {HTMLElement} The new focused item.
+ */
+ setFocusToNextItem(currentItem, cId) {
+ const id = this._resolveId(cId)
+ let newMenuItem, index
+
+ if (currentItem === this._lastItem[id]) {
+ newMenuItem = this._firstItem[id]
+ } else {
+ index = this._items[id].indexOf(currentItem)
+ newMenuItem = this._items[id][index + 1]
+ }
+
+ this._setFocusToItem(newMenuItem)
+ return newMenuItem
+ }
+
+ /**
+ * Sets the focus to the item whose content starts with the specified character.
+ * @param {HTMLElement} currentItem - The current item.
+ * @param {string} c - The character to match.
+ */
+ setFocusByFirstChar(currentItem, c) {
+ let start, index
+
+ if (c.length > 1) return
+ c = c.toLowerCase()
+ start = this._items[this._id].indexOf(currentItem) + 1
+ if (start >= this._items[this._id].length) {
+ start = 0
+ }
+ index = this._firstChars[this._id].indexOf(c, start)
+ if (index === -1) {
+ index = this._firstChars[this._id].indexOf(c, 0)
+ }
+ if (index > -1) {
+ this._setFocusToItem(this._items[this._id][index])
+ }
+ }
+
+ /**
+ * Checks if the given node is a submenu.
+ * @param {HTMLElement} node - The node to check.
+ * @returns {boolean} A boolean indicating whether the node is a submenu.
+ */
+ isSubMenu(node) {
+ return node.getAttribute('aria-haspopup') === 'true'
+ }
+
+ /**
+ * Resolves the ID to use based on the provided ID or the default ID of the component.
+ * @param {string} [id] - The optional ID to resolve.
+ * @returns {string} The resolved ID.
+ * @private
+ */
+ _resolveId(id) {
+ return !isNullish(id) ? id : this._id
+ }
+
+ /**
+ * Sets the focus to the given item.
+ * @param {HTMLElement | null} item - The item to set focus to.
+ * @private
+ */
+ async _setFocusToItem(item) {
+ if (this._items[this._id] && item) {
+ await Promise.all(
+ this._items[this._id].map(async (itemNode) => {
+ if (itemNode === item) {
+ itemNode.tabIndex = 0
+ await this.applyDOMChangesFn()
+ itemNode.focus()
+ } else {
+ itemNode.tabIndex = -1
+ }
+ })
+ )
+ }
+ }
+ }
+
+ /**
+ * Initializes accessibility actions for a dropdown component.
+ * @param {HTMLElement} node - The root element of the dropdown component.
+ * @param {object} options - Options for configuring the accessibility actions.
+ * @param {boolean} options.enabled - Flag indicating if the accessibility actions on the dropdown should be enabled.
+ * @param {boolean} options.open - Flag indicating if the dropdown is initially open.
+ * @param {boolean} options.animated - Flag indicating if the dropdown menu button should use icon animations.
+ */
+ function a11yActions(node, options) {
+ let open = options?.open
+ const animated = options?.animated
+ const componentId = getComponentId(node)
+ const focusManager = new ComponentFocusManager(componentId)
+ const listGroups = {}
+ const firstChars = {}
+ const firstItem = {}
+ const lastItem = {}
+
+ // Initializes the dropdown component.
+ const initialize = () => {
+ listGroups[componentId] = []
+ firstChars[componentId] = []
+ firstItem[componentId] = null
+ lastItem[componentId] = null
+ }
+
+ /**
+ * Checks if the given target element is a link (anchor tag).
+ *
+ * @param {HTMLElement} target - The target element to check.
+ * @returns {boolean} Returns true if the target element is a link, otherwise false.
+ */
+ const isLinkElement = (target) => {
+ return target.tagName === 'A';
+ };
+
+ /**
+ * Handles click events on dropdown items, performing appropriate actions based on the type of item.
+ *
+ * @param {Event} e - The click event.
+ */
+ const handleClickOnItem = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (isLinkElement(e.target)) {
+ handleLinkClick(e.target);
+ } else {
+ handleButtonClick();
+ }
+ };
+
+ /**
+ * Handles click events on link elements, navigating to the specified URL and closing the dropdown if necessary.
+ *
+ * @param {HTMLElement} linkElement - The link element that was clicked.
+ */
+ const handleLinkClick = (linkElement) => {
+ const href = linkElement.getAttribute('href');
+ const isExternal = linkElement.getAttribute('data-external') === 'true';
+
+ if (href) {
+ if (isExternal) {
+ window.open(href, '_blank');
+ } else {
+ window.location.href = href;
+ }
+ }
+ closeMenu();
+ };
+
+ // Handles click events on button items, closing the dropdown if necessary.
+ const handleButtonClick = () => {
+ closeMenu();
+ };
+
+ // Toggles the dropdown open/close state.
+ const toggleDropdown = () => {
+ open = !open
+ const ariaExpanded = open ? 'true' : 'false'
+ node
+ .querySelector('[class*="gddButton"]')
+ .setAttribute('aria-expanded', ariaExpanded)
+
+ const container = node.closest('[class*="gddContainer"]')
+ if (!container) return
+
+ const ulElement = container.querySelector('ul[role="menu"]')
+ if (!ulElement) return
+
+ const currentState = ulElement.getAttribute('data-state')
+ ulElement.setAttribute(
+ 'data-state',
+ currentState === 'open' ? 'close' : 'open'
+ )
+
+ if(animated) {
+ const svgElement = node.querySelector('svg');
+ svgElement.classList.toggle('iconToOpen', currentState === 'close');
+ svgElement.classList.toggle('iconToClose', currentState === 'open');
+ }
+ }
+
+ const closeMenu = () => {
+ toggleDropdown()
+ node.focus()
+ }
+
+ // Button click event handler.
+ const onButtonClick = (e) => {
+ e.stopPropagation()
+ e.preventDefault()
+ toggleDropdown()
+ if (open) focusManager.setFocusToFirstItem()
+ }
+
+ // Button keydown event handler.
+ const onButtonKeydown = (e) => {
+ e.stopPropagation()
+ e.preventDefault()
+ switch (e.code) {
+ case 'Space':
+ case 'Enter':
+ case 'Down':
+ case 'ArrowDown':
+ if(!open){ // handle not open by default
+ toggleDropdown()
+ }
+ focusManager.setFocusToFirstItem()
+ break
+ case 'Up':
+ case 'ArrowUp':
+ if(!open){ // handle not open by default
+ toggleDropdown()
+ }
+ focusManager.setFocusToLastItem()
+ break
+ case 'Tab':
+ node.blur()
+ break
+ default:
+ break
+ }
+ }
+
+ // Item click event handler.
+ const onItemClick = handleClickOnItem;
+
+ // Item keydown event handler.
+ const onItemKeydown = (e) => {
+ e.stopPropagation()
+ e.preventDefault()
+ const target = e.currentTarget
+
+ if (e.shiftKey) {
+ if (isChar(e.key)) {
+ focusManager.setFocusByFirstChar(target, e.key)
+ }
+ } else {
+ switch (e.code) {
+ case 'Space':
+ case 'Enter':
+ handleClickOnItem(e)
+ break
+ case 'Esc':
+ case 'Escape':
+ closeMenu()
+ dropdownBtn.focus()
+ break
+ case 'Up':
+ case 'ArrowUp':
+ focusManager.setFocusToPreviousItem(target)
+ break
+ case 'Down':
+ case 'ArrowDown':
+ focusManager.setFocusToNextItem(target)
+ break
+ case 'Home':
+ case 'PageUp':
+ focusManager.setFocusToFirstItem()
+ break
+ case 'End':
+ case 'PageDown':
+ focusManager.setFocusToLastItem()
+ break
+ default:
+ if (isChar(e.key)) {
+ focusManager.setFocusByFirstChar(target, e.key)
+ }
+ }
+ }
+ }
+
+ // Item mouseover event handler.
+ const onItemMouseOver = (e) => {
+ const target = e.currentTarget
+ target.focus()
+ }
+
+ initialize()
+
+ const dropdownBtn = node.querySelector('[class*="gddButton"]')
+ if (options?.enabled) {
+ node.addEventListener('click', onButtonClick)
+ node.addEventListener('keydown', onButtonKeydown)
+
+ const menuItemNodes = Array.from(node.querySelectorAll('[role="menuitem"]'))
+
+ menuItemNodes.forEach((item) => {
+ item.addEventListener('keydown', onItemKeydown)
+ item.addEventListener('mouseover', onItemMouseOver)
+ item.addEventListener('click', onItemClick)
+ listGroups[componentId].push(item)
+
+ const itemContent = item.textContent?.trim().toLowerCase()[0]
+ if (itemContent) firstChars[componentId].push(itemContent)
+
+ if (!firstItem[componentId]) {
+ firstItem[componentId] = item
+ }
+ lastItem[componentId] = item
+ })
+
+ focusManager.items = listGroups
+ focusManager.firstChars = firstChars
+ focusManager.firstItem = firstItem
+ focusManager.lastItem = lastItem
+
+ // set the focus on the button when open by default.
+ if (open) {
+ dropdownBtn.focus()
+ }
+ }
+ }
+
+ /**
+ * Handles the action to close the dropdown when clicked outside of it.
+ * @param {MouseEvent} e - The event object generated by the click action.
+ * @param {object} options - Options for configuring the accessibility actions.
+ * @param {boolean} options.animated - Flag indicating if the dropdown menu button should use icon animations.
+ */
+ function clickOutsideAction(e, options) {
+ const animated = options?.animated || true
+ const dropdownContainer = document.querySelector('[class*="gddContainer"]')
+ if (!dropdownContainer) return
+
+ const isClickedInsideDropdown = dropdownContainer.contains(e.target)
+ if (!isClickedInsideDropdown) {
+ dropdownBtn = dropdownContainer.querySelector('[class*="gddButton"]')
+ dropdownBtn.setAttribute('aria-expanded', false)
+
+ if (animated) {
+ const svgElement = dropdownBtn.querySelector('svg')
+ svgElement.classList.remove('iconToOpen')
+ svgElement.classList.remove('iconToClose')
+ }
+
+ const ulElement = dropdownContainer.querySelector('ul[role="menu"]')
+ if (!ulElement) return
+
+ ulElement.setAttribute('data-state','close' )
+ }
+ }
+
+ document.body.addEventListener('click', clickOutsideAction);
+
+ document.addEventListener('DOMContentLoaded', function () {
+ const dropdownContainers = document.querySelectorAll('[class*="gddContainer"]')
+ for (let i = 0; i < dropdownContainers.length; i++) {
+ a11yActions(dropdownContainers[i], {
+ enabled: true,
+ open: dropdown.Open,
+ animated: dropdown.Animation,
+ })
+ }
+ });
+}`,
+ Call: templ.SafeScript(`__templ_GropdownJS_5151`, dropdown),
+ CallInline: templ.SafeScriptInline(`__templ_GropdownJS_5151`, dropdown),
+ }
+}
diff --git a/gropdown-list.templ b/gropdown-list.templ
new file mode 100644
index 0000000..7fe6526
--- /dev/null
+++ b/gropdown-list.templ
@@ -0,0 +1,36 @@
+package gropdown
+
+templ itemsList(dropdown *Dropdown) {
+
+ for _, item := range dropdown.Items {
+ @entry(item)
+ }
+
+}
+
+css gddUL() {
+ overflow: hidden;
+ list-style: none;
+ width: var(--gdd-list-w);
+ max-width: var(--gdd-list-max-w);
+ margin: var(--gdd-list-my) var(--gdd-list-mx);
+ padding: var(--gdd-list-py) var(--gdd-list-px);
+ background-color: var(--gdd-list-bg-color);
+ border-width: var(--gdd-list-border-width);
+ border-style: var(--gdd-list-border-style);
+ border-color: var(--gdd-list-border-color);
+ border-radius: var(--gdd-list-border-radius);
+}
diff --git a/gropdown-list_templ.go b/gropdown-list_templ.go
new file mode 100644
index 0000000..add28dd
--- /dev/null
+++ b/gropdown-list_templ.go
@@ -0,0 +1,105 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package gropdown
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+import "strings"
+
+func itemsList(dropdown *Dropdown) templ.Component {
+ return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+ templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+ if !templ_7745c5c3_IsBuffer {
+ templ_7745c5c3_Buffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+ }
+ ctx = templ.InitializeContext(ctx)
+ templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var1 == nil {
+ templ_7745c5c3_Var1 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ var templ_7745c5c3_Var2 = []any{gddUL()}
+ templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ for _, item := range dropdown.Items {
+ templ_7745c5c3_Err = entry(item).Render(ctx, templ_7745c5c3_Buffer)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ if !templ_7745c5c3_IsBuffer {
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+ }
+ return templ_7745c5c3_Err
+ })
+}
+
+func gddUL() templ.CSSClass {
+ var templ_7745c5c3_CSSBuilder strings.Builder
+ templ_7745c5c3_CSSBuilder.WriteString(`overflow:hidden;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`list-style:none;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`width:var(--gdd-list-w);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`max-width:var(--gdd-list-max-w);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`margin:var(--gdd-list-my) var(--gdd-list-mx);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`padding:var(--gdd-list-py) var(--gdd-list-px);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`background-color:var(--gdd-list-bg-color);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`border-width:var(--gdd-list-border-width);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`border-style:var(--gdd-list-border-style);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`border-color:var(--gdd-list-border-color);`)
+ templ_7745c5c3_CSSBuilder.WriteString(`border-radius:var(--gdd-list-border-radius);`)
+ templ_7745c5c3_CSSID := templ.CSSID(`gddUL`, templ_7745c5c3_CSSBuilder.String())
+ return templ.ComponentCSSClass{
+ ID: templ_7745c5c3_CSSID,
+ Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
+ }
+}
diff --git a/gropdown.go b/gropdown.go
new file mode 100644
index 0000000..5d69ac0
--- /dev/null
+++ b/gropdown.go
@@ -0,0 +1,88 @@
+package gropdown
+
+import "github.com/a-h/templ"
+
+// Position represents a position on the screen.
+type Position string
+
+func (p Position) String() string {
+ return string(p)
+}
+
+// DropdownButton represents the main button for the dropdown menu.
+type DropdownButton struct {
+ Label string // Label is the text displayed for the dropdown button.
+ Icon string // Icon is the icon displayed next to the dropdown button.
+ Attrs templ.Attributes // Attrs is a map of attributes to be added to the button.
+}
+
+// DropdownItem represents an item in the dropdown menu.
+type DropdownItem struct {
+ Label string // Label is the text displayed for the dropdown item.
+ Icon string // Icon is the icon displayed next to the dropdown item.
+ Href string // Href is the URL associated with the dropdown item (optional).
+ External bool // External if the URL associated with the dropdown item is an external URL (optional).
+ Divider bool // Divider indicates whether the item is a divider.
+ Attrs templ.Attributes // Attrs is a map of attributes to be added to the element.
+}
+
+// Dropdown represents a dropdown menu component.
+type Dropdown struct {
+ Open bool // Open indicates whether the dropdown menu is currently open.
+ Animation bool // Animation indicates whether the dropdown button should use animations on open and close.
+ Position Position // Position indicates the position of the dropdown content relative to the button.
+ Button DropdownButton // Button is the dropdown button configuration.
+ Items []DropdownItem // Items is a slice of dropdown menu items.
+}
+
+// DropdownBuilder is used to construct Dropdown instances with options.
+type DropdownBuilder struct {
+ dropdown *Dropdown
+}
+
+func (b *DropdownBuilder) Dropdown() *Dropdown {
+ return b.dropdown
+}
+
+// NewDropdownBuilder creates a new DropdownBuilder instance with default settings.
+func NewDropdownBuilder() *DropdownBuilder {
+ return &DropdownBuilder{dropdown: &Dropdown{
+ Open: false,
+ Animation: true,
+ Position: Bottom,
+ }}
+}
+
+// SetOpen sets the Open field of the dropdown.
+func (b *DropdownBuilder) SetOpen(open bool) *DropdownBuilder {
+ b.dropdown.Open = open
+ return b
+}
+
+// SetAnimation sets the animations for the dropdown button icon when open/close.
+func (b *DropdownBuilder) SetAnimation(animation bool) *DropdownBuilder {
+ b.dropdown.Animation = animation
+ return b
+}
+
+func (b *DropdownBuilder) SetPosition(position Position) *DropdownBuilder {
+ b.dropdown.Position = position
+ return b
+}
+
+// WithButton sets the Button field of the dropdown.
+func (b *DropdownBuilder) WithButton(button DropdownButton) *DropdownBuilder {
+ b.dropdown.Button = button
+ return b
+}
+
+// WithItems sets the Items field of the dropdown.
+func (b *DropdownBuilder) WithItems(items []DropdownItem) *DropdownBuilder {
+ b.dropdown.Items = items
+ return b
+}
+
+// Render constructs and returns a templ.Component representing the dropdown.
+func (b *DropdownBuilder) Render() templ.Component {
+ return container(b.dropdown)
+}
diff --git a/gropdown.templ b/gropdown.templ
new file mode 100644
index 0000000..e4dbb67
--- /dev/null
+++ b/gropdown.templ
@@ -0,0 +1,19 @@
+package gropdown
+
+templ container(dropdown *Dropdown) {
+
+ @button(dropdown.Button)
+ @content(dropdown)
+
+}
+
+css gddContainer() {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-smooth: auto;
+ position: relative;
+ display: inline-block;
+}
diff --git a/gropdown_templ.go b/gropdown_templ.go
new file mode 100644
index 0000000..4d32a0d
--- /dev/null
+++ b/gropdown_templ.go
@@ -0,0 +1,83 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.598
+package gropdown
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+import "strings"
+
+func container(dropdown *Dropdown) templ.Component {
+ return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+ templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+ if !templ_7745c5c3_IsBuffer {
+ templ_7745c5c3_Buffer = templ.GetBuffer()
+ defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+ }
+ ctx = templ.InitializeContext(ctx)
+ templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+ if templ_7745c5c3_Var1 == nil {
+ templ_7745c5c3_Var1 = templ.NopComponent
+ }
+ ctx = templ.ClearChildren(ctx)
+ var templ_7745c5c3_Var2 = []any{gddContainer()}
+ templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ templ_7745c5c3_Err = button(dropdown.Button).Render(ctx, templ_7745c5c3_Buffer)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ templ_7745c5c3_Err = content(dropdown).Render(ctx, templ_7745c5c3_Buffer)
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
")
+ if templ_7745c5c3_Err != nil {
+ return templ_7745c5c3_Err
+ }
+ if !templ_7745c5c3_IsBuffer {
+ _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+ }
+ return templ_7745c5c3_Err
+ })
+}
+
+func gddContainer() templ.CSSClass {
+ var templ_7745c5c3_CSSBuilder strings.Builder
+ templ_7745c5c3_CSSBuilder.WriteString(`-webkit-font-smoothing:antialiased;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`-moz-osx-font-smoothing:grayscale;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`font-smooth:auto;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`position:relative;`)
+ templ_7745c5c3_CSSBuilder.WriteString(`display:inline-block;`)
+ templ_7745c5c3_CSSID := templ.CSSID(`gddContainer`, templ_7745c5c3_CSSBuilder.String())
+ return templ.ComponentCSSClass{
+ ID: templ_7745c5c3_CSSID,
+ Class: templ.SafeCSS(`.` + templ_7745c5c3_CSSID + `{` + templ_7745c5c3_CSSBuilder.String() + `}`),
+ }
+}
diff --git a/gropdown_test.go b/gropdown_test.go
new file mode 100644
index 0000000..cc0d964
--- /dev/null
+++ b/gropdown_test.go
@@ -0,0 +1,136 @@
+package gropdown
+
+import (
+ "testing"
+
+ "github.com/a-h/templ"
+)
+
+func TestDropdownBuilder(t *testing.T) {
+ tests := []struct {
+ name string
+ builder *DropdownBuilder
+ expectedOpenState bool
+ expectedAnimation bool
+ expectedPosition Position
+ expectedButtonLabel string
+ expectedButtonIcon string
+ expectedButtonAttrs map[string]string
+ expectedItems []DropdownItem
+ expectedDividerExists bool
+ }{
+ // Test cases for options and config settings
+ {
+ name: "Dropdown with Open State Set to True",
+ builder: NewDropdownBuilder().
+ SetOpen(true).
+ SetAnimation(false).
+ SetPosition(Bottom).
+ WithButton(DropdownButton{
+ Label: "Dropdown",
+ Icon: "icon",
+ }).
+ WithItems([]DropdownItem{
+ {Label: "Item 1"},
+ {Label: "Item 2"},
+ {Label: "Item 3"},
+ }),
+ expectedOpenState: true,
+ expectedPosition: Bottom,
+ },
+ {
+ name: "Dropdown with Animation Disabled",
+ builder: NewDropdownBuilder().
+ SetOpen(false).
+ SetAnimation(false).
+ SetPosition(Bottom).
+ WithButton(DropdownButton{
+ Label: "Dropdown",
+ Icon: "icon",
+ }).
+ WithItems([]DropdownItem{
+ {Label: "Item 1"},
+ {Label: "Item 2"},
+ {Label: "Item 3"},
+ }),
+ expectedAnimation: false,
+ expectedPosition: Bottom,
+ },
+ {
+ name: "Dropdown with Custom Button Configuration",
+ builder: NewDropdownBuilder().
+ SetOpen(false).
+ SetAnimation(false).
+ SetPosition(Left).
+ WithButton(DropdownButton{
+ Label: "Custom Button",
+ Icon: "custom-icon",
+ Attrs: templ.Attributes{
+ "id": "custom-button-id",
+ "class": "custom-button-class",
+ },
+ }).
+ WithItems([]DropdownItem{
+ {Label: "Item 1"},
+ {Label: "Item 2"},
+ {Label: "Item 3"},
+ }),
+ expectedPosition: Left,
+ },
+ {
+ name: "Dropdown with Custom Item Configuration",
+ builder: NewDropdownBuilder().
+ SetOpen(false).
+ SetAnimation(false).
+ SetPosition(Right).
+ WithButton(DropdownButton{
+ Label: "Dropdown",
+ Icon: "icon",
+ }).
+ WithItems([]DropdownItem{
+ {Label: "Item 1", Icon: "item-icon-1", Href: "/item1", External: true},
+ {Label: "Item 2", Icon: "item-icon-2", Href: "/item2"},
+ {Label: "Item 3", Icon: "item-icon-3"},
+ }),
+ expectedPosition: Right,
+ },
+ {
+ name: "Dropdown with Divider",
+ builder: NewDropdownBuilder().
+ SetOpen(false).
+ SetAnimation(false).
+ SetPosition(Right).
+ WithButton(DropdownButton{
+ Label: "Dropdown",
+ Icon: "icon",
+ }).
+ WithItems([]DropdownItem{
+ {Label: "Item 1", Icon: "item-icon-1", Href: "/item1", External: true},
+ {Label: "Item 2", Icon: "item-icon-2", Href: "/item2"},
+ {Label: "Item 3", Icon: "item-icon-3"},
+ {},
+ {Label: "Item 4", Icon: "item-icon-4", Href: "/item4"},
+ }),
+ expectedPosition: Right,
+ expectedDividerExists: true,
+ },
+ }
+
+ for _, tt := range tests {
+ t.Run(tt.name, func(t *testing.T) {
+ dropdown := tt.builder.Dropdown()
+
+ if tt.expectedOpenState != dropdown.Open {
+ t.Errorf("unexpected open state: got %v, want %v", dropdown.Open, tt.expectedOpenState)
+ }
+
+ if tt.expectedAnimation != dropdown.Animation {
+ t.Errorf("unexpected animation setting: got %v, want %v", dropdown.Animation, tt.expectedAnimation)
+ }
+
+ if tt.expectedPosition != dropdown.Position {
+ t.Errorf("unexpected position: got %v, want %v", dropdown.Position, tt.expectedPosition)
+ }
+ })
+ }
+}
diff --git a/statics/demo.gif b/statics/demo.gif
new file mode 100644
index 0000000..7e44da6
Binary files /dev/null and b/statics/demo.gif differ
diff --git a/types.go b/types.go
new file mode 100644
index 0000000..fdce157
--- /dev/null
+++ b/types.go
@@ -0,0 +1,36 @@
+package gropdown
+
+import "github.com/a-h/templ"
+
+// Position represents a position on the screen.
+type Position string
+
+func (p Position) String() string {
+ return string(p)
+}
+
+// DropdownButton represents the main button for the dropdown menu.
+type DropdownButton struct {
+ Label string // Label is the text displayed for the dropdown button.
+ Icon string // Icon is the icon displayed next to the dropdown button.
+ Attrs templ.Attributes // Attrs is a map of attributes to be added to the button.
+}
+
+// DropdownItem represents an item in the dropdown menu.
+type DropdownItem struct {
+ Label string // Label is the text displayed for the dropdown item.
+ Icon string // Icon is the icon displayed next to the dropdown item.
+ Href string // Href is the URL associated with the dropdown item (optional).
+ External bool // External if the URL associated with the dropdown item is an external URL (optional).
+ Divider bool // Divider indicates whether the item is a divider.
+ Attrs templ.Attributes // Attrs is a map of attributes to be added to the element.
+}
+
+// Dropdown represents a dropdown menu component.
+type Dropdown struct {
+ Open bool // Open indicates whether the dropdown menu is currently open.
+ Animation bool // Animation indicates whether the dropdown button should use animations on open and close.
+ Position Position // Position indicates the position of the dropdown content relative to the button.
+ Button DropdownButton // Button is the dropdown button configuration.
+ Items []DropdownItem // Items is a slice of dropdown menu items.
+}
diff --git a/utils.go b/utils.go
new file mode 100644
index 0000000..c77ba2a
--- /dev/null
+++ b/utils.go
@@ -0,0 +1,14 @@
+package gropdown
+
+import (
+ "fmt"
+ "strings"
+)
+
+func buttonId(label string) string {
+ return fmt.Sprintf("dropdown-button-%s", strings.ToLower(label))
+}
+
+func menuId(label string) string {
+ return fmt.Sprintf("dropdown-menu-%s", strings.ToLower(label))
+}
+
+
+
+ 
+
+
+