belka jako menu

frontend/app/package-lock.json

@@ -7438,6 +7438,11 @@
         "merge-stream": "^1.0.1"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -11514,6 +11519,11 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "propdoc": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/propdoc/-/propdoc-0.9.3.tgz",
+      "integrity": "sha512-pt/2w96r2v6RXWJBUAoDAKCQGUtAGtOGUlzrLV0hleWHoMJ+vKQjWxSTVYXh3hKARv7+C9+fWPFrirgco80Hzw=="
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -14406,6 +14416,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
       "integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
     },
+    "vue-sidebar-menu": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/vue-sidebar-menu/-/vue-sidebar-menu-2.4.1.tgz",
+      "integrity": "sha512-VkciJFYTvoXH0rAtxXpahLFj1YcJbJymWZPjiuBwshWisRisfqr0lHoJlQ58GB6xEjU4xrI9lIm0LDOyMbLMAw==",
+      "requires": {
+        "vue": "^2.5.11"
+      }
+    },
     "vue-style-loader": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",

frontend/app/package.json

@@ -15,9 +15,13 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
+    "jquery": "^3.3.1",
+    "propdoc": "^0.9.3",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vue-sidebar-menu": "^2.4.1",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

frontend/app/src/App.vue

@@ -1,7 +1,12 @@
 <template>
   <div id="app">
     <!-- <router-view/> -->
-    <button v-on:click="downloadData()">Click backend</button>
+    <my-menu></my-menu>
+    <!-- <button v-on:click="downloadData()">Click backend</button> -->
+    <!-- <menu id="my-menu">
+      <h1>App menu </h1>
+    </menu> -->
+  
   </div>
 </template>
 
@@ -29,6 +34,3 @@ export default {
 // https://codepen.io/anon/pen/BGzVpK
 </script>
 
-<style>
-
-</style>

frontend/app/src/components/BootstrapMenu.vue

@@ -1,17 +0,0 @@
-<template>
-<!--https://bootstrap-vue.js.org/docs/ -->
-<!-- npm i bootstrap-vue -->
-<div id="b-menu">
-  <b-btn v-b-toggle.collapse1 variant="primary">Toggle Collapse</b-btn>
-  <b-collapse id="collapse1" class="mt-2">
-    <b-card>
-      <p class="card-text">Collapse contents Here</p>
-      <b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>
-      <b-collapse id=collapse1_inner class="mt-2">
-        <b-card>Hello!</b-card>
-      </b-collapse>
-    </b-card>
-  </b-collapse>
-</div>
-</template>
-

frontend/app/src/components/MyMenu.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="my-menu">
+        <div id = "menu1" class="pos-f-t">
+            <div class="collapse" id="navbarToggleExternalContent">
+                <div class="bg-dark p-4">
+                <h5 class="text-white h4">Collapsed content</h5>
+                <span class="text-muted">Toggleable via the navbar brand.</span>
+                </div>
+            </div>
+            <nav class="navbar navbar-dark bg-dark">
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+                </button>
+            </nav>
+        </div>
+
+        <div class="content-page">
+        <h1> Content</h1>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+.content-page {
+        background-color: blue;
+    text-align: center;
+vertical-align: middle;
+line-height: 90px; 
+}
+
+
+#menu1{
+    background-color: blue;
+    text-align: center;
+vertical-align: middle;
+line-height: 90px; 
+}
+</style>

frontend/app/src/components/SidenavMenu.vue

