Grouped navigation
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
type ShellDestination =
| LedgerHome
| LedgerAccounts
| LedgerAccount of int
| LedgerTransaction of int
| LedgerCreateAccount
| LedgerReports
| LedgerSettings
| TreasuryHome
| TreasuryPeriod of string
| TreasuryTransactions
| TreasuryPayees
| TreasuryAccounts
let private shellDestinationKey = function
| LedgerHome -> "ledger-home"
| LedgerAccounts -> "ledger-accounts"
| LedgerAccount id -> $"ledger-account-{id}"
| LedgerTransaction id -> $"ledger-transaction-{id}"
| LedgerCreateAccount -> "ledger-create-account"
| LedgerReports -> "ledger-reports"
| LedgerSettings -> "ledger-settings"
| TreasuryHome -> "treasury-home"
| TreasuryPeriod region -> $"treasury-period-{region.ToLowerInvariant()}"
| TreasuryTransactions -> "treasury-transactions"
| TreasuryPayees -> "treasury-payees"
| TreasuryAccounts -> "treasury-accounts"
let shellDestinationUrl destination =
$"/components/page-examples/account-management?destination={shellDestinationKey destination}"
let private ledgerMark =
raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M4 3.75A1.75 1.75 0 0 1 5.75 2h8.5A1.75 1.75 0 0 1 16 3.75v12.5A1.75 1.75 0 0 1 14.25 18h-8.5A1.75 1.75 0 0 1 4 16.25V3.75Zm3 1.5A.75.75 0 0 0 7.75 6h4.5a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75Zm0 4A.75.75 0 0 0 7.75 10h4.5a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75Zm0 4a.75.75 0 0 0 .75.75h2.5a.75.75 0 0 0 0-1.5h-2.5a.75.75 0 0 0-.75.75Z"/></svg>"""
let private navigationGlyph =
raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-5"><path d="M3.5 4.75A1.25 1.25 0 0 1 4.75 3.5h10.5a1.25 1.25 0 0 1 1.25 1.25v10.5a1.25 1.25 0 0 1-1.25 1.25H4.75a1.25 1.25 0 0 1-1.25-1.25V4.75Z"/></svg>"""
let private shellItem destination label =
SideNavItem.create destination label
|> SideNavItem.withLeading navigationGlyph
let private ledgerNavigation current =
let navigationCurrent =
match current with
| LedgerAccount _ | LedgerCreateAccount -> LedgerAccounts
| LedgerHome | LedgerAccounts | LedgerReports | LedgerSettings -> current
| _ -> LedgerHome
let workspace =
div {
p { _class "text-xs font-semibold uppercase tracking-wide text-[var(--fve-muted-text)]"; "Workspace" }
p { _class "mt-1 truncate text-sm font-semibold"; "Meier Made" }
}
let navigationHeader =
SideNavHeader.create "Ledger"
|> SideNavHeader.withContent (
a {
_href (shellDestinationUrl LedgerHome)
_class "flex min-w-0 items-center gap-3 rounded-[var(--fve-radius-control)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--fve-brand-ring)]"
span { _ariaHidden true; _class "flex size-8 shrink-0 items-center justify-center rounded-[var(--fve-radius-control)] bg-[var(--fve-brand-solid)] text-white"; ledgerMark }
strong { _class "truncate text-base font-semibold"; "Ledger" }
})
SideNav.create "ledger-side-navigation" "Ledger primary navigation" navigationHeader [
SideNavSection.group "Manage" [
shellItem LedgerHome "Dashboard"
shellItem LedgerAccounts "Accounts" ]
SideNavSection.group "Analyze" [ shellItem LedgerReports "Reports" ]
SideNavSection.group "Configure" [ shellItem LedgerSettings "Settings" ] ]
|> fun navigation ->
match current with
| LedgerTransaction _ -> navigation
| _ -> SideNav.withCurrent navigationCurrent navigation
|> SideNav.withWidth SideNavWidth.Standard
|> SideNav.withContext workspace
|> SideNav.withMobileContext workspace
|> SideNav.withFooter (
a {
_href (shellDestinationUrl LedgerSettings)
_class "flex min-h-[var(--fve-control-min-height)] items-center gap-3 rounded-[var(--fve-radius-control)] px-3 py-[var(--fve-control-padding-block)] text-sm font-semibold text-[var(--fve-text)] outline-none hover:bg-[var(--fve-surface-hover)] focus-visible:ring-2 focus-visible:ring-[var(--fve-brand-ring)]"
span { _ariaHidden true; _class "flex size-8 items-center justify-center rounded-full bg-[var(--fve-brand-subtle)] text-xs text-[var(--fve-brand-text)]"; "AM" }
span { _class "min-w-0 truncate"; "Andy Meier" }
})
let groupedLedgerNavigation = ledgerNavigation LedgerAccounts
let sideNavExample = groupedLedgerNavigation |> SideNav.render shellDestinationUrl