dev.metalisp.sbt/src/component/dropdown.lisp

;; https://getbootstrap.com/docs/5.3/components/dropdowns/

;; The Bootstrap Dropdown component is a toggleable, contextual menu for
;; displaying lists of links and more. It's made interactive with the inclusion of
;; JavaScript, which allows it to convert a button into a dropdown menu.

;; Key Features:

;; Toggleable: It can be toggled to display or hide its list of links.

;; Contextual: The dropdown can be used in various contexts, such as navigation
;; bars, tabs, and buttons.

;; Flexible: Dropdowns can contain a wide variety of elements, not just links. For
;; example, you could include form elements or other complex sets of content.

;; Customizable: The appearance and behavior of the dropdown can be customized
;; with Bootstrap's built-in classes.

;; In terms of structure, a Bootstrap dropdown typically consists of a button with
;; data-bs-toggle="dropdown" attribute to enable the dropdown functionality, and a
;; div or ul with class .dropdown-menu to create the actual dropdown menu. Each
;; item in the dropdown is typically enclosed in an a or button element with the
;; class .dropdown-item. Additionally, dropdowns can be made to expand
;; upwards (instead of downwards) by adding the .dropup class.

(defpackage cl-sbt/dropdown
  (:use :cl)
  (:export
   :menu
   :item
   :dropdown))

(in-package :cl-sbt/dropdown)

(defmacro menu (&body body)
  "This macro generates a Bootstrap dropdown menu.

BODY: The contents of the menu, which should typically be created using the
`item` macro.

Example:
  (menu (item \"Option 1\") (item \"Option 2\"))
  ; This generates a dropdown menu with two options: 'Option 1' and 'Option 2'."
  `(spinneret:with-html
     (:ul :class "dropdown-menu"
          ,@body)))

(defmacro item (&body body)
  "This macro generates a Bootstrap dropdown item.

BODY: The text for the dropdown item.

Example:
  (item \"Option 1\")
  ; This generates a dropdown item with the text 'Option 1'."
  `(spinneret:with-html
     (:li (:a :class "dropdown-item" :href "#" ,@body))))

(defmacro dropdown ((&key (name "")) &body body)
  "This macro generates a Bootstrap dropdown component.

NAME: The text for the dropdown button.

BODY: The contents of the dropdown, which should be created using the `menu`
macro.

Example:
  (dropdown (:name \"Choose option\")
    (menu
      (item \"Option 1\")
      (item \"Option 2\")))
  ; This generates a dropdown button with the text 'Choose option' and a
  ; dropdown menu with two options."
  `(spinneret:with-html
     (:div :class "dropdown"
           (:button :class "btn btn-secondary dropdown-toggle"
                    :type "button"
                    :data-bs-toggle "dropdown"
                    :aria-expanded "false"
                    ,name)
           ,@body)))