mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-10 21:05:59 -06:00
80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<template>
|
|
<div class="sidebar-group" :class="{ first, collapsable }">
|
|
<p class="sidebar-heading" :class="{ open }" @click="$emit('toggle')">
|
|
<span>{{ item.title }}</span>
|
|
<span class="arrow" v-if="collapsable" :class="open ? 'down' : 'right'"></span>
|
|
<VersionSelect
|
|
class="float-right"
|
|
v-if="isVersioned"
|
|
:versions="item.versions"
|
|
v-model="versionSelect"
|
|
/>
|
|
</p>
|
|
<DropdownTransition>
|
|
<ul class="sidebar-group-items" ref="items" v-if="open || !collapsable">
|
|
<li v-for="child in children">
|
|
<SidebarLink :item="child" />
|
|
</li>
|
|
</ul>
|
|
</DropdownTransition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SidebarLink from "./SidebarLink.vue";
|
|
import DropdownTransition from "./DropdownTransition.vue";
|
|
import VersionSelect from "./VersionSelect.vue";
|
|
|
|
export default {
|
|
name: "SidebarGroup",
|
|
props: ["item", "first", "open", "collapsable"],
|
|
components: { SidebarLink, DropdownTransition, VersionSelect },
|
|
data: function() {
|
|
let isVersioned = this.item.versions.length > 0;
|
|
return {
|
|
isVersioned,
|
|
versionSelect: isVersioned ? getSelectedVersion(this.item) : ""
|
|
};
|
|
},
|
|
watch: {
|
|
versionSelect(newVersion, oldVersion) {
|
|
if (
|
|
oldVersion !== newVersion &&
|
|
this.$router.currentRoute.path.startsWith(this.item.path) &&
|
|
this.selectedVersion.children.length > 0
|
|
) {
|
|
this.$router.push(this.selectedVersion.children[0]);
|
|
}
|
|
},
|
|
$route(to, from) {
|
|
if (this.isVersioned && to.path.startsWith(this.item.path)) {
|
|
const pathVersion = to.path.split("/")[2];
|
|
if (~this.item.versions.map(v => v.name).indexOf(pathVersion)) {
|
|
this.versionSelect = pathVersion;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
selectedVersion: function() {
|
|
return this.item.versions.find(v => v.name == this.versionSelect);
|
|
},
|
|
children: function() {
|
|
return this.isVersioned
|
|
? this.selectedVersion.children
|
|
: this.item.children;
|
|
}
|
|
}
|
|
};
|
|
|
|
function getSelectedVersion(item) {
|
|
if (window.location.pathname.startsWith(item.path)) {
|
|
const pathVersion = window.location.pathname.split("/")[2];
|
|
return ~item.versions.map(v => v.name).indexOf(pathVersion)
|
|
? pathVersion
|
|
: item.currentVersion;
|
|
}
|
|
return item.currentVersion;
|
|
}
|
|
</script>
|