Rails active link styling with turbo frames - ruby-on-rails

Question

I have links made like this:
- #glossaries.each do |g|
%a.{ :href => glossary_path(g), data: { 'turbo_frame': :'entry' } }
= g.title
How can I style active link (active glossary) if result of clicking g.title link is rendered in another frame?
I've tried using helper to give a link some class if current path equal requested path, but it is not working. No 'active' class is given to link:
def current_class?(test_path)
return 'active' if request.path == test_path
''
end
When working with frames current path not showing in browser address bar, so I've tried to force it by data-turbo-action" => "advance". With that browser have current path in address bar, but still link do not have 'active' class..

Answer 1

I write this stimulus controller to handle turbo:click event and make a active state to the clicked element. There is an issue when another turbo:click event handler cancelled the visit, but in this place I don't care about it.
import { Controller } from "#hotwired/stimulus";
export default class extends Controller{
static targets = ['link']
static classes = ['active']
initialize(){
this.handleTurboClick = this.handleTurboClick.bind(this)
}
connect(){
this.element.addEventListener('turbo:click', this.handleTurboClick)
}
disconnect(){
this.element.removeEventListener('turbo:click', this.handleTurboClick)
}
handleTurboClick(event){
this.linkTargets.forEach(target => {
if(target == event.target){
target.classList.add(...this._activeClasses)
}else{
target.classList.remove(...this._activeClasses)
}
})
}
get _activeClasses(){
return this.activeClasses.length == 0 ? ['active'] : this.activeClasses
}
}
<div data-controller="turbo-active-link" data-turbo-active-link-active-class="bg-gray-300 hover:bg-gray-300" data-turbo-frame="main">
link A
link B
</div

Answer 2

The reason why it would not update is because the other frame is navigating while the rest of the page stays the same. To make it show the active navigation link you are going to want to either reload both or use some custom JavaScript. I would rather just reload both sides I would do another turbo-frame around the navigation and the sidepanel like so
<%= turbo_frame_tag "glosarries_index" do %>
... Navigation links would be here but remove the data-turbo-frame it will automatically use the closest parent.
<%= turbo_frame_tag "entry" do %>
...
<% end %>
<% end %>