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/UI/DarkModeSwitch/DarkModeSwitch.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-btn fab text @click="switchDarkMode">
+    <v-tooltip bottom>
+      {{ $t('general.theme')}}
+      <template
+        v-slot:activator="{ on, attrs }"
+        color="#FFCCCC"
+        max-width="10"
+      >
+        <v-icon :color="`${$vuetify.theme.dark && 'yellow'}`" v-bind="attrs" v-on="on">icon-sun</v-icon>
+      </template>
+    </v-tooltip>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  mounted() {
+    if (localStorage.getItem('dark') == 'true') {
+      setTimeout(() => (this.$vuetify.theme.dark = true), 0)
+    }
+  },
+  methods: {
+    switchDarkMode() {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      localStorage.setItem('dark', this.$vuetify.theme.dark.toString())
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.v-tooltip__content.v-tooltip__content--fixed {
+  max-width: 272px;
+  padding: 15px 20px;
+  line-height: 18px;
+  top: 75px !important;
+  left: 1020px !important; 
+
+  position: absolute !important;
+
+  // box-shadow: 2px 10px 2px 1px rgba(0, 0, 0, .15);
+  filter: drop-shadow(5px 10px 0.35rem rgba(0, 0, 0, 0.15));
+  &:before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    border-top: 13px solid transparent;
+    border-bottom: 13px solid transparent;
+    border-right: 13px solid #30b7cd;
+    left: 130px;
+    top: -17px;
+    transform: rotate(90deg);
+  }
+}
+</style>