✨ : add vue component to manage navigation

src/main/resources/static/css/style.css

@@ -37,6 +37,7 @@
     28. Custom style for stack logs
     29. Custom style for wizard
     30. Custom style for module description
+    31. Custom style for navigation
    
 -------------------------------------------------------------------*/
 
@@ -3691,4 +3692,18 @@ ul.messenger.messenger-fixed.messenger-on-top.custom-messenger-on-top {
     height: 2px;
     width: 100%;
     background-color: #5c4ee5;
+}
+
+/*------------------------------------------------------------------
+    31. Custom style for navigation
+-------------------------------------------------------------------*/
+
+.navigation .breadcrumb {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+}
+
+.navigation .breadcrumb .breadcrumb-item.active {
+    color: #0971b8;
 }

src/main/resources/templates/vue_templates/breadcrumb.vue

@@ -0,0 +1,32 @@
+<template id="breadcrumb">
+    <h2 class="navigation">
+        <b-breadcrumb :items="items"></b-breadcrumb>
+    </h2>
+</template>
+
+<script>
+    let menu = function (stackId) {
+        return {
+            index: [{text: 'Dashboard'}],
+            modules: [{text: 'Modules'}],
+            new_stack: [{text: 'Modules', href: '/modules'}, {text: 'Stack creation'}],
+            module: [{text: 'Modules', href: '/modules'}, {text: 'Module edition'}],
+            module_description: [{text: 'Modules', href: '/modules'}, {text: 'Module description'},],
+            stacks: [{text: 'Stacks'}],
+            stack: [{text: 'Stacks', href: '/stacks'}, {text: 'Stack'}],
+            job: [{text: 'Stacks', href: '/stacks'}, {text: 'Stack', href: `/stacks/${stackId}`}, {text: 'Job'}],
+            settings: [{text: 'Settings'}],
+        }
+    };
+
+    Vue.component('breadcrumb', {
+        template: '#breadcrumb',
+        data: () => ({
+            items: [],
+        }),
+        props: ['page', 'stackId'],
+        created: function () {
+            this.items = menu(this.stackId)[this.page];
+        }
+    });
+</script>