Conditionally show Accessibility-First sidebar

Author: RoyalIcing

lib/components_guide_web/controllers/accessibility_first_controller.ex

@@ -8,7 +8,16 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
     |> render("index.html", article: "intro")
   end
 
-  @articles ["navigation", "landmarks", "roles", "accessible-name", "forms", "content", "refactoring-accessibility", "accessibility-tree-snapshots"]
+  @articles [
+    "navigation",
+    "landmarks",
+    "roles",
+    "accessible-name",
+    "forms",
+    "content",
+    "refactoring-accessibility",
+    "accessibility-tree-snapshots"
+  ]
 
   def show(conn, %{"id" => article}) when article in @articles do
     conn
@@ -39,10 +48,7 @@ defmodule ComponentsGuideWeb.AccessibilityFirstController do
   defp page_title("content"), do: "Accessibility-First Content"
   defp page_title("accessible-name"), do: "Learning Accessible Names"
   defp page_title("refactoring-accessibility"), do: "Refactoring Accessibility"
-
-  defp page_title(_) do
-    "Accessibility-First Development"
-  end
+  defp page_title(_), do: "Accessibility-First Development"
 end
 
 defmodule ComponentsGuideWeb.AccessibilityFirstView do
@@ -51,6 +57,18 @@ defmodule ComponentsGuideWeb.AccessibilityFirstView do
   use ComponentsGuideWeb.Snippets
   use Phoenix.HTML
 
+  def render_sidebar(_assigns) do
+    render("content_nav.html")
+  end
+
+  def sidebar(assigns = %{article: "content"}) do
+    ~H"""
+    <%= render_slot(@inner_block, render("content_nav.html")) %>
+    """
+  end
+
+  def sidebar(assigns), do: ~H""
+
   # def collected_image(conn, image_name) do
   #   %{static_path: path_to_image, width: width, height: height} = render(image_name)
   #   url = Routes.static_path(conn, "/" <> path_to_image)

lib/components_guide_web/templates/accessibility_first/index.html.eex renamed to lib/components_guide_web/templates/accessibility_first/index.html.heex

@@ -1,11 +1,14 @@
 <%= render view_module(@conn), "_header.html" %>
 
 <div class="text-base lg:text-lg flex items-stretch bg-gray-900">
-  <nav class="text-white w-48 lg:w-64 bg-gray-800">
-    <div class="sticky top-0">
-      <%= render_existing(view_module(@conn), @article <> "_nav.html") %>
-    </div>
-  </nav>
+  <.sidebar let={nav} article={@article}>
+    <nav class="text-white w-48 lg:w-64 bg-gray-800">
+      <div class="sticky top-0">
+        <%= nav %>
+      </div>
+    </nav>
+  </.sidebar>
+
   <div class="mx-auto flex-shrink">
     <div class="max-w-xl lg:max-w-4xl px-6 pt-8 pb-16 text-white">
       <article class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">

lib/components_guide_web/templates/layout/_banner.html.heex

@@ -23,7 +23,7 @@
     <hr class="mx-auto">
 
     <div class="w-48 pr-6">
-      <.search_form></.search_form>
+      <.search_form />
     </div>
   </nav>
 </header>