102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<template>
|
|
<div class="site">
|
|
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a>
|
|
<!-- Desktop Sidebar -->
|
|
<AppNavigation class="sidebar-desktop" />
|
|
|
|
<!-- Mobile Header -->
|
|
<div class="mobile-header">
|
|
<NuxtLink to="/" class="brand">Ghost Guild</NuxtLink>
|
|
<button class="btn" @click="isMobileMenuOpen = true">Menu</button>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="main">
|
|
<TopStrip :page-path="currentPageName" />
|
|
<div class="main-body">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Mobile Drawer -->
|
|
<USlideover v-model:open="isMobileMenuOpen" side="left">
|
|
<template #body>
|
|
<AppNavigation :is-mobile="true" @navigate="isMobileMenuOpen = false" />
|
|
</template>
|
|
</USlideover>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const isMobileMenuOpen = ref(false)
|
|
const route = useRoute()
|
|
|
|
const currentPageName = computed(() => {
|
|
const path = route.path
|
|
if (path === '/') return ''
|
|
// Convert /member/dashboard → member / dashboard
|
|
return path.slice(1).replace(/\//g, ' / ')
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.site {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
margin-left: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.main-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.sidebar-desktop {
|
|
display: block;
|
|
}
|
|
|
|
.mobile-header {
|
|
display: none;
|
|
}
|
|
|
|
.brand {
|
|
font-family: 'Brygada 1918', serif;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--candle);
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar-desktop {
|
|
display: none;
|
|
}
|
|
.mobile-header {
|
|
display: flex;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px dashed var(--border);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--bg);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
}
|
|
.main {
|
|
margin-left: 0;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
</style>
|