primevue-mirror/src/AppMenu.vue

164 lines
8.6 KiB
Vue
Raw Normal View History

<template>
<div :class="['layout-sidebar', {'active': active}]">
2018-12-06 19:23:02 +00:00
<div class="layout-menu">
<a @click="toggleMenu($event, 0)" :class="{'active-menuitem': activeMenuIndex === 0}">
<img alt="input" class="layout-menu-icon-inactive" src="./assets/images/menu/input.svg" />
<img alt="input" class="layout-menu-icon-active" src="./assets/images/menu/input-active.svg" />
<span>Input</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
<div>
2018-12-14 15:35:42 +00:00
<router-link to="/checkbox">&#9679; Checkbox</router-link>
2018-12-24 21:14:06 +00:00
<router-link to="/chips">&#9679; Chips</router-link>
2018-12-26 08:50:28 +00:00
<router-link to="/editor">&#9679; Editor</router-link>
2018-12-16 21:04:39 +00:00
<router-link to="/inputswitch">&#9679; InputSwitch</router-link>
2018-12-06 19:23:02 +00:00
<router-link to="/inputtext">&#9679; InputText</router-link>
2018-12-14 11:21:18 +00:00
<router-link to="/listbox">&#9679; Listbox</router-link>
2018-12-26 19:02:41 +00:00
<router-link to="/password">&#9679; Password</router-link>
2018-12-14 09:41:13 +00:00
<router-link to="/radiobutton">&#9679; RadioButton</router-link>
2018-12-17 19:18:46 +00:00
<router-link to="/rating">&#9679; Rating</router-link>
2018-12-15 13:39:00 +00:00
<router-link to="/selectbutton">&#9679; SelectButton</router-link>
2018-12-25 21:18:37 +00:00
<router-link to="/slider">&#9679; Slider</router-link>
2018-12-25 08:27:10 +00:00
<router-link to="/spinner">&#9679; Spinner</router-link>
2018-12-10 10:56:49 +00:00
<router-link to="/textarea">&#9679; Textarea</router-link>
2018-12-15 11:06:55 +00:00
<router-link to="/togglebutton">&#9679; ToggleButton</router-link>
2018-12-16 20:33:51 +00:00
<router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>
2018-12-06 19:23:02 +00:00
</div>
</div>
<a @click="toggleMenu($event, 1)" :class="{'active-menuitem': activeMenuIndex === 1}">
<img alt="button" class="layout-menu-icon-inactive" src="./assets/images/menu/button.svg" />
<img alt="button" class="layout-menu-icon-active" src="./assets/images/menu/button-active.svg" />
<span>Button</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 1, 'submenushow': activeMenuIndex === 1}">
<div>
<router-link to="/button">&#9679; Button</router-link>
</div>
</div>
2018-12-06 19:33:54 +00:00
<a @click="toggleMenu($event, 2)" :class="{'active-menuitem': activeMenuIndex === 2}">
<img alt="data" class="layout-menu-icon-inactive" src="./assets/images/menu/data.svg" />
<img alt="data" class="layout-menu-icon-active" src="./assets/images/menu/data-active.svg" />
<span>Data</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 3)" :class="{'active-menuitem': activeMenuIndex === 3}">
<img alt="panel" class="layout-menu-icon-inactive" src="./assets/images/menu/panel.svg" />
<img alt="panel" class="layout-menu-icon-active" src="./assets/images/menu/panel-active.svg" />
<span>Panel</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 3, 'submenushow': activeMenuIndex === 3}">
<div>
2018-12-13 20:39:16 +00:00
<router-link to="/accordion">&#9679; Accordion</router-link>
2018-12-16 20:03:20 +00:00
<router-link to="/card">&#9679; Card</router-link>
2018-12-09 19:03:25 +00:00
<router-link to="/panel">&#9679; Panel</router-link>
2018-12-10 08:46:14 +00:00
<router-link to="/fieldset">&#9679; Fieldset</router-link>
2018-12-10 12:16:55 +00:00
<router-link to="/flexgrid">&#9679; FlexGrid</router-link>
2018-12-11 19:37:15 +00:00
<router-link to="/tabview">&#9679; TabView</router-link>
2018-12-10 10:02:09 +00:00
<router-link to="/toolbar">&#9679; Toolbar</router-link>
2018-12-06 19:33:54 +00:00
</div>
</div>
<a @click="toggleMenu($event, 4)" :class="{'active-menuitem': activeMenuIndex === 4}">
<img alt="overlay" class="layout-menu-icon-inactive" src="./assets/images/menu/overlay.svg" />
<img alt="overlay" class="layout-menu-icon-active" src="./assets/images/menu/overlay-active.svg" />
<span>Overlay</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 4, 'submenushow': activeMenuIndex === 4}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 5)" :class="{'active-menuitem': activeMenuIndex === 5}">
<img alt="file" class="layout-menu-icon-inactive" src="./assets/images/menu/file.svg" />
<img alt="file" class="layout-menu-icon-active" src="./assets/images/menu/file-active.svg" />
<span>File</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 5, 'submenushow': activeMenuIndex === 5}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 6)" :class="{'active-menuitem': activeMenuIndex === 6}">
<img alt="menu" class="layout-menu-icon-inactive" src="./assets/images/menu/menu.svg" />
<img alt="menu" class="layout-menu-icon-active" src="./assets/images/menu/menu-active.svg" />
<span>Menu</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 6, 'submenushow': activeMenuIndex === 6}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 7)" :class="{'active-menuitem': activeMenuIndex === 7}">
<img alt="charts" class="layout-menu-icon-inactive" src="./assets/images/menu/charts.svg" />
<img alt="charts" class="layout-menu-icon-active" src="./assets/images/menu/charts-active.svg" />
<span>Chart</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 7, 'submenushow': activeMenuIndex === 7}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 8)" :class="{'active-menuitem': activeMenuIndex === 8}">
<img alt="message" class="layout-menu-icon-inactive" src="./assets/images/menu/message.svg" />
<img alt="message" class="layout-menu-icon-active" src="./assets/images/menu/message-active.svg" />
<span>Messages</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 8, 'submenushow': activeMenuIndex === 8}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
<img alt="dragdrop" class="layout-menu-icon-inactive" src="./assets/images/menu/dragdrop.svg" />
<img alt="dragdrop" class="layout-menu-icon-active" src="./assets/images/menu/dragdrop-active.svg" />
<span>DragDrop</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 9, 'submenushow': activeMenuIndex === 9}">
<div>
<router-link to="/">&#9679; Link</router-link>
</div>
</div>
<a @click="toggleMenu($event, 10)" :class="{'active-menuitem': activeMenuIndex === 10}">
<img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
<img alt="misc" class="layout-menu-icon-active" src="./assets/images/menu/misc-active.svg" />
<span>Misc</span>
</a>
<div :class="{'submenuhide': activeMenuIndex !== 10, 'submenushow': activeMenuIndex === 10}">
<div>
2018-12-26 12:23:43 +00:00
<router-link to="/progressbar">&#9679; ProgressBar</router-link>
2018-12-06 19:33:54 +00:00
</div>
</div>
2018-12-06 19:23:02 +00:00
</div>
</div>
</template>
<script>
export default {
2018-12-26 09:36:00 +00:00
props: {
2018-12-26 12:24:18 +00:00
active: Boolean
2018-12-26 09:36:00 +00:00
},
2018-12-06 19:23:02 +00:00
data() {
return {
activeMenuIndex: null
}
},
methods: {
toggleMenu(event, index) {
2018-12-06 19:33:54 +00:00
this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
2018-12-06 19:23:02 +00:00
}
}
}
</script>