41 lines
1.8 KiB
Vue
41 lines
1.8 KiB
Vue
<template>
|
|
<div class="flex h-full w-full relative">
|
|
<div class="w-2/12 flex flex-col relative">
|
|
<!-- Settings Categories -->
|
|
<div class="relative p-2.5">
|
|
<h3>Settings</h3>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
</div>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
|
|
<span>Character</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
|
|
<span>Account</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
|
|
<span>Audio</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
</a>
|
|
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
|
|
<span>Video</span>
|
|
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
|
</a>
|
|
</div>
|
|
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
|
|
|
|
<!-- Assets list -->
|
|
<div class="overflow-auto h-full w-10/12 flex flex-col relative">
|
|
<CharacterSettings v-show="settingCategory == 'character'" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import CharacterSettings from '@/components/gui/partials/settings/CharacterSettings.vue'
|
|
|
|
let settingCategory = ref('character')
|
|
</script>
|