defmodule Phoenix.WebComponent.TopAppBar do
@moduledoc """
Conveniences for create top app bar.
"""
alias Phoenix.LiveView
import Phoenix.HTML.Tag
import Phoenix.LiveView.Helpers
@doc """
Generates a top app bar.
Or
Top app bar component
## Examples
wc_top_app_bar([fixed: true], do: "/world")
#=> <mwc-top-app-bar-fixed>/world</mwc-top-app-bar-fixed>
```heex
<.wc_top_app_bar fixed centerTitle slot="appContent" title={@page_title}>
<mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button>
</.wc_top_app_bar>
```
## Options
### Slots of custom element
| Name | Description
| ---- | -----------
| `actionItems` | A number of `<mwc-icon-button>` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).
| `navigationIcon` | One `<mwc-icon-button>` element to use for the left icon.
| `title` | A `<div>` or `<span>` that will be used as the title text.
| _default_ | Scrollable content to display under the bar. This may be the entire application.
### Properties/Attributes of custom element
| Name | Type | Default | Description
| ---- | ---- | ------ | -----------
| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.
| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.
| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.
| `scrollTarget` | `HTMLElement` | `Window` | `window` | Element used to listen for `scroll` events.
### Elixir options
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `title` | binatry | nil | Put content in title slot
"""
def wc_top_app_bar(opts, do: contents) when is_list(opts) do
{fixed, opts} = Keyword.pop(opts, :fixed, false)
app_bar_tag = if fixed, do: :"mwc-top-app-bar-fixed", else: :"mwc-top-app-bar"
{title, opts} = Keyword.pop(opts, :title)
content_tag(app_bar_tag, opts) do
if is_nil(title) do
contents
else
[content_tag(:div, title, class: "app-bar-title", slot: "title"), contents]
end
end
end
def wc_top_app_bar(assigns) do
fixed = assigns[:fixed] || false
title = assigns[:title] || nil
attrs = assigns_to_attributes(assigns, [:fixed, :title])
assigns = LiveView.assign(assigns, fixed: fixed, title: title, attrs: attrs)
~H"""
<%= if @fixed do %>
<mwc-top-app-bar-fixed {@attrs}>
<%= if @title do %>
<div class="app-bar-title" slot="title">
<%= @title %>
</div>
<% end %>
<%= render_slot(@inner_block) %>
</mwc-top-app-bar-fixed>
<% else %>
<mwc-top-app-bar {@attrs}>
<%= if @title do %>
<div class="app-bar-title" slot="title">
<%= @title %>
</div>
<% end %>
<%= render_slot(@inner_block) %>
</mwc-top-app-bar>
<% end %>
"""
end
end