Packages
moon
2.87.11
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_web/components/left_menu.ex
defmodule MoonWeb.Components.LeftMenu do
@moduledoc false
use MoonWeb, :stateless_component
alias MoonWeb.Components.LargeLogo
alias MoonWeb.Pages
alias MoonWeb.Components.SidebarLink
alias MoonWeb.Components.SearchButton
alias Moon.Design.Accordion
alias Moon.Design.Drawer
alias Moon.Icon
prop(active_page, :module)
prop(hide_items, :boolean)
prop(menu_items, :list, default: MoonWeb.Schema.Link.menu())
prop(is_hidden, :boolean, default: false)
def render(assigns) do
~F"""
<Drawer
lg_persists
id="left-menu"
class={"lg:flex lg:start-0 lg:inset-y-0 lg:w-80 lg:z-50 inset-auto", invisible: @is_hidden}
>
<Drawer.Backdrop class="lg:hidden" />
<Drawer.Panel position="start" class="w-80 bg-gohan shadow-moon-none">
<nav
aria-label="Sidebar"
class="z-10 fixed top-0 h-screen w-80 flex flex-col flex-grow gap-6 pt-12 pb-20 px-5 lg:px-8 overflow-y-scroll"
>
<div class="flex items-center flex-shrink-0 ps-3 text-bulma">
<a
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.MainPage)}
aria-label="Surface.moon.io main page"
>
<LargeLogo />
</a>
</div>
<div>
<SearchButton id="moonweb-search" />
</div>
<div class="flex flex-col gap-1">
{#for menu_item <- @menu_items, menu_item[:icon] != nil}
<SidebarLink route={menu_item[:page]}><Icon class="w-6 h-6" name={menu_item[:icon]} />{menu_item[:key]}</SidebarLink>
{/for}
</div>
<div class="flex flex-col gap-2">
<p class="ps-2 text-moon-10-caption font-medium uppercase text-trunks">
Components
</p>
<div class="flex flex-col gap-1">
{#for menu_item <- @menu_items, menu_item[:icon] == nil}
{#if menu_item[:children]}
<Accordion
id={"left-menu-design-#{menu_item[:key]}"}
value={(active_page_contains(@active_page, menu_item[:key]) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">{menu_item[:key]}</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
{#for child_menu_item <- menu_item[:children]}
<SidebarLink route={child_menu_item[:page]}>{child_menu_item[:key]}</SidebarLink>
{/for}
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
{#else}
<SidebarLink route={menu_item[:page]}>{menu_item[:key]}</SidebarLink>
{/if}
{/for}
<Accordion
id="left-menu-components"
value={(active_page_contains(@active_page, Pages.Components) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">Old components</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink route={Pages.Components.AccordionPage}>Accordion</SidebarLink>
<SidebarLink route={Pages.Components.AvatarPage}>Avatar</SidebarLink>
<SidebarLink route={Pages.Components.BannerPage}>Banner</SidebarLink>
<SidebarLink route={Pages.Components.BreadcrumbPage}>Breadcrumb</SidebarLink>
<SidebarLink route={Pages.Components.ButtonPage}>Button</SidebarLink>
<SidebarLink route={Pages.Components.CarouselPage}>Carousel</SidebarLink>
<Accordion
id="left-menu-components-charts"
value={(active_page_contains(@active_page, Pages.Components.Charts) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">
Charts
</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink :if={!@hide_items} route={Pages.Components.Charts.GeoMapPage}>GeoMap</SidebarLink>
<SidebarLink route={Pages.Components.Charts.LineChartPage}>LineChart</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Charts.PiePage}>Pie</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Charts.TablePage}>Table</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Charts.VerticalBarPage}>Vertical Bar</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
<SidebarLink route={Pages.Components.CheckboxPage}>Checkbox</SidebarLink>
<SidebarLink route={Pages.Components.ChipPage}>Chip</SidebarLink>
<SidebarLink route={Pages.Components.CountryFlagsPage}>CountryFlags</SidebarLink>
<Accordion
id="left-menu-components-date"
value={(active_page_contains(@active_page, Pages.Components.Date) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">Date</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink route={Pages.Components.Date.DatepickerPage}>Datepicker</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Date.SingleDatePage}>Single Date</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Date.RangeDatePage}>Range</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
<Accordion
id="left-menu-components-dialog"
value={(active_page_contains(@active_page, Pages.Components.Dialog) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">Dialog</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink route={Pages.Components.Dialog.ModalPage}>Dialog</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Dialog.ContentPage}>Dialog Content</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Dialog.OverlayPage}>Dialog Overlay</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Dialog.HeaderPage}>Dialog Header</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.Dialog.FooterPage}>Dialog Footer</SidebarLink>
<SidebarLink route={Pages.Components.Dialog.PopoverPage}>Popover</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
<SidebarLink route={Pages.Components.DrawerPage}>Drawer *</SidebarLink>
<SidebarLink route={Pages.Components.FileInputPage}>File Input *</SidebarLink>
<SidebarLink route={Pages.Components.LabelPage}>Label</SidebarLink>
<SidebarLink route={Pages.Components.ListItemsPage}>List items</SidebarLink>
<SidebarLink route={Pages.Components.LoaderPage}>Loader</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.PaginationPage}>Pagination</SidebarLink>
<Accordion
id="left-menu-components-progress"
value={(active_page_contains(@active_page, Pages.Components.Progress) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">Progress</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink :if={!@hide_items} route={Pages.Components.Progress.CircularPage}>Circular</SidebarLink>
<SidebarLink route={Pages.Components.Progress.LinearPage}>Linear</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
<SidebarLink route={Pages.Components.RadioButtonPage}>RadioButton</SidebarLink>
<SidebarLink :if={!@hide_items} route={Pages.Components.SearchPage}>Search</SidebarLink>
<Accordion
id="left-menu-components-select"
value={(active_page_contains(@active_page, Pages.Components.Select) && "0") || []}
>
<Accordion.Item has_content_outside>
<Accordion.Header icon_class="text-moon-24">Select</Accordion.Header>
<Accordion.Content>
<div class="flex-grow flex flex-col gap-2 pl-8">
<SidebarLink route={Pages.Components.Select.DropdownPage}>Dropdown</SidebarLink>
<SidebarLink route={Pages.Components.Select.SelectPage}>Select</SidebarLink>
<SidebarLink route={Pages.Components.Select.SingleSelectPage}>Single select</SidebarLink>
<SidebarLink route={Pages.Components.Select.MultiSelectPage}>Multi select</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
<SidebarLink route={Pages.Components.SwitchPage}>Switch</SidebarLink>
<SidebarLink route={Pages.Components.TabsPage}>Tabs</SidebarLink>
<SidebarLink route={Pages.Components.TablePage}>Table</SidebarLink>
<SidebarLink route={Pages.Components.TextInputPage}>TextInput</SidebarLink>
<SidebarLink route={Pages.Components.InputGroupPage}>TextInputGroup</SidebarLink>
<SidebarLink route={Pages.Components.ToastPage}>Toast</SidebarLink>
<SidebarLink route={Pages.Components.TooltipPage}>Tooltip</SidebarLink>
</div>
</Accordion.Content>
</Accordion.Item>
</Accordion>
</div>
</div>
</nav>
</Drawer.Panel>
</Drawer>
"""
end
def active_page_contains(active_page, module_path) do
String.contains?(to_string(active_page), to_string(module_path))
end
end