Implement personal section in navigation: Add a new 'personal' menu item with sub-items for language learning and calendar. Update localization files for English and German to include translations for the new section. Integrate personal routes into the router configuration for navigation.

frontend/src/i18n/index.js

@@ -18,6 +18,7 @@ import enPasswordReset from './locales/en/passwordReset.json';
 import enBlog from './locales/en/blog.json';
 import enMinigames from './locales/en/minigames.json';
 import enMessage from './locales/en/message.json';
+import enPersonal from './locales/en/personal.json';
 
 import deGeneral from './locales/de/general.json';
 import deHeader from './locales/de/header.json'; 
@@ -36,6 +37,7 @@ import dePasswordReset from './locales/de/passwordReset.json';
 import deBlog from './locales/de/blog.json';
 import deMinigames from './locales/de/minigames.json';
 import deMessage from './locales/de/message.json';
+import dePersonal from './locales/de/personal.json';
 
 const messages = {
   en: {
@@ -56,6 +58,7 @@ const messages = {
     ...enBlog,
     ...enMinigames,
     ...enMessage,
+    ...enPersonal,
   },
   de: {
     'Ok': 'Ok',
@@ -76,6 +79,7 @@ const messages = {
     ...deBlog,
     ...deMinigames,
     ...deMessage,
+    ...dePersonal,
   }
 };
 

frontend/src/i18n/locales/de/navigation.json

@@ -7,6 +7,7 @@
         "chats": "Chats",
         "falukant": "Falukant",
         "minigames": "Minispiele",
+        "personal": "Persönliches",
         "settings": "Einstellungen",
         "administration": "Verwaltung",
         "m-chats": {
@@ -41,6 +42,17 @@
             "match3": "Match 3 - Juwelen",
             "taxi": "Taxi Simulator"
         },
+        "m-personal": {
+            "sprachenlernen": "Sprachen lernen",
+            "calendar": "Kalender",
+            "m-sprachenlernen": {
+                "vocabtrainer": "Vokabeltrainer",
+                "sprachkurse": "Sprachkurse",
+                "m-vocabtrainer": {
+                    "newLanguage": "Neue Sprache"
+                }
+            }
+        },
         "m-settings": {
             "homepage": "Startseite",
             "account": "Account",

frontend/src/i18n/locales/de/personal.json

@@ -0,0 +1,8 @@
+{
+    "personal": {
+        "calendar": {
+            "title": "Kalender",
+            "comingSoon": "Der Kalender wird bald verfügbar sein. Hier können Sie zukünftig Ihre Termine und Ereignisse verwalten."
+        }
+    }
+}

frontend/src/i18n/locales/en/navigation.json

@@ -7,6 +7,7 @@
         "chats": "Chats",
         "falukant": "Falukant",
         "minigames": "Mini games",
+        "personal": "Personal",
         "settings": "Settings",
         "administration": "Administration",
         "m-chats": {
@@ -41,6 +42,17 @@
             "match3": "Match 3 - Jewels",
             "taxi": "Taxi Simulator"
         },
+        "m-personal": {
+            "sprachenlernen": "Learn Languages",
+            "calendar": "Calendar",
+            "m-sprachenlernen": {
+                "vocabtrainer": "Vocabulary trainer",
+                "sprachkurse": "Language courses",
+                "m-vocabtrainer": {
+                    "newLanguage": "New language"
+                }
+            }
+        },
         "m-settings": {
             "homepage": "Homepage",
             "account": "Account",

frontend/src/i18n/locales/en/personal.json

@@ -0,0 +1,8 @@
+{
+    "personal": {
+        "calendar": {
+            "title": "Calendar",
+            "comingSoon": "The calendar will be available soon. Here you will be able to manage your appointments and events."
+        }
+    }
+}

frontend/src/router/index.js

@@ -8,6 +8,7 @@ import adminRoutes from './adminRoutes';
 import falukantRoutes from './falukantRoutes';
 import blogRoutes from './blogRoutes';
 import minigamesRoutes from './minigamesRoutes';
+import personalRoutes from './personalRoutes';
 
 const routes = [
   {
@@ -22,6 +23,7 @@ const routes = [
   ...falukantRoutes,
   ...blogRoutes,
   ...minigamesRoutes,
+  ...personalRoutes,
 ];
 
 const router = createRouter({

frontend/src/router/personalRoutes.js

@@ -0,0 +1,12 @@
+const CalendarView = () => import('../views/personal/CalendarView.vue');
+
+const personalRoutes = [
+    {
+        path: '/personal/calendar',
+        name: 'Calendar',
+        component: CalendarView,
+        meta: { requiresAuth: true }
+    }
+];
+
+export default personalRoutes;

frontend/src/views/personal/CalendarView.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="calendar-view">
+        <h2>{{ $t('personal.calendar.title') }}</h2>
+        
+        <div class="coming-soon">
+            <img src="/images/icons/coming-soon.png" alt="Coming Soon" class="coming-soon-icon" />
+            <p>{{ $t('personal.calendar.comingSoon') }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CalendarView',
+};
+</script>
+
+<style scoped lang="scss">
+.calendar-view {
+    padding: 20px;
+}
+
+h2 {
+    margin-bottom: 20px;
+    color: var(--color-text-primary);
+}
+
+.coming-soon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    background: #f9f9f9;
+    border: 1px dashed #ccc;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.coming-soon-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 20px;
+    opacity: 0.7;
+}
+
+.coming-soon p {
+    font-size: 1.2em;
+    color: #666;
+}
+</style>