Add navigation select component for topic mobile view

Author: rossta

app/javascript/controllers/forms/select-nav.js

@@ -0,0 +1,38 @@
+import { Turbo } from '@hotwired/turbo-rails';
+import { Controller } from '@hotwired/stimulus';
+
+import { debug } from '../../utils';
+
+const console = debug('app:javascript:controllers:forms:select-nav');
+
+export default class extends Controller {
+  static values = {
+    turboFrame: String,
+  };
+
+  connect() {
+    console.log('Connected');
+  }
+
+  visit(event) {
+    const [selectedOption] = this.element.selectedOptions;
+    const url = selectedOption.value;
+
+    // Value is empty for blank option
+    if (url === '') {
+      return;
+    }
+
+    console.log('Visiting', url, event);
+
+    const opts = {
+      action: 'advance',
+    };
+
+    if (this.turboFrameValue) {
+      opts.frame = this.turboFrameValue;
+    }
+
+    Turbo.visit(url, opts);
+  }
+}

app/javascript/controllers/index.js

@@ -20,6 +20,7 @@ import TableOfContents from './table-of-contents';
 
 import FrameForm from './forms/frame';
 import AutosubmitForm from './forms/autosubmit';
+import SelectNav from './forms/select-nav';
 import SyntaxHighlightPreview from './syntax-highlight/preview';
 
 import SnippetPreview from './snippets/preview';
@@ -44,6 +45,7 @@ application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);
 application.register('autosubmit-form', AutosubmitForm);
+application.register('select-nav', SelectNav);
 application.register('syntax-highlight-preview', SyntaxHighlightPreview);
 
 application.register('snippet-preview', SnippetPreview);

app/views/topics/index.html.erb

@@ -5,8 +5,9 @@
 <div class="column-content container py-gap mb-3xl">
   <nav class="sidebar" data-turbo-permanent>
     <%= turbo_frame_tag :topics_sidebar do %>
+      <%= render Topics::Select.new(topics, class: "lg:hidden") %>
       <% topics.each do |topic| %>
-        <%= tag.div id: dom_id(topic), class: "text-small mb-2" do %>
+        <%= tag.div id: dom_id(topic), class: "text-small mb-2 hidden lg:block" do %>
           <%= link_to topic.name, topic_path(topic), data: {turbo_frame: :topics_mainbar} %>
           <span class="text-faint">(<%= topic.pages_count %>)</span>
         <% end %>
@@ -16,7 +17,7 @@
   <div class="mainbar w-full">
     <%= turbo_frame_tag :topics_mainbar, data: {turbo_action: "advance"} do %>
       <div>
-        <h2>Welcome!</h2>
+        <h3 class="mb-8 lg:hidden">Howdy!</h3>
         <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>

app/views/topics/select.rb

@@ -0,0 +1,34 @@
+module Topics
+  class Select < ApplicationComponent
+    include Phlex::Rails::Helpers::CurrentPage
+    include PhlexConcerns::FlexBlock
+
+    attr_reader :topics, :attributes
+
+    def initialize(topics = [], **attributes)
+      @topics = topics
+      @attributes = attributes
+    end
+
+    def view_template
+      flex_block(attributes) do
+        label(for: "topic", class: "block text-sm font-medium text-gray-700") do
+          "Select a topic"
+        end
+        select(
+          name: "topic",
+          data: {
+            :controller => "select-nav",
+            :action => "select-nav#visit",
+            "select-nav-turbo-frame-value" => "topics_mainbar"
+          }
+        ) do
+          option(value: "") { "Start here" }
+          topics.each do |topic|
+            option(value: topic_path(topic), select: current_page?(topic_path(topic))) { topic.name }
+          end
+        end
+      end
+    end
+  end
+end

app/views/topics/show.html.erb

@@ -17,7 +17,7 @@
           </div>
         </div>
       <% else %>
-        <h3 class="mb-8">Topic: <%= topic.name %></h3>
+        <h3 class="mb-8 hidden lg:block">Topic: <%= topic.name %></h3>
         <ul>
           <% topic.pages.as_published_articles.each do |page| %>
             <%= tag.li id: dom_id(page) do %>