Completed menu actions: 0
Delete activations: 0
open System open FSharp.ViewEngine open Acme.Components.Primitives open Acme.Components.Application open type Html open type Svg open type Datastar type Destination = | Accounts | AccountsPage of int | Account of int | Settings | DropdownMenuGuide let private destinationUrl = function | Accounts -> "/components/page-examples/account-management?destination=ledger-accounts" | AccountsPage page -> $"/components/page-examples/account-management?destination=ledger-accounts&page={page}" | Account id -> $"/components/page-examples/account-management?destination=ledger-account-{id}" | Settings -> "/components/page-examples/account-management?destination=ledger-settings" | DropdownMenuGuide -> "/components/dropdown-menu#components-dropdown-menu" let menuLeadingIcon = raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"/></svg>""" let dropdownMenuItems refreshed = [ MenuItem.group "Account" [ MenuItem.link DropdownMenuGuide "Dropdown menu guidance" MenuItem.action "$menuActivations++" "Record review" |> MenuItem.withLeading menuLeadingIcon |> MenuItem.withShortcut "R" ] MenuItem.separator MenuItem.group "Reports" [ if refreshed then MenuItem.action "$menuActivations++" "Review refreshed actions" else MenuItem.action "@get('/components/menus/actions')" "Refresh actions" MenuItem.action "$menuActivations++" "Export statement" |> MenuItem.disabled MenuItem.action "$menuActivations++" "Syncing ledger" |> MenuItem.pending MenuItem.action "$menuActivations++" "Create report" MenuItem.action "$menuActivations++" "Close period" ] MenuItem.separator MenuItem.destructiveAction "$menuDeletes++" "Delete draft" ] let actionMenu refreshed = DropdownMenu.create "components-menu-actions" "Actions" (dropdownMenuItems refreshed) |> DropdownMenu.withAlignment MenuAlignment.Start |> DropdownMenu.render destinationUrl let moreActionsMenu = DropdownMenu.create "components-menu-more" "More actions" [ MenuItem.group "View" [ MenuItem.link DropdownMenuGuide "Read menu guidance" MenuItem.action "$menuActivations++" "Record secondary action" ] ] |> DropdownMenu.render destinationUrl let dropdownMenuRegion refreshed = div { _id "components-dropdown-menu-region" _dataSignals "{menuActivations: 0, menuDeletes: 0}" div { _class "flex flex-wrap items-center gap-3"; [ actionMenu refreshed; moreActionsMenu ] } p { _class "mt-4 text-sm text-[var(--fve-muted-text)]"; _dataText "'Completed menu actions: ' + $menuActivations"; "Completed menu actions: 0" } p { _class "mt-1 text-sm text-[var(--fve-critical-text)]"; _dataText "'Delete activations: ' + $menuDeletes"; "Delete activations: 0" } if refreshed then p { _role "status"; _class "mt-1 text-sm text-[var(--fve-positive-text)]"; "Actions refreshed from the server." } }
Counters demonstrate activation; no records are deleted. Refresh actions fetches new menu content.