belka jako menu
This commit is contained in:
pawlaczyk
parent
616778cac8
commit
d5bb82470e
18
frontend/app/package-lock.json
generated
18
frontend/app/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
39
frontend/app/src/components/MyMenu.vue
Normal file
39
frontend/app/src/components/MyMenu.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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 { store } from './store/store' //importowanie central store;
|
||||
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user