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/SearchResizable/SearchResizable.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <div class="searchbar">
+      <input
+        v-model="search"
+        @keyup.enter="query"
+        class="search_input"
+        type="text"
+        autofocus
+        name
+        placeholder="Search Image"
+      />
+      <a href="#" @click="query" class="search_icon">
+        <v-icon>icon-search</v-icon>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  middleware: 'auth',
+  layout: `${process.env.CUSTOMER}Admin`,
+  data() {
+    return {
+      search: 'value'
+    }
+  },
+  methods: {
+    query() {}
+  }
+}
+</script>
+
+<style scoped>
+@import 'https://getbootstrap.com/docs/4.0/examples/cover/cover.css';
+.searchbar {
+  /* margin-bottom: auto;
+  margin-top: auto;
+  height: 60px; */
+  background-color: #353b48;
+  border-radius: 30px;
+  padding: 10px;
+}
+.search_input {
+  color: white;
+  border: 0;
+  outline: 0;
+  background: none;
+  width: 0;
+  caret-color: transparent;
+  line-height: 40px;
+  transition: width 0.3s linear;
+}
+.searchbar:hover > .search_input {
+  padding: 0 10px;
+  width: 250px;
+  caret-color: red;
+  transition: width 0.3s linear;
+}
+.searchbar:hover > .search_icon {
+  background: white;
+  color: #e74c3c;
+}
+.search_icon {
+  height: 40px;
+  width: 40px;
+  float: right;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  color: white;
+}
+</style>