Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/sidebar_page.ex
defmodule MoonWeb.Pages.Components.SidebarPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Assets.Icons.IconSlots
alias Moon.Assets.Icons.IconSportsBaseBall
alias Moon.Assets.Logos.LogoBitcasinoFull
alias Moon.Assets.Logos.LogoBitcasinoShort
alias Moon.Autolayouts.TopToDown
alias Moon.Components.Heading
alias Moon.Components.Link
alias Moon.Components.Sidebar
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/sidebar",
name: "Sidebar"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<TopToDown>
<Heading size={56} class="mb-4">Sidebar</Heading>
<p class="mb-8">
<Link to="https://www.figma.com/file/d5oitzaWXGiOuMjKDatC1W/Lab---Templates?node-id=28%3A6">Figma design</Link>
<Link to="https://github.com/coingaming/moon/blob/main/lib/moon_web/pages/components/sidebar_page.ex">Sourcecode of this page</Link>
<Link to="https://moon.io/toolkit/sidebar">React implementation</Link>
</p>
<ExampleAndCode id="sidebar_1">
<:note>
<p>
Wrap <code class="bg-gohan-40">Sidebar</code> component inside layout with <code class="bg-gohan-40">flex items-start h-screen overflow-hidden</code> classes on a parent div.
</p>
<p>
Use <code class="bg-gohan-40">open_width</code> prop to define sidebar width in an open mode. Default value is <code class="bg-gohan-40">"14.5rem"</code>
</p>
<p>
Use <code class="bg-gohan-40">background_color</code> prop to define background color of the sidebar.
</p>
<p>
Use slots <code class="bg-gohan-40">short_logo, full_logo, menu</code> for sidebar parts.
</p>
</:note>
<:example>
<Sidebar background_color="bg-goku" open_width="14rem">
<:short_logo>
<div class="flex items-center h-10">
<LogoBitcasinoShort font_size="2.1rem" />
</div>
</:short_logo>
<:full_logo>
<div class="pl-1">
<LogoBitcasinoFull font_size="10rem" class="h-10" />
</div>
</:full_logo>
<:menu>
<nav class="mt-5">
<TopToDown>
<a href="#" class="flex items-center group">
<IconSlots font_size="1.75rem" class="shrink-0 mr-3 transition scale group-hover:scale-110" />
<span class="group-hover:text-piccolo">Slots</span>
</a>
<a href="#" class="flex items-center group">
<IconSportsBaseBall
font_size="1.75rem"
class="shrink-0 mr-3 transition scale group-hover:scale-110"
/>
<span class="group-hover:text-piccolo">Baseball</span>
</a>
</TopToDown>
</nav>
</:menu>
</Sidebar>
</:example>
<:code>{sidebar_1_code()}</:code>
</ExampleAndCode>
</TopToDown>
</Page>
"""
end
def sidebar_1_code do
"""
alias Moon.Components.Sidebar
alias Moon.Components.TopToDown
alias Moon.Assets.Icons.IconSlots
alias Moon.Assets.Icons.IconSportsBaseBall
alias Moon.Assets.Logos.LogoBitcasinoFull
alias Moon.Assets.Logos.LogoBitcasinoShort
<Sidebar background_color="bg-goku" open_width="14rem">
<template slot="short_logo">
<div class="flex items-center h-10">
<LogoBitcasinoShort font_size="2.1rem" />
</div>
</template>
<template slot="full_logo">
<div class="pl-1">
<LogoBitcasinoFull font_size="10rem" class="h-10" />
</div>
</template>
<template slot="menu">
<nav class="mt-5">
<TopToDown>
<a href="#" class="flex items-center group">
<IconSlots font_size="1.75rem" class="shrink-9 mr-3 transition scale group-hover:scale-110" />
<span class="group-hover:text-piccolo">Slots</span>
</a>
<a href="#" class="flex items-center group">
<IconSportsBaseBall font_size="1.75rem" class="shrink-9 mr-3 transition scale group-hover:scale-110" />
<span class="group-hover:text-piccolo">Baseball</span>
</a>
</TopToDown>
</nav>
</template>
</Sidebar>
"""
end
end