vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Animated menu

pull/345/head
cagataycivici 2020-05-13 16:59:23 +03:00
parent 70d345325c
commit 78b3cb16f4
2 changed files with 71 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/AppMenu.vue
View File

@ -63,6 +63,8 @@
<router-link to="/datatable" v-slot="{href,route,navigate,isActive,isExactActive}"> <router-link to="/datatable" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">DataTable</a> <a :href="href" @click="navigate">DataTable</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isActive">
<ul> <ul>
<li><router-link to="/datatable/basic">Basic</router-link></li> <li><router-link to="/datatable/basic">Basic</router-link></li>
<li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li> <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
@ -89,6 +91,8 @@
<li><router-link to="/datatable/crud">Crud</router-link></li> <li><router-link to="/datatable/crud">Crud</router-link></li>
</ul> </ul>
</div> </div>
</transition>
</div>
</router-link> </router-link>
<router-link to="/dataview">DataView</router-link> <router-link to="/dataview">DataView</router-link>
@ -100,6 +104,8 @@
<router-link to="/tree" v-slot="{href,route,navigate,isActive,isExactActive}"> <router-link to="/tree" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">Tree</a> <a :href="href" @click="navigate">Tree</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isActive">
<ul> <ul>
<li><router-link to="/tree/selection">Selection</router-link></li> <li><router-link to="/tree/selection">Selection</router-link></li>
<li><router-link to="/tree/lazy">Lazy</router-link></li> <li><router-link to="/tree/lazy">Lazy</router-link></li>
@ -107,10 +113,14 @@
<li><router-link to="/tree/filter">Filter</router-link></li> <li><router-link to="/tree/filter">Filter</router-link></li>
</ul> </ul>
</div> </div>
</transition>
</div>
</router-link> </router-link>
<router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}"> <router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">TreeTable</a> <a :href="href" @click="navigate">TreeTable</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isActive">
<ul> <ul>
<li><router-link to="/treetable/templating">Templating</router-link></li> <li><router-link to="/treetable/templating">Templating</router-link></li>
<li><router-link to="/treetable/size">Size</router-link></li> <li><router-link to="/treetable/size">Size</router-link></li>
@ -124,6 +134,8 @@
<li><router-link to="/treetable/responsive">Responsive</router-link></li> <li><router-link to="/treetable/responsive">Responsive</router-link></li>
</ul> </ul>
</div> </div>
</transition>
</div>
</router-link> </router-link>
</div> </div>
@ -209,6 +221,8 @@
<router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}"> <router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">Galleria</a> <a :href="href" @click="navigate">Galleria</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isActive">
<ul> <ul>
<li><router-link to="/galleria">Documentation</router-link></li> <li><router-link to="/galleria">Documentation</router-link></li>
<li><router-link to="/galleria/basic">Basic</router-link></li> <li><router-link to="/galleria/basic">Basic</router-link></li>
@ -221,6 +235,8 @@
<li><router-link to="/galleria/caption">Caption</router-link></li> <li><router-link to="/galleria/caption">Caption</router-link></li>
</ul> </ul>
</div> </div>
</transition>
</div>
</router-link> </router-link>
</div> </div>

2
src/assets/styles/app/_menu.scss
View File

@ -7,6 +7,7 @@
overflow: auto; overflow: auto;
width: 250px; width: 250px;
border-right: 1px solid var(--layer-2); border-right: 1px solid var(--layer-2);
user-select: none;
.layout-menu { .layout-menu {
> span { > span {
@ -69,7 +70,6 @@
} }
ul { ul {
display: none;
padding: .5rem 0; padding: .5rem 0;
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;