203 lines
12 KiB
Vue
203 lines
12 KiB
Vue
<template>
|
|
<div :class="['layout-sidebar', {'active': active}]">
|
|
<div class="layout-menu">
|
|
<a tabindex="0" @click="toggleMenu($event, 0)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 0">
|
|
<div>
|
|
<router-link to="/autocomplete">● AutoComplete</router-link>
|
|
<router-link to="/calendar">● Calendar</router-link>
|
|
<router-link to="/checkbox">● Checkbox</router-link>
|
|
<router-link to="/chips">● Chips</router-link>
|
|
<router-link to="/dropdown">● Dropdown</router-link>
|
|
<router-link to="/editor">● Editor</router-link>
|
|
<router-link to="/inputgroup">● InputGroup</router-link>
|
|
<router-link to="/inputmask">● InputMask</router-link>
|
|
<router-link to="/inputswitch">● InputSwitch</router-link>
|
|
<router-link to="/inputtext">● InputText</router-link>
|
|
<router-link to="/listbox">● Listbox</router-link>
|
|
<router-link to="/multiselect">● MultiSelect</router-link>
|
|
<router-link to="/password">● Password</router-link>
|
|
<router-link to="/radiobutton">● RadioButton</router-link>
|
|
<router-link to="/rating">● Rating</router-link>
|
|
<router-link to="/selectbutton">● SelectButton</router-link>
|
|
<router-link to="/slider">● Slider</router-link>
|
|
<router-link to="/spinner">● Spinner</router-link>
|
|
<router-link to="/textarea">● Textarea</router-link>
|
|
<router-link to="/togglebutton">● ToggleButton</router-link>
|
|
<router-link to="/tristatecheckbox">● TriCheckbox</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 1)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 1">
|
|
<div>
|
|
<router-link to="/button">● Button</router-link>
|
|
<router-link to="/splitbutton">● SplitButton</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 2)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 2">
|
|
<div>
|
|
<router-link to="/carousel">● Carousel</router-link>
|
|
<router-link to="/datatable">● DataTable</router-link>
|
|
<router-link to="/dataview">● DataView</router-link>
|
|
<router-link to="/fullcalendar">● FullCalendar</router-link>
|
|
<router-link to="/orderlist">● OrderList</router-link>
|
|
<router-link to="/organizationchart">● Org Chart</router-link>
|
|
<router-link to="/paginator">● Paginator</router-link>
|
|
<router-link to="/picklist">● PickList</router-link>
|
|
<router-link to="/tree">● Tree</router-link>
|
|
<router-link to="/treetable">● TreeTable</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 3)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 3">
|
|
<div>
|
|
<router-link to="/accordion">● Accordion</router-link>
|
|
<router-link to="/card">● Card</router-link>
|
|
<router-link to="/deferredcontent">● Deferred</router-link>
|
|
<router-link to="/fieldset">● Fieldset</router-link>
|
|
<router-link to="/flexgrid">● FlexGrid</router-link>
|
|
<router-link to="/panel">● Panel</router-link>
|
|
<router-link to="/tabview">● TabView</router-link>
|
|
<router-link to="/toolbar">● Toolbar</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 4)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 4">
|
|
<div>
|
|
<router-link to="/dialog">● Dialog</router-link>
|
|
<router-link to="/overlaypanel">● OverlayPanel</router-link>
|
|
<router-link to="/sidebar">● Sidebar</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 5)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 5">
|
|
<div>
|
|
<router-link to="/fileupload">● Upload</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 6)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 6">
|
|
<div>
|
|
<router-link to="/menumodel">● MenuModel</router-link>
|
|
<router-link to="/menu">● Menu</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 7)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 7">
|
|
<div>
|
|
<router-link to="/chart">● ChartModel</router-link>
|
|
<router-link to="/chart/pie">● Pie</router-link>
|
|
<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>
|
|
<router-link to="/chart/combo">● Combo</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 8)" @keydown.enter="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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 8">
|
|
<div>
|
|
<router-link to="/message">● Message</router-link>
|
|
<router-link to="/toast">● Toast</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<a tabindex="0" @click="toggleMenu($event, 9)" @keydown.enter="toggleMenu($event, 9)" :class="{'active-menuitem': activeMenuIndex === 9}">
|
|
<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>
|
|
<transition name="layout-submenu-wrapper">
|
|
<div v-show="activeMenuIndex === 9">
|
|
<div>
|
|
<router-link to="/inplace">● Inplace</router-link>
|
|
<router-link to="/progressbar">● ProgressBar</router-link>
|
|
<router-link to="/progressspinner">● ProgressSpinner</router-link>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
active: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
activeMenuIndex: null
|
|
}
|
|
},
|
|
methods: {
|
|
toggleMenu(event, index) {
|
|
this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
|
|
}
|
|
}
|
|
}
|
|
</script> |