105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<div class="vcd-right-nav">
|
|
|
|
<div class="vcd-function-panel">
|
|
<TreeView :topModules="props.topModules"
|
|
v-show="controlPanel.currentIndex === 0"></TreeView>
|
|
<Setting
|
|
v-show="controlPanel.currentIndex === 1"></Setting>
|
|
<About
|
|
v-show="controlPanel.currentIndex === 2"></About>
|
|
</div>
|
|
|
|
<div class="vcd-function-option">
|
|
<div class="vcd-control-panel-wrapper">
|
|
<div class="vcd-control-panel-icon digital-ide-icon" />
|
|
</div>
|
|
<hr>
|
|
<div class="vcd-control-panel-wrapper"
|
|
v-for="(section, index) of controlPanel.sections" :key="index"
|
|
@click="controlPanel.click(index)"
|
|
>
|
|
<div :class="controlPanel.currentIndex === index ? 'vcd-control-panel-active': ''"><span
|
|
class="vcd-control-panel-icon"
|
|
:class="section.iconClass"
|
|
></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineComponent, reactive } from 'vue';
|
|
|
|
import TreeView from '@/components/treeview';
|
|
import Setting from '@/components/setting';
|
|
import About from '@/components/about';
|
|
import { emitter } from '@/hook/global';
|
|
import { controlPanel } from './right-nav';
|
|
|
|
defineComponent({ name: 'right-nav' });
|
|
const props = defineProps({
|
|
topModules: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
|
|
emitter.on('right-nav', index => {
|
|
if (controlPanel.currentIndex === index) {
|
|
controlPanel.currentIndex = -1;
|
|
} else {
|
|
controlPanel.currentIndex = index;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.vcd-right-nav {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 60;
|
|
}
|
|
|
|
.vcd-function-panel {
|
|
display: flex;
|
|
background-color: var(--sidebar);
|
|
height: 100vh;
|
|
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
|
|
}
|
|
|
|
.vcd-function-option {
|
|
width: fit-content;
|
|
height: 100vh;
|
|
background-color: var(--sidebar);
|
|
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
|
|
}
|
|
|
|
.vcd-control-panel-wrapper {
|
|
width: var(--right-nav-width);
|
|
height: var(--right-nav-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.vcd-control-panel-wrapper:hover {
|
|
color: var(--vscode-icon-foreground);
|
|
}
|
|
|
|
.vcd-control-panel-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 35px;
|
|
}
|
|
|
|
.vcd-control-panel-active {
|
|
color: var(--main-color);
|
|
}
|
|
</style> |