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.
This commit is contained in:
51
frontend/src/views/personal/CalendarView.vue
Normal file
51
frontend/src/views/personal/CalendarView.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user