Fixes Issue #12421 - Change page title based on the site section being viewed (#12627)

* Update title for tabs not including challenges, guild and team

* add section titles to challenges, guilds, and groups

* Update dynamic title to use vuex action

* Remove duplicate key

* Actually remove duplicate key

* Fix section sub section in group

* Add note to implement setTitle when adding a page

* Add missing sections to dynamic title

* Features string not translated

* Use onGroupUpdate to update group titles

* Add watcher to challenges for dynamic title updates

* Small fixes

* Add register and login to title, remove duplicate keys

* Add home page dynamic title functionality

* Minor name changes

* remove wrong i18n strings from front.js

* refactor router note

Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/challenges/challengeDetail.vue

@@ -384,6 +384,16 @@ export default {
       memberResults: [],
     };
   },
+  watch: {
+    'challenge.name': {
+      handler (newVal) {
+        this.$store.dispatch('common:setTitle', {
+          section: this.$t('challenge'),
+          subSection: newVal.name,
+        });
+      },
+    },
+  },
   computed: {
     ...mapState({ user: 'user.data' }),
     isMember () {
@@ -433,6 +443,10 @@ export default {
         this.$router.push('/challenges/findChallenges');
         return;
       }
+      this.$store.dispatch('common:setTitle', {
+        subSection: this.challenge.name,
+        section: this.$t('challenges'),
+      });
       const tasks = await this.$store.dispatch('tasks:getChallengeTasks', { challengeId: this.searchId });
       this.tasksByType = {
         habit: [],