2018-12-06 18:45:40 +00:00
|
|
|
<template>
|
2018-12-26 09:39:12 +00:00
|
|
|
<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">● Checkbox</router-link>
|
2018-12-24 21:14:06 +00:00
|
|
|
<router-link to="/chips">● Chips</router-link>
|
2018-12-28 12:03:07 +00:00
|
|
|
<router-link to="/dropdown">● Dropdown</router-link>
|
2018-12-26 08:50:28 +00:00
|
|
|
<router-link to="/editor">● Editor</router-link>
|
2018-12-16 21:04:39 +00:00
|
|
|
<router-link to="/inputswitch">● InputSwitch</router-link>
|
2018-12-06 19:23:02 +00:00
|
|
|
<router-link to="/inputtext">● InputText</router-link>
|
2018-12-14 11:21:18 +00:00
|
|
|
<router-link to="/listbox">● Listbox</router-link>
|
2018-12-30 10:36:20 +00:00
|
|
|
<router-link to="/multiselect">● MultiSelect</router-link>
|
2018-12-26 19:02:41 +00:00
|
|
|
<router-link to="/password">● Password</router-link>
|
2018-12-14 09:41:13 +00:00
|
|
|
<router-link to="/radiobutton">● RadioButton</router-link>
|
2018-12-17 19:18:46 +00:00
|
|
|
<router-link to="/rating">● Rating</router-link>
|
2018-12-15 13:39:00 +00:00
|
|
|
<router-link to="/selectbutton">● SelectButton</router-link>
|
2018-12-25 21:18:37 +00:00
|
|
|
<router-link to="/slider">● Slider</router-link>
|
2018-12-25 08:27:10 +00:00
|
|
|
<router-link to="/spinner">● Spinner</router-link>
|
2018-12-10 10:56:49 +00:00
|
|
|
<router-link to="/textarea">● Textarea</router-link>
|
2018-12-15 11:06:55 +00:00
|
|
|
<router-link to="/togglebutton">● ToggleButton</router-link>
|
2018-12-16 20:33:51 +00:00
|
|
|
<router-link to="/tristatecheckbox">● 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">● 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>
|
2018-12-31 15:41:35 +00:00
|
|
|
<router-link to="/fullcalendar">● FullCalendar</router-link>
|
2018-12-06 19:33:54 +00:00
|
|
|
</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">● Accordion</router-link>
|
2018-12-16 20:03:20 +00:00
|
|
|
<router-link to="/card">● Card</router-link>
|
2018-12-09 19:03:25 +00:00
|
|
|
<router-link to="/panel">● Panel</router-link>
|
2018-12-10 08:46:14 +00:00
|
|
|
<router-link to="/fieldset">● Fieldset</router-link>
|
2018-12-10 12:16:55 +00:00
|
|
|
<router-link to="/flexgrid">● FlexGrid</router-link>
|
2018-12-11 19:37:15 +00:00
|
|
|
<router-link to="/tabview">● TabView</router-link>
|
2018-12-10 10:02:09 +00:00
|
|
|
<router-link to="/toolbar">● 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="/">● 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="/">● 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="/">● 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>
|
2019-01-01 18:53:12 +00:00
|
|
|
<router-link to="/chart">● ChartModel</router-link>
|
|
|
|
<router-link to="/chart/pie">● Pie</router-link>
|
2019-01-01 19:36:31 +00:00
|
|
|
<router-link to="/chart/doughnut">● Doughnut</router-link>
|
|
|
|
<router-link to="/chart/bar">● Bar</router-link>
|
|
|
|
<router-link to="/chart/line">● Line</router-link>
|
|
|
|
<router-link to="/chart/polararea">● PolarArea</router-link>
|
|
|
|
<router-link to="/chart/radar">● Radar</router-link>
|
2019-01-01 19:01:01 +00:00
|
|
|
<router-link to="/chart/combo">● Combo</router-link>
|
2018-12-06 19:33:54 +00:00
|
|
|
</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="/">● 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="/">● 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">● ProgressBar</router-link>
|
2018-12-06 19:33:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-12-06 19:23:02 +00:00
|
|
|
</div>
|
2018-12-06 18:45:40 +00:00
|
|
|
</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
|
|
|
}
|
|
|
|
}
|
2018-12-06 18:45:40 +00:00
|
|
|
}
|
|
|
|
</script>
|