Initial Nuxt frontend import

- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture

components/Learning/ProductOverview/Links.vue

@@ -0,0 +1,181 @@
+<template>
+  <accordion-card :title="$t('learning.product_overview.links')">
+    <v-row>
+      <v-col cols="12" sm="12" md="3">
+        <v-subheader class="txt--text font-weight-black">{{
+          $t('general.sharepoint')
+        }}</v-subheader>
+      </v-col>
+      <v-col cols="12" sm="12" md="6">
+        <v-text-field
+          prepend-inner-icon="icon-sharepoint"
+          v-model="sharepoint_link"
+          placeholder="https://sharepoint.com/"
+          outlined
+          flat
+          class="links"
+          v-if="editMode"
+        ></v-text-field>
+        <v-btn
+          v-if="!editMode && sharepoint_link"
+          :href="sharepoint_link"
+          target="_blank"
+          text
+          link
+
+          ><v-icon left>icon-sharepoint</v-icon> {{ sharepoint_link }}</v-btn
+        >
+      </v-col>
+      <v-col cols="12" sm="12" md="3">
+        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" sm="12" md="3">
+        <v-subheader class="txt--text font-weight-black">{{
+          $t('general.support_site')
+        }}</v-subheader>
+      </v-col>
+      <v-col cols="12" sm="12" md="6">
+        <v-text-field
+          v-model="support_link"
+          prepend-inner-icon="icon-link"
+          placeholder="https://support.ggzecademy.nl/"
+          outlined
+          flat
+          class="links"
+          v-if="editMode"
+        />
+        <v-btn
+          v-if="!editMode && support_link"
+          :href="support_link"
+          link
+          text
+          target="_blank"
+
+          ><v-icon left>icon-link</v-icon>{{ support_link }}</v-btn
+        >
+      </v-col>
+      <v-col cols="12" sm="12" md="3">
+        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" sm="12" md="3">
+        <v-subheader class="txt--text font-weight-black">{{
+          $t('general.support_tickets')
+        }}</v-subheader>
+      </v-col>
+      <v-col cols="12" sm="12" md="6">
+        <v-text-field
+          v-model="support_tickets_link"
+          prepend-inner-icon="icon-link"
+          placeholder="https://support.ggzecademy.nl/"
+          outlined
+          flat
+          class="links"
+          v-if="editMode"
+        ></v-text-field>
+        <v-btn
+          v-if="!editMode && support_tickets_link"
+          :href="support_tickets_link"
+          text
+          target="_blank"
+          link
+          ><v-icon left>icon-link</v-icon>{{ support_tickets_link }}</v-btn
+        >
+      </v-col>
+      <v-col cols="12" sm="12" md="3">
+        <!-- <v-subheader v-if="editMode">{{ $t('general.add_link') }}</v-subheader> -->
+      </v-col>
+    </v-row>
+  </accordion-card>
+</template>
+
+<script>
+import accordionCard from '@/components/UI/AccordionCard/AccordionCard'
+
+export default {
+  components: {
+    accordionCard,
+  },
+  props: {
+    editMode: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    local() {
+      return this.$store.state.learning.local
+    },
+    sharepoint_link: {
+      get() {
+        return this.local.sharepoint_link || ''
+      },
+      set(value) {
+        this.$store.commit('learning/UPDATE_FIELD', {
+          field: 'sharepoint_link',
+          value,
+        })
+      },
+    },
+    support_link: {
+      get() {
+        return this.local.support_link || ''
+      },
+      set(value) {
+        this.$store.commit('learning/UPDATE_FIELD', {
+          field: 'support_link',
+          value,
+        })
+      },
+    },
+    support_tickets_link: {
+      get() {
+        return this.local.support_tickets_link || ''
+      },
+      set(value) {
+        this.$store.commit('learning/UPDATE_FIELD', {
+          field: 'support_tickets_link',
+          value,
+        })
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+.v-input__icon--prepend .v-icon {
+  font-size: 15px !important;
+}
+.links >>> .v-input__icon--prepend-inner {
+  margin: auto 12px;
+}
+.links >>> .v-input__icon--prepend-inner i {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--v-txt-base) !important;
+}
+.links >>> .v-input__icon--prepend-inner .icon-sharepoint {
+  color: dodgerblue !important;
+}
+
+.links >>> .v-text-field__slot {
+  border-left: 1px solid var(--v-lines-base) !important;
+  padding-left: 15px;
+}
+
+.links >>> .v-input__slot:hover .v-text-field__slot {
+  border-color: var(--v-secAccent-base) !important;
+}
+.row{
+  overflow: hidden;
+}
+.row >>> div:nth-child(3) .v-subheader {
+  color: var(--v-tertiary-base) !important;
+}
+</style>