PetalComponents.UserDropdownMenu (petal_components v4.15.4)

Copy Markdown View Source

Summary

Functions

user_dropdown_menu(assigns)

Attributes

  • user_menu_items (:list) - list of maps with keys :path, :icon (atom), :label, :method (atom - optional). Leave it out when you pass your own panel through the inner block. Defaults to [].
  • current_user_name (:string) - the current signed in user's name.
  • current_user_email (:string) - the current signed in user's email. It renders as the second line of the "sidebar" variant's row, under the name - leave it out and the row is a single line. The "icon" variant has nowhere to put it and ignores it. Defaults to nil.
  • avatar_src (:string) - the current signed in user's avatar image src. Defaults to nil.
  • variant (:string) - "icon" is the compact navbar trigger - avatar plus chevron, no wider than it needs to be, which is what a top bar wants. "sidebar" is the full-width row that belongs at the bottom of a sidebar: avatar, name over email, and a chevron-up-down on the right, because from down there the panel genuinely can open either way. Reach for it when the menu has a whole sidebar width to itself and the name is worth showing at rest; pair it with side="top" align="start" when that sidebar sits against the left edge of the screen, or side="right" align="end" to push the panel out over the content area instead. Defaults to "icon". Must be one of "icon", or "sidebar".
  • show_chevron (:boolean) - hide for the chevron-less avatar trigger - the leaner app-shell look. Defaults to true.
  • side (:string) - which side of the trigger the panel opens on, passed through to the dropdown. At the bottom of a sidebar the answer is known, so say it: side="top" renders the panel above the row from the first frame and skips the measuring hook altogether. side="right" is the other sidebar answer - the panel beside the sidebar, out over the content area, instead of on top of the nav it came from. Defaults to nil. Must be one of nil, "bottom", "top", "left", or "right".
  • align (:string) - how the panel lines up along the other axis, passed through to the dropdown. Above or below that is horizontal ("start" grows it rightward, "end" leftward); beside, it is vertical, and "end" is the one a sidebar-bottom menu wants - the panel's bottom edge flush with the row that opened it. Defaults to nil. Must be one of nil, "start", or "end".
  • placement (:string) - the legacy spelling of align, kept working: "left" is align="end" (the panel grows leftward, right edges aligned) and "right" is align="start" (it grows rightward from the trigger's left edge). Prefer align in new code. Either way, reach for the rightward one when the trigger sits against the left viewport edge, like an avatar at the bottom of a sidebar, so the panel grows into the viewport instead of off it. Defaults to "left". Must be one of "left", or "right".
  • direction (:string) - the legacy spelling of side on the vertical axis, kept working: "up" is side="top", "down" is side="bottom", "auto" the measured default. Prefer side in new code. Defaults to "auto". Must be one of "auto", "up", or "down".
  • menu_items_wrapper_class (:any) - extra classes for the panel itself, passed through to the dropdown. The panel is content-width by default; this is where you pin it, e.g. "w-60" for an account panel that should not breathe as its rows change. Defaults to nil.

Slots

  • inner_block - your own panel content, in place of the user_menu_items list. Use it when the menu is more than a list of links - an org switcher, a theme row, a group label or two - and compose it from dropdown_menu_item, dropdown_menu_label, dropdown_menu_row and dropdown_menu_separator. The trigger stays exactly the same.