use tabbar partial for main navbar and improve tabbar

app/assets/stylesheets/styles.scss

@@ -25,6 +25,16 @@ $skills-dark-blue: #1e5a96;
   cursor: pointer;
 }
 
+.skills-navbar{
+  .nav-link {
+    color: white;
+    @extend .px-2;
+    &.active {
+      background-color: $skills-dark-blue;
+    }
+  }
+}
+
 .navbar {
   flex-direction: row;
   list-style-type: none;

app/controllers/application_controller.rb

@@ -43,6 +43,7 @@ def render_error(title_key, body_key, status = :bad_request)
   end
 
   def default_url_options
-    { locale: I18n.locale }
+    active_locale = I18n.locale == I18n.default_locale ? nil : I18n.locale
+    { locale: active_locale }
   end
 end

app/helpers/auth_helper.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 module AuthHelper
-  NAVBAR_REGEX = /^(?:\/(?:#{I18n.available_locales.join('|')}))?(\/[^\/]+)(?:\/|$)/
 
   def session_path(_scope)
     new_auth_user_session_path
@@ -34,8 +33,4 @@ def language_selector # rubocop:disable Metrics/AbcSize
     end
     options_for_select(languages, url_for(locale: I18n.locale))
   end
-
-  def first_path
-    request.path.match(NAVBAR_REGEX)&.captures&.first
-  end
 end

app/helpers/tab_helper.rb

@@ -1,10 +1,35 @@
 # frozen_string_literal: true
 
 module TabHelper
+  LOCALE_REGEX = /(\/(?:#{I18n.available_locales.join('|')}))/
+  GLOBAL_NAVBAR_REGEX = /^#{LOCALE_REGEX}?(\/[^\/]+)(?:\/|$)/
+  PERSON_NAVBAR_REGEX = /^(.*)/
+
   def person_tabs(person)
     [
       { title: 'CV', path: person_path(person) },
       { title: 'Skills', path: person_people_skills_path(person) }
     ]
   end
+
+  def global_tabs
+    [
+      { title: ti('navbar.profile'), path: people_path },
+      { title: ti('navbar.skill_search'), path: people_skills_path },
+      { title: ti('navbar.cv_search'), path: cv_search_index_path },
+      { title: ti('navbar.skillset'), path: skills_path }
+    ]
+  end
+
+  def extract_path(regex)
+    request.path.match(regex)&.captures&.join
+  end
+
+  def global_navbar_path
+    extract_path(GLOBAL_NAVBAR_REGEX)
+  end
+
+  def person_navbar_path
+    extract_path(PERSON_NAVBAR_REGEX)
+  end
 end

app/javascript/controllers/index.js

@@ -37,9 +37,6 @@ application.register("people-skills", PeopleSkillsController)
 import PeopleSkillsFilterController from "./people_skills_filter_controller"
 application.register("people-skills-filter", PeopleSkillsFilterController)
 
-import ProfileTabController from "./profile_tab_controller"
-application.register("profile-tab", ProfileTabController)
-
 import RemoteModalController from "./remote_modal_controller"
 application.register("remote-modal", RemoteModalController)
 

app/views/application/_tabbar.html.haml

@@ -1,8 +1,8 @@
-%ul.nav.nav-tabs.d-flex.flex-row.mt-2.justify-content-between.mb-3
-    %div.d-flex.flex-row{"data-controller": "profile-tab"}
+%div.d-flex.flex-row.justify-content-between{class: "#{bar_class}"}
+    %div.d-flex.flex-row
         - tabs.each do |tab|
-            = link_to tab[:path], class: "btn text-primary p-0", "data-action": "click->profile-tab#setCurrentTab" do
-                %div.nav-link{ "data-profile-tab-target": "tab"}
+            = link_to tab[:path], class: "btn text-primary p-0 d-flex align-items-center" do
+                %div{class: "nav-link h-100 d-flex align-items-center #{'active' if active_path == tab[:path]}"}
                     = tab[:title]
     %div
-        = yield
+        = yield if defined?(do_yield) && do_yield|| false

app/views/layouts/application.html.haml

@@ -61,19 +61,7 @@
             %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-action": "click->skills-empty-space#goCrazy"}
         %div.puzzle-header
           %div.d-flex.h-100
-            %ul.navbar.h-100
-              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if first_path == people_path(locale: nil)}"}
-                %a.nav-link.cursor-pointer.ps-2.pe-2{href: people_path} 
-                  = ti("navbar.profile")
-              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if first_path == people_skills_path(locale: nil)}"}
-                %a.nav-link.cursor-pointer.ps-2.pe-2{href: people_skills_path} 
-                  = ti("navbar.skill_search")
-              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if first_path == cv_search_index_path(locale: nil)}"}
-                %a.nav-link.cursor-pointer.ps-2.pe-2{href: cv_search_index_path} 
-                  = ti("navbar.cv_search")
-              %li.bg-skills-blue.h-100.d-flex.align-items-center{class: "#{'highlighted' if first_path== skills_path(locale: nil)}"}
-                %a.nav-link.cursor-pointer.ps-2.pe-2{href: skills_path} 
-                  = ti("navbar.skillset")
+            = render "application/tabbar", tabs: global_tabs, bar_class: "skills-navbar", active_path: global_navbar_path
       %div.container-fluid
         %div.row.d-flex.justify-content-center
           = render partial: 'layouts/flash', collection: [:notice, :alert], as: :level

app/views/layouts/person.html.haml

@@ -3,7 +3,7 @@
     %div
       =render partial:"people/search", :locals => {person: @person}
     %div{"data-controller": "highlight"}
-      = render "application/tabbar", tabs: person_tabs(@person) do
+      = render "application/tabbar", tabs: person_tabs(@person), bar_class: "mb-3 mt-2 nav nav-tabs", active_path: person_navbar_path, do_yield: true do
         = export_action_link export_cv_person_path(@person), data: { turbo_frame: "remote_modal" }
   %turbo-frame#tab-content.d-flex.gap-3{"data-controller": "scroll"}
     = yield