Packages
moon
2.82.0
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.ex
defmodule Moon.Parts.Sidebar.Slim do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Parts.Sidebar
@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(slim_top_class, :css_class)
@doc "Additional Tailwind classes"
prop(slim_bottom_class, :css_class)
@doc "List of links to be rendered when no default slot is given"
prop(links, :list, default: [])
@doc "aria-label HTTP attribute for nav"
prop(aria_label, :string, default: "Sidebar Slim")
@doc "Default slot, menu"
slot(default)
@doc "Bottom slot, footer"
slot(bottom)
@doc "Logo slot"
slot(logo)
def render(assigns) do
~F"""
<nav
{=@id}
data-testid={@testid}
aria-label={@aria_label}
class={merge([
"w-[4.5rem]",
"flex flex-col gap-6 px-3 pt-6 pb-5 lg:overflow-visible overflow-y-scroll",
"h-full gap-4 justify-between",
@class
])}
>
<div class={merge(["flex flex-col gap-4", @slim_top_class])}>
<#slot {@logo} />
<#slot>
<Sidebar.SlimMenuLink
:for={link <- @links}
route={link[:page]}
icon_name={link[:icon]}
tooltip_text={link[:key]}
/>
</#slot>
</div>
<div class={merge(["flex flex-col gap-4 items-center", @slim_bottom_class])}>
<#slot {@bottom} />
</div>
</nav>
"""
end
end