yourpart3/frontend/src/components/AppSectionBar.vue

<template>
  <section v-if="isVisible" class="app-section-bar surface-card">
    <div class="app-section-bar__copy">
      <span class="app-section-bar__eyebrow">{{ sectionLabel }}</span>
      <h1 class="app-section-bar__title">{{ pageTitle }}</h1>
    </div>
    <button
      v-if="backTarget"
      type="button"
      class="app-section-bar__back"
      @click="navigateBack"
    >
      {{ $t('general.back') }}
    </button>
  </section>
</template>

<script>
const SECTION_LABELS = [
  { test: (path) => path.startsWith('/falukant'), labelKey: 'sectionBar.sections.falukant' },
  { test: (path) => path.startsWith('/socialnetwork/vocab'), labelKey: 'sectionBar.sections.vocab' },
  { test: (path) => path.startsWith('/socialnetwork/forum'), labelKey: 'sectionBar.sections.forum' },
  { test: (path) => path.startsWith('/socialnetwork'), labelKey: 'sectionBar.sections.community' },
  { test: (path) => path.startsWith('/friends'), labelKey: 'sectionBar.sections.community' },
  { test: (path) => path.startsWith('/settings'), labelKey: 'sectionBar.sections.settings' },
  { test: (path) => path.startsWith('/admin'), labelKey: 'sectionBar.sections.administration' },
  { test: (path) => path.startsWith('/minigames'), labelKey: 'sectionBar.sections.minigames' },
  { test: (path) => path.startsWith('/personal'), labelKey: 'sectionBar.sections.personal' },
  { test: (path) => path.startsWith('/blogs'), labelKey: 'sectionBar.sections.blog' }
];

const TITLE_MAP = {
  Friends: 'sectionBar.titles.friends',
  Guestbook: 'sectionBar.titles.guestbook',
  'Search users': 'sectionBar.titles.search',
  Gallery: 'sectionBar.titles.gallery',
  Forum: 'sectionBar.titles.forum',
  ForumTopic: 'sectionBar.titles.topic',
  Diary: 'sectionBar.titles.diary',
  VocabTrainer: 'sectionBar.titles.languages',
  VocabNewLanguage: 'sectionBar.titles.newLanguage',
  VocabSubscribe: 'sectionBar.titles.subscribeLanguage',
  VocabLanguage: 'sectionBar.titles.language',
  VocabLanguageDictionary: 'sectionBar.titles.vocabDictionary',
  VocabChapter: 'sectionBar.titles.chapter',
  VocabCourses: 'sectionBar.titles.courses',
  VocabCourseDictionary: 'sectionBar.titles.vocabDictionary',
  VocabCourse: 'sectionBar.titles.course',
  VocabLesson: 'sectionBar.titles.lesson',
  FalukantCreate: 'sectionBar.titles.createCharacter',
  FalukantOverview: 'sectionBar.titles.overview',
  BranchView: 'sectionBar.titles.branch',
  MoneyHistoryView: 'sectionBar.titles.moneyHistory',
  FalukantFamily: 'sectionBar.titles.family',
  HouseView: 'sectionBar.titles.house',
  NobilityView: 'sectionBar.titles.nobility',
  ReputationView: 'sectionBar.titles.reputation',
  ChurchView: 'sectionBar.titles.church',
  EducationView: 'sectionBar.titles.education',
  BankView: 'sectionBar.titles.bank',
  DirectorView: 'sectionBar.titles.directors',
  HealthView: 'sectionBar.titles.health',
  PoliticsView: 'sectionBar.titles.politics',
  UndergroundView: 'sectionBar.titles.underground',
  'Personal settings': 'sectionBar.titles.personalSettings',
  'View settings': 'sectionBar.titles.viewSettings',
  'Sexuality settings': 'sectionBar.titles.sexualitySettings',
  'Flirt settings': 'sectionBar.titles.flirtSettings',
  'Account settings': 'sectionBar.titles.accountSettings',
  'Language assistant settings': 'sectionBar.titles.languageAssistantSettings',
  Interests: 'sectionBar.titles.interests',
  AdminInterests: 'sectionBar.titles.adminInterests',
  AdminUsers: 'sectionBar.titles.adminUsers',
  AdminUserStatistics: 'sectionBar.titles.adminUserStatistics',
  AdminContacts: 'sectionBar.titles.adminContacts',
  AdminModerationReports: 'sectionBar.titles.adminModerationReports',
  AdminUserRights: 'sectionBar.titles.adminUserRights',
  AdminForums: 'sectionBar.titles.adminForums',
  AdminChatRooms: 'sectionBar.titles.adminChatRooms',
  AdminFalukantEditUserView: 'sectionBar.titles.adminFalukantUsers',
  AdminFalukantMapRegionsView: 'sectionBar.titles.adminFalukantMap',
  AdminFalukantCreateNPCView: 'sectionBar.titles.adminCreateNpc',
  AdminFalukantWorkerSchedulesView: 'sectionBar.titles.adminWorkerSchedules',
  AdminMinigames: 'sectionBar.titles.adminMinigames',
  AdminTaxiTools: 'sectionBar.titles.adminTaxiTools',
  AdminServicesStatus: 'sectionBar.titles.adminServicesStatus'
};

