First pass at Turbo topic navigation with sidebar

Author: rossta

app/controllers/topics_controller.rb

@@ -1,10 +1,10 @@
 class TopicsController < ApplicationController
   def index
     @topics = Topic.approved.with_pages.order(name: :asc)
-    @topics = @topics.where("lower(slug) LIKE ?", "#{params[:letter].downcase}%") if params[:letter].present?
   end
 
   def show
+    @topics = Topic.approved.with_pages.order(name: :asc)
     @topic = Topic.find_by!(slug: params[:slug])
   end
 end

app/views/topics/_topic.html.erb

@@ -0,0 +1,45 @@
+<%# locals: (topics:, topic: nil) %>
+
+<% title = topic ? "Topic: #{topic.name}" : "Topics" %>
+
+<%= render Pages::Header.new(title: title) %>
+
+<div class="column-content container py-gap mb-3xl">
+  <nav class="sidebar">
+    <% topics.each do |topic| %>
+      <%= tag.div id: dom_id(topic), class: "mb-4" do %>
+        <%= link_to topic.name, topic_path(topic), data: {turbo_frame: :topic_articles} %>
+        <span class="text-faint">(<%= topic.pages_count %>)</span>
+      <% end %>
+    <% end %>
+  </nav>
+  <div class="mainbar w-full">
+    <% if !topic %>
+      <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>
+    <% elsif topic.pages.blank? %>
+      <div>
+        <h2>No articles have been added for this topic yet!</h2>
+        <div>
+          <p>Coming soon. Maybe ;)</p>
+        </div>
+      </div>
+    <% else %>
+      <% topic.pages.as_published_articles.each do |page| %>
+        <%= tag.div 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 %>
+    <% end %>
+  </div>
+</div>

app/views/topics/index.html.erb

@@ -1,21 +1,3 @@
-
-<%= render Pages::Header.new(title: "Topics") %>
-<div class="section-content container py-gap mb-3xl">
-  <% if @topics.blank? %>
-  <div class="only:inherit grid grid-row-mid">
-    <h2>No topics have been created yet!</h2>
-    <div>
-      <p>Coming soon ;)</p>
-    </div>
-  </div>
-  <% else %>
-    <% @topics.each do |topic| %>
-      <%= tag.div id: dom_id(topic) do %>
-        <h3>
-          <%= link_to topic.name, topic_path(topic) %>
-          <span class="text-faint">(<%= topic.pages_count %>)</span>
-        </h3>
-      <% end %>
-    <% end %>
-  <% end %>
-</div>
+<%= turbo_frame_tag :topic_articles, class: "row-gap-none", data: {turbo_action: "advance"} do %>
+  <%= render "topic", topics: @topics %>
+<% end %>

app/views/topics/show.html.erb

@@ -1,16 +1,3 @@
-
-<%= render Pages::Header.new(title: "Topic: #{@topic.name}") %>
-<div class="section-content container py-gap mb-3xl">
-  <% if @topic.pages.blank? %>
-  <div class="only:inherit grid grid-row-mid">
-    <h2>No articles have been added for this topic yet!</h2>
-    <div>
-      <p>Coming soon. Maybe ;)</p>
-    </div>
-  </div>
-  <% else %>
-    <%= render Pages::List.new(@topic.pages.as_published_articles) %>
-  <% end %>
-
-  <div><%= link_to "Back to Topics list", topics_path %></div>
-</div>
+<%= turbo_frame_tag :topic_articles, class: "row-gap-none", data: {turbo_action: "advance"} do %>
+  <%= render @topic, topics: @topics %>
+<% end %>