mirror of
https://github.com/fawney19/Aether.git
synced 2026-01-05 17:22:28 +08:00
56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="app-shell" :class="{ 'pt-24': showNotice }">
|
||
|
|
<div
|
||
|
|
v-if="showNotice"
|
||
|
|
class="fixed top-6 left-0 right-0 z-50 flex justify-center px-4"
|
||
|
|
>
|
||
|
|
<slot name="notice" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="app-shell__backdrop">
|
||
|
|
<div class="app-shell__gradient app-shell__gradient--primary"></div>
|
||
|
|
<div class="app-shell__gradient app-shell__gradient--accent"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="app-shell__body">
|
||
|
|
<aside
|
||
|
|
v-if="$slots.sidebar"
|
||
|
|
class="app-shell__sidebar"
|
||
|
|
:class="sidebarClass"
|
||
|
|
>
|
||
|
|
<slot name="sidebar" />
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<div class="app-shell__content" :class="contentClass">
|
||
|
|
<slot name="header" />
|
||
|
|
<main :class="mainClass">
|
||
|
|
<slot />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<{
|
||
|
|
showNotice?: boolean
|
||
|
|
contentClass?: string
|
||
|
|
mainClass?: string
|
||
|
|
sidebarClass?: string
|
||
|
|
}>(), {
|
||
|
|
showNotice: false,
|
||
|
|
contentClass: '',
|
||
|
|
mainClass: '',
|
||
|
|
sidebarClass: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
const showNotice = computed(() => props.showNotice)
|
||
|
|
|
||
|
|
// contentClass and mainClass are now just the props, base classes are in template
|
||
|
|
const contentClass = computed(() => props.contentClass)
|
||
|
|
const mainClass = computed(() => ['app-shell__main', props.mainClass].filter(Boolean).join(' '))
|
||
|
|
const sidebarClass = computed(() => props.sidebarClass)
|
||
|
|
</script>
|