@@ -1,165 +0,0 @@
-<template>
-<div id="app">
-  <nav class="side-navbar">
-    <ul class="list-unstyled">
-      <li>
-        <a>
-          <i class="ti-home"></i>Home</a>
-      </li>
-      <li v-for="(x, itemIndex) in sideBar" :key="itemIndex">
-        <a @click="setActiveItemId(itemIndex)">
-          <i class="fa" :class="x.icon"></i>{{x.name}}
-        </a>
-        <ul :id="x.id" class="collapse list-unstyled show">
-          <transition-group name="list">
-            <li v-for="y in (activeItemId === itemIndex  && isActive ? x.children : [])" :key="y.name">
-              <a>{{y.name}}</a>
-            </li>
-          </transition-group>
-        </ul>
-      </li>
-    </ul>
-  </nav>
-</div>
-</template>
-
-
-<script>
-export default {
-  methods: {
-    setActiveItemId(itemIndex) {
-      if (itemIndex === this.activeItemId) {
-        this.activeItemId = ''
-        return
-      }
-      this.activeItemId = itemIndex
-    }
-  },
-  data() {
-    return {
-      message: 'Hello Vue.js!',
-      activeItemId: '',
-      sideBar: [{
-          name: "Dashboard",
-          url: "/dashboard",
-          icon: "ti-world",
-          children: [{
-              name: "Buttons",
-              url: "/components/buttons",
-              icon: "fa-book",
-            },
-            {
-              name: "Social Buttons",
-              url: "/components/social-buttons",
-              icon: "icon-puzzle",
-            }
-          ]
-        },
-        {
-          name: "Components",
-          url: "/components",
-          icon: "ti-pencil-alt",
-          children: [{
-              name: "Buttons",
-              url: "/components/buttons",
-              icon: "fa-book",
-            },
-            {
-              name: "Social Buttons",
-              url: "/components/social-buttons",
-              icon: "icon-puzzle",
-            }
-          ]
-        },
-        {
-          name: "Validation",
-          url: "/components",
-          icon: "ti-pencil-alt",
-          children: [{
-              name: "Buttons",
-              url: "/components/buttons",
-              icon: "fa-book",
-            },
-            {
-              name: "Social Buttons",
-              url: "/components/social-buttons",
-              icon: "icon-puzzle",
-            }
-          ]
-        }
-      ]
-    }
-  },
-  computed: {
-    isActive() {
-      return this.activeItemId !== ''
-    }
-  }
-}
-
-</script>
-
-
-<style>
-.collapse.show {
-  display: block;
-}
-
-.collapse {
-  display: none;
-}
-
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-
-.collapse.list-unstyled {
-  padding-left: 15px;
-}
-
-nav.side-navbar {
-  background: #fff;
-  min-width: 250px;
-  max-width: 250px;
-  color: #000;
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-  z-index: 999;
-}
-
-nav.side-navbar ul a:hover {
-  background: orange;
-  color: #fff !important;
-}
-
-nav.side-navbar ul a {
-  padding: 10px 15px;
-  text-decoration: none;
-  display: block;
-  font-weight: 300;
-  border-left: 4px solid transparent;
-}
-
-
-.list-enter {
-  opacity: 0;
-}
-.list-enter-active {
-  animation: slide-in .5s ease-out forwards;
-}
-.list-leave-to, .list-leave-active {
-  opacity: 0;
-  animation: slide-out .5s ease-out forwards;
-}
-@keyframes slide-in {
-  from { height: 0; } to { height: 40px; }
-}
-@keyframes slide-out {
-  from { height: 40px; } to { height: 0; }
-}
-
-</style>
-
-
-

frontend/app/src/main.js

@@ -2,22 +2,21 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import VueSidebarMenu from 'vue-sidebar-menu'
 import router from './router'
 import { store } from './store/store' //importowanie central store;
-import SidenavMenu from '@/components/SidenavMenu'
-import TransitionElement from '@/components/TransitionElement'
 import BootstrapVue from 'bootstrap-vue'
-import BMenu from '@/components/BootstrapMenu'
-
-Vue.component('sidenav-menu', SidenavMenu) // globalnby import menu
-Vue.component('transition-element', TransitionElement) // globalnby import menu
-Vue.component('b-menu', BMenu) // globalnby import menu
-
-
-
-Vue.use(BootstrapVue);
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import MyMenu from '@/components/MyMenu'
+import jQuery from 'jquery'
+global.jQuery = jQuery
+let Bootstrap = require('bootstrap')
+
+Vue.component('my-menu', MyMenu)
+Vue.use(VueSidebarMenu)
+
+Vue.use(BootstrapVue)
 
 Vue.config.productionTip = false