Packages
moon
2.76.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/parts/sidebar/slim_menu_link.ex
defmodule Moon.Parts.Sidebar.SlimMenuLink do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.MenuItem
alias Moon.Icon
alias Moon.Design.Tooltip
prop(active, :boolean, default: false)
prop(tooltip_text, :string, default: "")
prop(is_collapsed, :boolean, default: false)
@doc "Id attribute for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(icon_class, :css_class)
@doc "Additional Tailwind classes"
prop(tooltip_class, :css_class)
@doc "Route to redirect to"
prop(route, :any)
@doc "Icon name"
prop(icon_name, :any)
@doc "Additional attributes set for the tag a"
prop(attrs, :map, default: %{})
@doc "Active page"
prop(active_page, :string, from_context: :active_page)
def render(assigns) do
~F"""
<Tooltip {=@id} {=@testid} class="self-center">
<Tooltip.Trigger class="rounded-full h-12 w-12">
<MenuItem
as="a"
class={merge([
[
"bg-goku text-bulma justify-start rounded-full p-3 gap-3 h-12 w-12",
"bg-bulma": @active_page == @route
],
@class
])}
attrs={Map.merge(
%{
"data-phx-link": "redirect",
"data-phx-link-state": "push"
},
@attrs
)}
is_active={@active_page == @route}
href={@route}
>
<Icon name={@icon_name} class={merge(["text-moon-24", @icon_class])} />
</MenuItem>
</Tooltip.Trigger>
<Tooltip.Content
position="right"
class={merge(["bg-bulma text-goku z-[19999] mt-1 invisible lg:visible", @tooltip_class])}
>{@tooltip_text}<Tooltip.Arrow class="ms-1" />
</Tooltip.Content>
</Tooltip>
"""
end
end