Search documentation of phoenix_kit

# PhoenixKitWeb.Components.Dashboard.Sidebar (phoenix_kit v1.7.87)

Copy Markdown View Source

Sidebar component for the user dashboard.

Renders the complete dashboard navigation with:

- Grouped tabs with headers
- Active state highlighting
- Badge indicators
- Presence counts
- Attention animations
- Mobile bottom navigation
- Collapsible groups
- Context selector (when `position: :sidebar` is configured)

## Usage

    <.dashboard_sidebar
      current_path={@url_path}
      scope={@phoenix_kit_current_scope}
      locale={@current_locale}
    />

## Live Updates

The sidebar automatically updates when tabs change if you subscribe to updates:

    def mount(_params, _session, socket) do
      if connected?(socket) do
        Phoenix.PubSub.subscribe(PhoenixKit.PubSub, PhoenixKit.Dashboard.pubsub_topic())
      end
      {:ok, socket}
    end

    def handle_info({:tab_updated, _tab}, socket) do
      {:noreply, assign(socket, :tabs, PhoenixKit.Dashboard.get_tabs())}
    end

## Summary

### Functions

dashboard_sidebar(assigns)

Renders the complete dashboard sidebar with all tabs.

mobile_fab_menu(assigns)

Renders a floating action button for mobile that opens a tab menu.

mobile_navigation(assigns)

Renders a mobile-friendly bottom navigation bar.

more_menu(assigns)

Renders a "more" dropdown menu for overflow tabs on mobile.

tab_group(assigns)

Renders a group of tabs with optional header.

tab_with_subtabs(assigns)

Renders a tab along with its subtabs (if any).

tabs_with_context_selector(assigns)

Renders tabs with a context selector inserted at the appropriate priority position.

## Functions

# dashboard_sidebar(assigns)

Renders the complete dashboard sidebar with all tabs.

## Attributes

- `current_path` - The current URL path for active state detection
- `scope` - The current authentication scope for visibility filtering
- `locale` - The current locale for path generation
- `tabs` - Optional pre-loaded tabs (defaults to loading from registry)
- `viewer_counts` - Optional map of tab_id => viewer_count
- `collapsed_groups` - Set of collapsed group IDs
- `show_presence` - Show presence indicators (default: true)
- `compact` - Render in compact mode (default: false)
- `class` - Additional CSS classes
- `show_context_selector` - Show context selector at top of sidebar (default: false)
- `dashboard_contexts` - List of available contexts
- `current_context` - Currently selected context
- `context_selector_config` - ContextSelector config struct

## Multi-Selector Attributes (optional)

- `context_selector_configs` - List of all ContextSelector configs
- `dashboard_contexts_map` - Map of key => list of contexts
- `current_contexts_map` - Map of key => current context
- `show_context_selectors_map` - Map of key => boolean

## Attributes

- `current_path` (`:string`) - Defaults to `"/dashboard"`.
- `scope` (`:any`) - Defaults to `nil`.
- `locale` (`:string`) - Defaults to `nil`.
- `tabs` (`:list`) - Defaults to `nil`.
- `viewer_counts` (`:map`) - Defaults to `%{}`.
- `collapsed_groups` (`:any`) - Defaults to `MapSet.new([])`.
- `show_presence` (`:boolean`) - Defaults to `true`.
- `compact` (`:boolean`) - Defaults to `false`.
- `class` (`:string`) - Defaults to `""`.
- `show_context_selector` (`:boolean`) - Defaults to `false`.
- `dashboard_contexts` (`:list`) - Defaults to `[]`.
- `current_context` (`:any`) - Defaults to `nil`.
- `context_selector_config` (`:any`) - Defaults to `nil`.
- `context_selector_configs` (`:list`) - Defaults to `[]`.
- `dashboard_contexts_map` (`:map`) - Defaults to `%{}`.
- `current_contexts_map` (`:map`) - Defaults to `%{}`.
- `show_context_selectors_map` (`:map`) - Defaults to `%{}`.

# mobile_fab_menu(assigns)

Renders a floating action button for mobile that opens a tab menu.

Includes context selector at the top if configured and user has multiple contexts.

## Attributes

- `current_path` (`:string`) - Defaults to `"/dashboard"`.
- `scope` (`:any`) - Defaults to `nil`.
- `locale` (`:string`) - Defaults to `nil`.
- `class` (`:string`) - Defaults to `""`.
- `show_context_selector` (`:boolean`) - Defaults to `false`.
- `dashboard_contexts` (`:list`) - Defaults to `[]`.
- `current_context` (`:any`) - Defaults to `nil`.
- `context_selector_config` (`:any`) - Defaults to `nil`.
- `context_selector_configs` (`:list`) - Defaults to `[]`.
- `dashboard_contexts_map` (`:map`) - Defaults to `%{}`.
- `current_contexts_map` (`:map`) - Defaults to `%{}`.
- `show_context_selectors_map` (`:map`) - Defaults to `%{}`.

# mobile_navigation(assigns)

Renders a mobile-friendly bottom navigation bar.

## Attributes

- `current_path` - The current URL path for active state detection
- `scope` - The current authentication scope
- `locale` - The current locale
- `max_tabs` - Maximum tabs to show (default: 5)
- `class` - Additional CSS classes

## Attributes

- `current_path` (`:string`) - Defaults to `"/dashboard"`.
- `scope` (`:any`) - Defaults to `nil`.
- `locale` (`:string`) - Defaults to `nil`.
- `max_tabs` (`:integer`) - Defaults to `5`.
- `class` (`:string`) - Defaults to `""`.

# more_menu(assigns)

Renders a "more" dropdown menu for overflow tabs on mobile.

## Attributes

- `tabs` (`:list`) (required)
- `locale` (`:string`) - Defaults to `nil`.

# tab_group(assigns)

Renders a group of tabs with optional header.

## Attributes

- `group` (`:map`) (required)
- `tabs` (`:list`) (required)
- `viewer_counts` (`:map`) - Defaults to `%{}`.
- `locale` (`:string`) - Defaults to `nil`.
- `collapsed` (`:boolean`) - Defaults to `false`.
- `compact` (`:boolean`) - Defaults to `false`.

# tab_with_subtabs(assigns)

Renders a tab along with its subtabs (if any).

Subtabs are shown based on the parent tab's `subtab_display` setting:

- `:when_active` - Subtabs only shown when parent is active
- `:always` - Subtabs always visible

## Attributes

- `tab` (`:any`) (required)
- `all_tabs` (`:list`) (required)
- `viewer_counts` (`:map`) - Defaults to `%{}`.
- `locale` (`:string`) - Defaults to `nil`.
- `compact` (`:boolean`) - Defaults to `false`.

# tabs_with_context_selector(assigns)

Renders tabs with a context selector inserted at the appropriate priority position.

## Attributes

- `tabs` (`:list`) (required)
- `all_tabs` (`:list`) (required)
- `viewer_counts` (`:map`) - Defaults to `%{}`.
- `locale` (`:string`) - Defaults to `nil`.
- `compact` (`:boolean`) - Defaults to `false`.
- `show_context_selector` (`:boolean`) - Defaults to `false`.
- `dashboard_contexts` (`:list`) - Defaults to `[]`.
- `current_context` (`:any`) - Defaults to `nil`.
- `context_selector_config` (`:any`) - Defaults to `nil`.