Merge pull request #275 from joyofrails/feat/topics-current-page

Topic nav shows active current page

Author: rossta

app/javascript/controllers/current-page.js

@@ -0,0 +1,48 @@
+import { Controller } from '@hotwired/stimulus';
+
+import { debug } from '../utils';
+
+const console = debug('app:javascript:controllers:current-page');
+
+export default class extends Controller {
+  connect() {
+    console.log('Connected');
+
+    this.updateActive();
+    this.updateActive = this.updateActive.bind(this);
+
+    document.addEventListener('turbo:before-render', this.updateActive);
+    document.addEventListener('turbo:before-frame-render', this.updateActive);
+  }
+
+  disconnect() {
+    document.removeEventListener('turbo:before-render', this.updateActive);
+    document.removeEventListener(
+      'turbo:before-frame-render',
+      this.updateActive,
+    );
+  }
+
+  updateActive(event) {
+    console.log('updateActiveLink');
+    this.element.querySelectorAll('a').forEach((link) => {
+      if (link.getAttribute('href') === this.currentUrl) {
+        link.classList.add('active');
+        link.closest('li').classList.add('active');
+      } else {
+        link.classList.remove('active');
+        link.closest('li').classList.remove('active');
+      }
+    });
+
+    this.element.querySelectorAll('option').forEach((option) => {
+      if (option.getAttribute('value') === this.currentUrl) {
+        option.selected = true;
+      }
+    });
+  }
+
+  get currentUrl() {
+    return window.location.pathname;
+  }
+}

app/javascript/controllers/index.js

@@ -5,6 +5,7 @@
 import { application } from './application';
 
 import ClipboardCopy from './clipboard-copy';
+import CurrentPage from './current-page';
 import Darkmode from './darkmode';
 import Flash from './flash';
 import ModalOpener from './modal-opener';
@@ -31,16 +32,19 @@ import SnippetTweet from './snippets/tweet';
 import SearchCombobox from './searches/combobox';
 import SearchListbox from './searches/listbox';
 
-application.register('modal-opener', ModalOpener);
-application.register('analytics', AnalyticsCustomEvent);
 application.register('clipboard-copy', ClipboardCopy);
+application.register('current-page', CurrentPage);
 application.register('darkmode', Darkmode);
 application.register('flash', Flash);
+application.register('modal-opener', ModalOpener);
+
 application.register('dialog', Dialog);
 
 application.register('pwa-installation', PwaInstallation);
 application.register('pwa-web-push-subscription', PwaWebPushSubscription);
 application.register('pwa-web-push-demo', PwaWebPushDemo);
+
+application.register('analytics', AnalyticsCustomEvent);
 application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);

app/javascript/css/application.css

@@ -30,6 +30,7 @@
 @import './components/site-header.css';
 @import './components/main-content.css';
 @import './components/article-content.css';
+@import './components/column-content.css';
 @import './components/footer.scss';
 @import './components/footer.css';
 @import './components/newsletter-banner.css';

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

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

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

@@ -0,0 +1,5 @@
+.column-content {
+  & li.active {
+    background-color: var(--joy-background-header);
+  }
+}

app/javascript/css/config/theme.css

@@ -45,6 +45,7 @@
   --joy-background-banner: var(--joy-color-100);
   --joy-background-footer: var(--joy-color-200);
   --joy-background-blockquote: var(--joy-color-100);
+  --joy-background-active: var(--joy-color-200);
 
   --joy-background-mask: var(--color-darken);
   --joy-background-reset: white;
@@ -103,6 +104,7 @@
   --joy-background-banner: var(--color-slate-900);
   --joy-background-footer: var(--color-slate-800);
   --joy-background-blockquote: var(--color-slate-800);
+  --joy-background-active: var(--color-slate-800);
 
   --joy-background-mask: var(--color-lighten);
   --joy-background-reset: var(--color-slate-950);

app/javascript/css/utilities/custom.css

@@ -2,6 +2,10 @@
   margin-bottom: var(--grid-gutter);
 }
 
+.mb-xs {
+  margin-bottom: var(--space-xs);
+}
+
 .mb-xl {
   margin-bottom: var(--space-xl);
 }

app/javascript/css/utilities/tailwind.css

@@ -590,6 +590,10 @@
   fill: var(--joy-text);
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }

app/views/topics/nav.rb

@@ -2,6 +2,7 @@ module Topics
   class Nav < ApplicationComponent
     include Phlex::Rails::Helpers::CurrentPage
     include Phlex::Rails::Helpers::DOMID
+    include Phlex::Rails::Helpers::Request
     include PhlexConcerns::FlexBlock
 
     attr_reader :topics, :attributes
@@ -24,7 +25,7 @@ def topics_select
         select(
           name: "topic",
           data: {
-            :controller => "select-nav",
+            :controller => "select-nav current-page",
             :action => "select-nav#visit",
             "select-nav-turbo-frame-value" => "topics-mainbar"
           }
@@ -33,7 +34,7 @@ def topics_select
           topics.each do |topic|
             option(
               value: topic_path(topic),
-              selected: current_page?(topic_path(topic))
+              selected: request&.path == topic_path(topic)
             ) do
               topic.name
             end
@@ -43,20 +44,27 @@ def topics_select
     end
 
     def topics_list
-      topics.each do |topic|
-        div id: dom_id(topic), class: "text-small mb-2 hidden lg:block" do
-          a(
-            href: topic_path(topic),
-            data: {
-              turbo_frame: "topics-mainbar"
-            }
+      ul(data: {controller: "current-page"}) do
+        topics.each do |topic|
+          li(
+            id: dom_id(topic),
+            class: [
+              "text-small p-1 hidden lg:block"
+            ]
           ) do
-            topic.name
-          end
+            a(
+              href: topic_path(topic),
+              data: {
+                turbo_frame: "topics-mainbar"
+              }
+            ) do
+              topic.name
+            end
 
-          whitespace
-          span(class: "text-faint") do
-            plain "(#{topic.pages_count})"
+            whitespace
+            span(class: "text-faint") do
+              plain "(#{topic.pages_count})"
+            end
           end
         end
       end

app/views/topics/show.html.erb

@@ -20,7 +20,7 @@
         <h3 class="mb-8 hidden lg:block"><%= topic.name %></h3>
         <ul>
           <% topic.pages.as_published_articles.each do |page| %>
-            <%= tag.li id: dom_id(page) do %>
+            <%= tag.li id: dom_id(page), class: "mb-xs" do %>
               <%= render Pages::Info.new(
                     title: page.title,
                     request_path: page.request_path,