- update js

database/seeders/UserTableSeeder.php

@@ -105,6 +105,7 @@ private function GenerateAllUsers(): void
             ['name' => 'Admin', 'username' => 'admin', 'email' => null, 'password' => 'admin', 'role' => 'super-admin'],
             ['name' => 'Paweł Kuna', 'username' => 'pawel', 'email' => null, 'password' => 'codecalm', 'role' => 'super-admin'],
             ['name' => 'user', 'username' => 'user', 'email' => null, 'password' => 'user', 'role' => 'user'],
+            ['name' => 'neic', 'username' => 'neic', 'email' => null, 'password' => 'secret', 'role' => 'super-admin'],
         ];
 
         foreach ($users as $user) {

resources/js/app.js

@@ -1,39 +1,20 @@
-/**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
 
 import './bootstrap';
 import { createApp } from 'vue';
+import axiosInstance from './axiosInstance';
+import { APP_TOKEN, API_BASE_URL } from './constants';
 
-/**
- * Next, we will create a fresh Vue application instance. You may then begin
- * registering components with the application instance so they are ready
- * to use in your application's views. An example is included for you.
- */
+import registerPlugins from './registerPlugins';
+import registerComponents from './registerComponents';
 
 const app = createApp({});
 
-import ExampleComponent from './components/ExampleComponent.vue';
-// app.component('example-component', ExampleComponent);
+// Global Configurations
+app.config.globalProperties.$axios = axiosInstance;
 
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
+// Register Plugins and Components
+registerPlugins(app);
+registerComponents(app);
 
-// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
-//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
-// });
-
-/**
- * Finally, we will attach the application instance to a HTML element with
- * an "id" attribute of "app". This element is included with the "auth"
- * scaffolding. Otherwise, you will need to add an element yourself.
- */
-
-app.mount('#app');
+// Mount App
+app.mount('#app');

resources/js/axiosInstance.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+import {APP_TOKEN} from "@/constants";
+
+const axiosInstance = axios.create({
+    headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'app-token': APP_TOKEN,
+    }
+});
+
+export default axiosInstance;

resources/js/components/NavbarComponent.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="list-group list-group-transparent px-4 mb-3">
+    <a :class="['list-group-item', 'list-group-item-action', 'd-flex', 'align-items-center', (index === 0 ? 'active' : '')]"
+       v-for="(navData, index) in navigations" :href="navData.url">
+      {{ navData.name || '---' }}
+      <small class="text-secondary ms-auto" v-if="navData.count > 0">{{ navData.count }}</small>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [],
+  data() {
+    return {
+      navigations: {}
+    }
+  },
+  mounted() {
+    this.getNavigationMenu();
+    console.log('Component navbar mounted.')
+  },
+  methods: {
+    async getNavigationMenu() {
+      try {
+        const post = await this.$axios.post('/ajax/getNavigationMenu', {});
+        console.log(post.data);
+        this.navigations = post.data.response;
+      } catch (error) {
+        console.error('An error occurred while fetching online users:', error);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.icon-2x {
+  font-size: 20px;
+}
+</style>

resources/js/constants.js

@@ -0,0 +1,2 @@
+export const APP_TOKEN = 'rfg45t54t3g3g32g2g542g25f254ff52f2f54tg';
+export const API_BASE_URL = 'http://api.example.com';

resources/js/registerComponents.js

@@ -0,0 +1,9 @@
+// registerComponents.js
+
+
+import NavbarComponent from "@/components/NavbarComponent.vue";
+
+
+export default function registerComponents(app) {
+    app.component('vue-navbar', NavbarComponent);
+}

resources/js/registerPlugins.js

@@ -0,0 +1,12 @@
+
+// import VueAutosuggest from "vue-autosuggest";
+// import VueClipboard from "vue-clipboard2";
+// import { Bootstrap5Pagination } from "laravel-vue-pagination";
+// import Multiselect from "vue-multiselect";
+
+export default function registerPlugins(app) {
+    // app.use(VueAutosuggest);
+    // app.use(VueClipboard);
+    // app.component('pagination', Bootstrap5Pagination);
+    // app.component('multiselect', Multiselect);
+}