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"
    >
      Zurück
    </button>
  </section>
</template>

<script>
const SECTION_LABELS = [
  { test: (path) => path.startsWith('/falukant'), label: 'Falukant' },
  { test: (path) => path.startsWith('/socialnetwork/vocab'), label: 'Vokabeltrainer' },
  { test: (path) => path.startsWith('/socialnetwork/forum'), label: 'Forum' },
  { test: (path) => path.startsWith('/socialnetwork'), label: 'Community' },
  { test: (path) => path.startsWith('/friends'), label: 'Community' },
  { test: (path) => path.startsWith('/settings'), label: 'Einstellungen' },
  { test: (path) => path.startsWith('/admin'), label: 'Administration' },
  { test: (path) => path.startsWith('/minigames'), label: 'Minispiele' },
  { test: (path) => path.startsWith('/personal'), label: 'Persönlich' },
  { test: (path) => path.startsWith('/blogs'), label: 'Blog' }
];

const TITLE_MAP = {
  Friends: 'Freunde',
  Guestbook: 'Gästebuch',
  'Search users': 'Suche',
  Gallery: 'Galerie',
  Forum: 'Forum',
  ForumTopic: 'Thema',
  Diary: 'Tagebuch',
  VocabTrainer: 'Sprachen',
  VocabNewLanguage: 'Neue Sprache',
  VocabSubscribe: 'Sprache abonnieren',
  VocabLanguage: 'Sprache',
  VocabChapter: 'Kapitel',
  VocabCourses: 'Kurse',
  VocabCourse: 'Kurs',
  VocabLesson: 'Lektion',
  FalukantCreate: 'Charakter erstellen',
  FalukantOverview: 'Übersicht',
  BranchView: 'Niederlassung',
  MoneyHistoryView: 'Geldverlauf',
  FalukantFamily: 'Familie',
  HouseView: 'Haus',
  NobilityView: 'Adel',
  ReputationView: 'Ansehen',
  ChurchView: 'Kirche',
  EducationView: 'Bildung',
  BankView: 'Bank',
  DirectorView: 'Direktoren',
  HealthView: 'Gesundheit',
  PoliticsView: 'Politik',
  UndergroundView: 'Untergrund',
  'Personal settings': 'Persönliche Daten',
  'View settings': 'Ansicht',
  'Sexuality settings': 'Sexualität',
  'Flirt settings': 'Flirt',
  'Account settings': 'Account',
  Interests: 'Interessen',
  AdminInterests: 'Interessenverwaltung',
  AdminUsers: 'Benutzer',
  AdminUserStatistics: 'Benutzerstatistik',
  AdminContacts: 'Kontaktanfragen',
  AdminUserRights: 'Rechte',
  AdminForums: 'Forumverwaltung',
  AdminChatRooms: 'Chaträume',
  AdminFalukantEditUserView: 'Falukant-Nutzer',
  AdminFalukantMapRegionsView: 'Falukant-Karte',
  AdminFalukantCreateNPCView: 'NPC erstellen',
  AdminMinigames: 'Match3-Verwaltung',
  AdminTaxiTools: 'Taxi-Tools',
  AdminServicesStatus: 'Service-Status'
};

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 found?.label || 'Bereich';
    },
    pageTitle() {
      return TITLE_MAP[this.$route?.name] || this.sectionLabel;
    },
    backTarget() {
      const params = this.$route?.params || {};

      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 {
  min-width: 0;
}

.app-section-bar__eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  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__back {
    width: 100%;
  }
}
</style>