feat: collapse sidebar sections (#32)

This commit is contained in:
brettkolodny 2022-09-26 19:30:56 -04:00 committed by GitHub
parent b1314f0b74
commit b70725720e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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