Second pass at Turbo topic navigation with sidebar

Author: rossta

app/javascript/css/components/article-content.css

@@ -131,3 +131,9 @@
     padding-inline-start: var(--space-s);
   }
 }
+
+.column-content {
+  & li:has(+ li) {
+    margin-bottom: var(--space-xs);
+  }
+}

app/views/topics/index.html.erb

@@ -1,3 +1,27 @@
-<%= turbo_frame_tag :topic_articles, class: "row-gap-none", data: {turbo_action: "advance"} do %>
-  <%= render "topic", topics: @topics %>
-<% end %>
+<% topics = @topics %>
+
+<%= render Pages::Header.new(title: "Topics") %>
+
+<div class="column-content container py-gap mb-3xl">
+  <nav class="sidebar" data-turbo-permanent>
+    <%= turbo_frame_tag :topics_sidebar do %>
+      <% topics.each do |topic| %>
+        <%= tag.div id: dom_id(topic), class: "text-small mb-2" do %>
+          <%= link_to topic.name, topic_path(topic), data: {turbo_frame: :topics_mainbar} %>
+          <span class="text-faint">(<%= topic.pages_count %>)</span>
+        <% end %>
+      <% end %>
+    <% end %>
+  </nav>
+  <div class="mainbar w-full">
+    <%= turbo_frame_tag :topics_mainbar, data: {turbo_action: "advance"} do %>
+      <div>
+        <h2>Welcome!</h2>
+        <div>
+          <p>Here you‘ll find topics currently covered at Joy of Rails.</p>
+          <p>Choose a topic from the sidebar to view articles.</p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/topics/show.html.erb

@@ -1,3 +1,35 @@
-<%= turbo_frame_tag :topic_articles, class: "row-gap-none", data: {turbo_action: "advance"} do %>
-  <%= render @topic, topics: @topics %>
-<% end %>
+<% topic = @topic
+   topics = @topics %>
+
+<%= render Pages::Header.new(title: "Topics") %>
+
+<div class="column-content container py-gap mb-3xl">
+  <nav class="sidebar" data-turbo-permanent>
+    <%= turbo_frame_tag :topics_sidebar, src: topics_path %>
+  </nav>
+  <div class="mainbar w-full">
+    <%= turbo_frame_tag :topics_mainbar, data: {turbo_action: "advance"} do %>
+      <% if topic.pages.blank? %>
+        <div>
+          <h2>No articles have been added for this topic yet!</h2>
+          <div>
+            <p>Coming soon. Maybe ;)</p>
+          </div>
+        </div>
+      <% else %>
+        <ul>
+          <% topic.pages.as_published_articles.each do |page| %>
+            <%= tag.li id: dom_id(page) do %>
+              <%= render Pages::Info.new(
+                    title: page.title,
+                    request_path: page.request_path,
+                    description: page.description,
+                    image: page.image
+                  ) %>
+            <% end %>
+          <% end %>
+        </ul>
+      <% end %>
+    <% end %>
+  </div>
+</div>