2022-03-29 11:05:19 +13:00
|
|
|
defmodule AshHqWeb.Components.DocSidebar do
|
2023-02-07 06:35:52 +13:00
|
|
|
@moduledoc """
|
|
|
|
Renders the sidebar data, and uses `Phoenix.LiveView.JS` to manage selection/collapsible state.
|
|
|
|
"""
|
2024-04-03 09:38:44 +13:00
|
|
|
use Phoenix.LiveComponent
|
2022-03-29 11:05:19 +13:00
|
|
|
|
2023-05-14 11:27:54 +12:00
|
|
|
alias AshHqWeb.Components.Icon
|
2022-09-27 12:30:56 +13:00
|
|
|
alias Phoenix.LiveView.JS
|
2024-04-03 09:38:44 +13:00
|
|
|
import AshHqWeb.Tails
|
2022-03-29 11:05:19 +13:00
|
|
|
|
2024-04-03 09:38:44 +13:00
|
|
|
attr :libraries, :any
|
|
|
|
attr :remove_version, :any
|
|
|
|
attr :class, :any
|
|
|
|
attr :sidebar_data, :any, default: []
|
2022-09-30 05:56:07 +13:00
|
|
|
|
2022-03-29 11:05:19 +13:00
|
|
|
def render(assigns) do
|
2024-04-03 09:38:44 +13:00
|
|
|
~H"""
|
|
|
|
<aside id={@id} class={classes(["grid z-40 bg-white dark:bg-base-dark-850", @class])} aria-label="Sidebar">
|
2023-02-02 21:11:30 +13:00
|
|
|
<div class="flex flex-col px-1">
|
2023-02-07 16:39:20 +13:00
|
|
|
<ul class="ml-2 mt-4">
|
2024-04-03 09:38:44 +13:00
|
|
|
<%= for {category, items} <- @sidebar_data do %>
|
2023-09-27 17:23:56 +13:00
|
|
|
<li class="pt-1 pl-0.5" id={"#{@id}-guides-#{slug(category)}"}>
|
2023-02-07 06:35:52 +13:00
|
|
|
<button
|
2023-09-27 17:23:56 +13:00
|
|
|
class="flex flex-row items-start w-full text-left rounded-lg hover:bg-base-light-100 dark:hover:bg-base-dark-750 p-[0.1rem]"
|
|
|
|
phx-click={collapse("#{@id}-guides-#{slug(category)}")}
|
2022-11-14 04:43:11 +13:00
|
|
|
>
|
2023-02-07 06:35:52 +13:00
|
|
|
<div
|
2024-04-03 09:38:44 +13:00
|
|
|
class={classes(["chevron mr-1.5 mt-1.5 origin-center", "rotate-[-90deg]": !has_active?(items)])}
|
2023-09-27 17:23:56 +13:00
|
|
|
id={"#{@id}-guides-#{slug(category)}-chevron"}
|
2023-02-07 06:35:52 +13:00
|
|
|
>
|
2024-04-03 09:38:44 +13:00
|
|
|
<span class="hero-chevron-down-solid w-3 h-3"/>
|
2023-02-07 06:35:52 +13:00
|
|
|
</div>
|
2024-04-03 09:38:44 +13:00
|
|
|
<span class="text-base-light-500 dark:text-base-dark-300 font-bold"><%= category %></span>
|
2023-02-07 06:35:52 +13:00
|
|
|
</button>
|
2023-09-27 17:23:56 +13:00
|
|
|
|
2023-02-07 06:35:52 +13:00
|
|
|
<ul
|
2023-02-07 16:39:20 +13:00
|
|
|
class="ml-4"
|
2023-09-27 17:23:56 +13:00
|
|
|
id={"#{@id}-guides-#{slug(category)}-contents"}
|
|
|
|
style={if !has_active?(items), do: "display: none", else: ""}
|
2022-11-14 04:43:11 +13:00
|
|
|
>
|
2024-04-03 09:38:44 +13:00
|
|
|
<%= for {library, items} <- items do %>
|
2023-09-27 17:23:56 +13:00
|
|
|
<li class="pt-1 pl-0.5" id={"#{@id}-guides-#{slug(category)}-#{slug(library)}"}>
|
2024-04-03 09:38:44 +13:00
|
|
|
<span class="text-primary-dark-500 dark:text-primary-light-500 font-extrabold"><%= library %></span>
|
2023-02-07 06:35:52 +13:00
|
|
|
|
2023-09-27 17:23:56 +13:00
|
|
|
<ul>
|
2024-04-03 09:38:44 +13:00
|
|
|
<%= for %{name: item_name, to: to, id: item_id, active?: active?} <- items do %>
|
|
|
|
<% id = id(category, library, item_name, "guides", item_id, @id) %>
|
2023-09-27 17:23:56 +13:00
|
|
|
<li
|
|
|
|
id={id}
|
2024-04-03 09:38:44 +13:00
|
|
|
class={classes(
|
|
|
|
["first:rounded-t-lg last:rounded-b-lg p-[0.1rem] pl-1 hover:bg-base-light-100 dark:hover:bg-base-dark-750",
|
|
|
|
"bg-base-light-200 dark:bg-base-dark-750 active-sidebar-nav": active?]
|
|
|
|
)
|
2023-09-27 17:23:56 +13:00
|
|
|
}
|
|
|
|
>
|
2024-04-03 09:38:44 +13:00
|
|
|
<.link href={to}
|
|
|
|
phx-click={mark_active(id)}
|
2023-09-27 17:23:56 +13:00
|
|
|
class="flex flex-row items-start w-full text-left text-base-light-900 dark:text-base-dark-100"
|
|
|
|
>
|
2024-04-03 09:38:44 +13:00
|
|
|
<Icon.icon type="Guides" classes="h-4 w-4 flex-none mt-1 mr-1.5" />
|
|
|
|
<%= item_name %>
|
|
|
|
</.link>
|
2023-02-07 06:35:52 +13:00
|
|
|
</li>
|
2024-04-03 09:38:44 +13:00
|
|
|
<% end %>
|
2023-02-07 06:35:52 +13:00
|
|
|
</ul>
|
|
|
|
</li>
|
2024-04-03 09:38:44 +13:00
|
|
|
<% end %>
|
2023-02-07 06:35:52 +13:00
|
|
|
</ul>
|
|
|
|
</li>
|
2024-04-03 09:38:44 +13:00
|
|
|
<% end %>
|
2023-02-07 06:35:52 +13:00
|
|
|
</ul>
|
|
|
|
</div>
|
2022-03-29 11:05:19 +13:00
|
|
|
</aside>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2023-02-07 09:26:26 +13:00
|
|
|
defp id(category, library, name, id, item_id, global_id) do
|
2023-02-07 06:35:52 +13:00
|
|
|
if category == "Tutorials" && library == "Ash" && name == "Get Started" do
|
2023-02-07 09:26:26 +13:00
|
|
|
if String.starts_with?(global_id, "mobile") do
|
|
|
|
"mobile-get-started-guide"
|
|
|
|
else
|
|
|
|
"get-started-guide"
|
|
|
|
end
|
2023-02-07 06:35:52 +13:00
|
|
|
else
|
2023-02-07 09:26:26 +13:00
|
|
|
"#{global_id}-#{id}-#{slug(category)}-#{slug(library)}-#{item_id}"
|
2023-02-07 06:35:52 +13:00
|
|
|
end
|
2022-08-29 00:42:24 +12:00
|
|
|
end
|
|
|
|
|
2023-02-07 06:35:52 +13:00
|
|
|
defp has_active?(list) when is_list(list), do: Enum.any?(list, &has_active?/1)
|
|
|
|
defp has_active?({_, list}), do: has_active?(list)
|
|
|
|
defp has_active?(%{active?: true}), do: true
|
|
|
|
defp has_active?(_), do: false
|
2022-08-29 00:42:24 +12:00
|
|
|
|
2023-02-07 06:35:52 +13:00
|
|
|
def mark_active(js \\ %JS{}, id) do
|
|
|
|
js
|
|
|
|
|> JS.remove_class(
|
2023-09-27 17:23:56 +13:00
|
|
|
"bg-base-light-200 dark:bg-base-dark-750 active-sidebar-nav",
|
2023-02-07 06:35:52 +13:00
|
|
|
to: ".active-sidebar-nav"
|
|
|
|
)
|
|
|
|
|> JS.add_class(
|
2023-09-27 17:23:56 +13:00
|
|
|
"bg-base-light-200 dark:bg-base-dark-750 active-sidebar-nav",
|
2023-02-07 06:35:52 +13:00
|
|
|
to: "##{id}"
|
|
|
|
)
|
2023-02-07 09:26:26 +13:00
|
|
|
|> JS.add_class(
|
2023-09-27 17:23:56 +13:00
|
|
|
"bg-base-light-200 dark:bg-base-dark-750 active-sidebar-nav",
|
2023-02-07 09:26:26 +13:00
|
|
|
to: "##{add_or_remove_mobile(id)}"
|
|
|
|
)
|
2023-02-07 06:35:52 +13:00
|
|
|
end
|
2022-08-29 00:42:24 +12:00
|
|
|
|
2023-02-07 06:35:52 +13:00
|
|
|
def collapse(js \\ %JS{}, id) do
|
|
|
|
js
|
|
|
|
|> JS.remove_class(
|
|
|
|
"rotate-[-90deg]",
|
|
|
|
to: "##{id}-chevron.rotate-\\[-90deg\\]"
|
|
|
|
)
|
2023-02-07 09:26:26 +13:00
|
|
|
|> JS.remove_class(
|
|
|
|
"rotate-[-90deg]",
|
|
|
|
to: "##{add_or_remove_mobile(id)}-chevron.rotate-\\[-90deg\\]"
|
|
|
|
)
|
2023-02-07 06:35:52 +13:00
|
|
|
|> JS.add_class(
|
|
|
|
"rotate-[-90deg]",
|
|
|
|
to: "##{id}-chevron:not(.rotate-\\[-90deg\\])"
|
2022-08-29 00:42:24 +12:00
|
|
|
)
|
2023-02-07 09:26:26 +13:00
|
|
|
|> JS.add_class(
|
|
|
|
"rotate-[-90deg]",
|
|
|
|
to: "##{add_or_remove_mobile(id)}-chevron:not(.rotate-\\[-90deg\\])"
|
|
|
|
)
|
2023-02-07 06:35:52 +13:00
|
|
|
|> JS.toggle(to: "##{id}-contents")
|
2023-02-07 09:26:26 +13:00
|
|
|
|> JS.toggle(to: "##{add_or_remove_mobile(id)}-contents")
|
2022-03-29 11:05:19 +13:00
|
|
|
end
|
2022-09-27 12:30:56 +13:00
|
|
|
|
2023-02-07 09:26:26 +13:00
|
|
|
defp add_or_remove_mobile("mobile-" <> rest), do: rest
|
|
|
|
defp add_or_remove_mobile(rest), do: "mobile-#{rest}"
|
|
|
|
|
2023-02-07 06:35:52 +13:00
|
|
|
defp slug(string) do
|
2022-11-14 04:43:11 +13:00
|
|
|
string
|
|
|
|
|> String.downcase()
|
|
|
|
|> String.replace(" ", "_")
|
|
|
|
|> String.replace(~r/[^a-z0-9-_]/, "-")
|
2022-09-27 12:30:56 +13:00
|
|
|
end
|
2022-03-29 11:05:19 +13:00
|
|
|
end
|