export default {
  name: 'AppSectionBar',
  computed: {
    routePath() {
      return this.$route?.path || '';
    },
    isVisible() {
      return Boolean(this.$route?.meta?.requiresAuth) && this.routePath !== '/';
    },
    sectionLabel() {
      const found = SECTION_LABELS.find((entry) => entry.test(this.routePath));
      return this.$t(found?.labelKey || 'sectionBar.sections.default');
    },
    pageTitle() {
      const titleKey = TITLE_MAP[this.$route?.name];
      return titleKey ? this.$t(titleKey) : this.sectionLabel;
    },
    backTarget() {
      const params = this.$route?.params || {};

      if (this.routePath.endsWith('/dictionary') && params.courseId) {
        return `/socialnetwork/vocab/courses/${params.courseId}`;
      }

      if (this.routePath.endsWith('/dictionary') && params.languageId) {
        return `/socialnetwork/vocab/${params.languageId}`;
      }

      if (this.routePath.startsWith('/socialnetwork/vocab/courses/') && params.lessonId && params.courseId) {
        return `/socialnetwork/vocab/courses/${params.courseId}`;
      }

      if (this.routePath.startsWith('/socialnetwork/vocab/') && params.chapterId && params.languageId) {
        return `/socialnetwork/vocab/${params.languageId}`;
      }

      if (this.routePath.startsWith('/socialnetwork/vocab/new') || this.routePath.startsWith('/socialnetwork/vocab/subscribe')) {
        return '/socialnetwork/vocab';
      }

      if (this.routePath.startsWith('/socialnetwork/vocab/courses/') && params.courseId) {
        return '/socialnetwork/vocab/courses';
      }

      if (this.routePath.startsWith('/admin/users/statistics')) {
        return '/admin/users';
      }

      if (this.routePath.startsWith('/falukant/') && this.routePath !== '/falukant/home') {
        return '/falukant/home';
      }

      if (this.routePath.startsWith('/settings/') && this.routePath !== '/settings/personal') {
        return '/settings/personal';
      }

      if (this.routePath.startsWith('/admin/') && this.routePath !== '/admin/users') {
        return '/admin/users';
      }

      if (window.history.length > 1) {
        return '__history_back__';
      }

      return null;
    }
  },
  methods: {
    navigateBack() {
      if (this.backTarget === '__history_back__') {
        this.$router.back();
        return;
      }
      if (this.backTarget) {
        this.$router.push(this.backTarget);
      }
    }
  }
};
</script>

<style scoped>
.app-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(248, 240, 231, 0.94));
}

.app-section-bar__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-section-bar__eyebrow {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-soft);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-section-bar__title {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
}

.app-section-bar__back {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  border: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .app-section-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-section-bar__copy {
    flex-wrap: wrap;
  }

  .app-section-bar__back {
    width: 100%;
  }
}
</style>