mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 05:13:23 +12:00
feat: collapse sidebar sections (#32)
This commit is contained in:
parent
b1314f0b74
commit
b70725720e
1 changed files with 83 additions and 53 deletions
|
@ -4,6 +4,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
|
|
||||||
alias AshHqWeb.DocRoutes
|
alias AshHqWeb.DocRoutes
|
||||||
alias Surface.Components.LivePatch
|
alias Surface.Components.LivePatch
|
||||||
|
alias Phoenix.LiveView.JS
|
||||||
|
|
||||||
prop class, :css_class, default: ""
|
prop class, :css_class, default: ""
|
||||||
prop libraries, :list, required: true
|
prop libraries, :list, required: true
|
||||||
|
@ -47,31 +48,39 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
</div>
|
</div>
|
||||||
{#for {category, guides_by_library} <- guides_by_category_and_library(@libraries, @selected_versions)}
|
{#for {category, guides_by_library} <- guides_by_category_and_library(@libraries, @selected_versions)}
|
||||||
<div class="text-base-light-500">
|
<div class="text-base-light-500">
|
||||||
<button class="flex flex-row items-center">
|
<button phx-click={collapse("#{@id}-#{String.replace(category, " ", "-")}")} class="flex flex-row items-center">
|
||||||
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" /><div>{category}</div>
|
<div id={"#{@id}-#{String.replace(category, " ", "-")}-chevron-down"}>
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
<div id={"#{@id}-#{String.replace(category, " ", "-")}-chevron-right"} class="-rotate-90" style="display: none;">
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
<div>{category}</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{#for {library, guides} <- guides_by_library}
|
<div id={"#{@id}-#{String.replace(category, " ", "-")}"}>
|
||||||
<li class="ml-3 text-base-light-400 p-1">
|
{#for {library, guides} <- guides_by_library}
|
||||||
{library}
|
<li class="ml-3 text-base-light-400 p-1">
|
||||||
<ul>
|
{library}
|
||||||
{#for guide <- guides}
|
<ul>
|
||||||
<li class="ml-1">
|
{#for guide <- guides}
|
||||||
<LivePatch
|
<li class="ml-1">
|
||||||
to={DocRoutes.doc_link(guide, @selected_versions)}
|
<LivePatch
|
||||||
class={
|
to={DocRoutes.doc_link(guide, @selected_versions)}
|
||||||
"flex items-center p-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-200 hover:bg-base-light-100 dark:hover:bg-base-dark-700",
|
class={
|
||||||
"bg-base-light-300 dark:bg-base-dark-600": @guide && @guide.id == guide.id
|
"flex items-center p-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-200 hover:bg-base-light-100 dark:hover:bg-base-dark-700",
|
||||||
}
|
"bg-base-light-300 dark:bg-base-dark-600": @guide && @guide.id == guide.id
|
||||||
>
|
}
|
||||||
<Heroicons.Outline.BookOpenIcon class="h-4 w-4" />
|
>
|
||||||
<span class="ml-3 mr-2">{guide.name}</span>
|
<Heroicons.Outline.BookOpenIcon class="h-4 w-4" />
|
||||||
</LivePatch>
|
<span class="ml-3 mr-2">{guide.name}</span>
|
||||||
</li>
|
</LivePatch>
|
||||||
{/for}
|
</li>
|
||||||
</ul>
|
{/for}
|
||||||
</li>
|
</ul>
|
||||||
{/for}
|
</li>
|
||||||
|
{/for}
|
||||||
|
</div>
|
||||||
{/for}
|
{/for}
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
Reference
|
Reference
|
||||||
|
@ -79,41 +88,55 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
<div class="ml-2 space-y-2">
|
<div class="ml-2 space-y-2">
|
||||||
{#if !Enum.empty?(get_extensions(@libraries, @selected_versions))}
|
{#if !Enum.empty?(get_extensions(@libraries, @selected_versions))}
|
||||||
<div class="text-base-light-500">
|
<div class="text-base-light-500">
|
||||||
<button class="flex flex-row items-center" >
|
<button phx-click={collapse("#{@id}-extension")} class="flex flex-row items-center" >
|
||||||
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />Extensions
|
<div id={"#{@id}-extension-chevron-down"}>
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
<div id={"#{@id}-extension-chevron-right"} class="-rotate-90" style="display: none;">
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
Extensions
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#for {library, extensions} <- get_extensions(@libraries, @selected_versions)}
|
<div id={"#{@id}-extension"}>
|
||||||
<li class="ml-3 text-base-light-200 p-1">
|
{#for {library, extensions} <- get_extensions(@libraries, @selected_versions)}
|
||||||
{library}
|
<li class="ml-3 text-base-light-200 p-1">
|
||||||
<ul>
|
{library}
|
||||||
{#for extension <- extensions}
|
<ul>
|
||||||
<li class="ml-1">
|
{#for extension <- extensions}
|
||||||
<LivePatch
|
<li class="ml-1">
|
||||||
to={DocRoutes.doc_link(extension, @selected_versions)}
|
<LivePatch
|
||||||
class={
|
to={DocRoutes.doc_link(extension, @selected_versions)}
|
||||||
"flex items-center p-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-200 hover:bg-base-light-100 dark:hover:bg-base-dark-700",
|
class={
|
||||||
"dark:bg-base-dark-600": @extension && @extension.id == extension.id
|
"flex items-center p-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-200 hover:bg-base-light-100 dark:hover:bg-base-dark-700"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{render_icon(assigns, extension.type)}
|
{render_icon(assigns, extension.type)}
|
||||||
<span class="ml-3 mr-2">{extension.name}</span>
|
<span class="ml-3 mr-2">{extension.name}</span>
|
||||||
</LivePatch>
|
</LivePatch>
|
||||||
{#if @extension && @extension.id == extension.id && !Enum.empty?(extension.dsls)}
|
{#if @extension && @extension.id == extension.id && !Enum.empty?(extension.dsls)}
|
||||||
{render_dsls(assigns, extension.dsls, [])}
|
{render_dsls(assigns, extension.dsls, [])}
|
||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
{/for}
|
{/for}
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
{/for}
|
{/for}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="text-base-light-500">
|
<div class="text-base-light-500">
|
||||||
<button phx-value-id="modules" class="flex flex-row items-center">
|
<button phx-click={collapse("#{@id}-modules")} class="flex flex-row items-center">
|
||||||
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />Modules
|
<div id={"#{@id}-modules-chevron-down"}>
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
<div id={"#{@id}-modules-chevron-right"} class="-rotate-90" style="display: none;">
|
||||||
|
<Heroicons.Outline.ChevronDownIcon class="w-3 h-3 mr-1" />
|
||||||
|
</div>
|
||||||
|
Modules
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div id={"#{@id}-modules"}>
|
||||||
{#for {category, modules} <- modules_by_category(@libraries, @selected_versions)}
|
{#for {category, modules} <- modules_by_category(@libraries, @selected_versions)}
|
||||||
<div class="ml-4">
|
<div class="ml-4">
|
||||||
<span class="text-sm text-base-light-900 dark:text-base-dark-100">{category}</span>
|
<span class="text-sm text-base-light-900 dark:text-base-dark-100">{category}</span>
|
||||||
|
@ -123,8 +146,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
<LivePatch
|
<LivePatch
|
||||||
to={DocRoutes.doc_link(module, @selected_versions)}
|
to={DocRoutes.doc_link(module, @selected_versions)}
|
||||||
class={
|
class={
|
||||||
"flex items-center space-x-2 pt-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-100 hover:bg-base-light-100 dark:hover:bg-base-light-700",
|
"flex items-center space-x-2 pt-1 text-base font-normal text-base-light-900 rounded-lg dark:text-base-dark-100 hover:bg-base-light-100 dark:hover:bg-base-light-700"
|
||||||
"dark:bg-base-dark-600": @module && @module.id == module.id
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Heroicons.Outline.CodeIcon class="h-4 w-4" />
|
<Heroicons.Outline.CodeIcon class="h-4 w-4" />
|
||||||
|
@ -133,6 +155,7 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
</li>
|
</li>
|
||||||
{/for}
|
{/for}
|
||||||
{/for}
|
{/for}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -343,4 +366,11 @@ defmodule AshHqWeb.Components.DocSidebar do
|
||||||
end)
|
end)
|
||||||
)
|
)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
defp collapse(id, js \\ %JS{}) do
|
||||||
|
js
|
||||||
|
|> JS.toggle(to: "##{id}", time: 0)
|
||||||
|
|> JS.toggle(to: "##{id}-chevron-down", time: 0)
|
||||||
|
|> JS.toggle(to: "##{id}-chevron-right", time: 0)
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue