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/layout/Header/Header.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <topbar />
+
+    <v-row align="center" justify="space-between">
+      <div class="d-flex mx-4">
+        <v-card class="ma-3 pa-6" outlined tile>LOGO Buningh</v-card>
+        <v-row align="center" class="mx-4">
+          <v-col>
+            <v-btn
+              text
+              small
+              :to="item.to"
+              v-for="(item,i) in menu"
+              :key="i"
+              class="mx-4"
+            >{{item.title}}</v-btn>
+          </v-col>
+        </v-row>
+      </div>
+
+      <div class="d-flex">
+        <v-text-field
+          v-model="search"
+          append-icon="icon-search"
+          label="Zoeken naar merk of product.."
+          single-line
+          hide-details
+          outlined
+        ></v-text-field>
+
+        <v-row align="center" class="mx-4">
+          <v-col>
+            <v-btn icon to="/login">
+              <v-icon>icon-password</v-icon>
+            </v-btn>
+          </v-col>
+          <v-col>
+            <v-btn icon>
+              <v-icon>mdi-heart</v-icon>
+            </v-btn>
+          </v-col>
+          <v-col>
+            <v-btn icon>
+              <v-icon>mdi-shopping-outline</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+      </div>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Topbar from '~/components/layout/Header/Topbar'
+
+export default {
+  components: {
+    Topbar
+  },
+  data() {
+    return {
+      search: '',
+      menu: [
+        { title: 'Verlichting', to: '/' },
+        { title: 'Meubels', to: '/' },
+        { title: 'Behang', to: '/' },
+        { title: 'Stoffen', to: '/' },
+        { title: 'Accessoires', to: '/' }
+      ]
+    }
+  },
+  computed: {
+    title() {
+      return `${process.env.NAME}`
+    }
+  }
+}
+</script>
+    

components/layout/Header/Topbar.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-toolbar dense flat>
+    <span v-for="(item,i) in menuItems.left" :key="`x${i}`" class="mx-4 caption">
+      <v-avatar color="#ffcc00" size="6" class="mx-2"></v-avatar>
+      <span>{{item.label}}</span>
+    </span>
+
+    <v-spacer></v-spacer>
+
+    <span v-for="(item,i) in menuItems.right" :key="i" class="mx-4 caption">
+      {{item.label}}
+    </span>
+  </v-toolbar>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuItems: {
+        left: [
+          { label: 'Gratis verzending in NL & BE' },
+          { label: 'Meer dan 500 merken' },
+          { label: '135 jaar de nieuwste trends' }
+        ],
+        right: [
+          { label: 'Interieuradvies', to: '/interieuradvies' },
+          { label: 'Over Buningh', to: '/algemeen' },
+          { label: 'Klantenservice', to: '/klantenservice' },
+          { label: '+31 10 41 40 560' }
+        ]
+      },
+
+      menu: [
+        { title: 'Verlichting', route: '/' },
+        { title: 'Meubels', route: '/' },
+        { title: 'Behang', route: '/' },
+        { title: 'Stoffen', route: '/' },
+        { title: 'Accessoires', route: '/' },
+        { title: 'Sale', route: '/' },
+        { title: 'Inspiratie', route: '/' },
+        { title: 'Merken', route: '/' }
+      ]
+    }
+  },
+  computed: {
+    title() {
+      return `${process.env.NAME}`
+    }
+  }
+}
+</script>
+