71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-paper text-ink">
|
|
<aside
|
|
v-if="showNav"
|
|
class="fixed inset-y-0 left-0 z-20 hidden w-64 border-r border-line bg-white md:block"
|
|
>
|
|
<div class="flex h-16 items-center gap-3 border-b border-line px-5">
|
|
<div class="flex h-9 w-9 items-center justify-center rounded-md bg-red-500 text-lg font-bold text-white">M</div>
|
|
<strong>Money 가계부</strong>
|
|
</div>
|
|
<nav class="px-3 py-5">
|
|
<NuxtLink
|
|
v-for="item in items"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="mb-2 flex min-h-12 items-center gap-3 rounded-md px-4 text-sm font-semibold text-muted"
|
|
active-class="bg-red-50 text-red-600"
|
|
>
|
|
<span class="text-lg leading-none">{{ item.icon }}</span>
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="min-h-screen w-full bg-white pb-24 md:ml-64 md:bg-paper md:pb-0">
|
|
<div class="mx-auto min-h-screen w-full md:max-w-7xl md:bg-transparent">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
<nav
|
|
v-if="showNav"
|
|
class="fixed inset-x-0 bottom-0 z-20 border-t border-line bg-white/95 backdrop-blur md:hidden"
|
|
>
|
|
<div class="mx-auto grid max-w-lg grid-cols-4">
|
|
<NuxtLink
|
|
v-for="item in items"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="flex min-h-16 flex-col items-center justify-center gap-1 text-xs font-medium text-muted"
|
|
active-class="text-brand-700"
|
|
>
|
|
<span class="text-xl leading-none">{{ item.icon }}</span>
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
<NuxtLink
|
|
v-if="showFab"
|
|
to="/add"
|
|
class="fixed bottom-24 right-4 z-30 flex h-16 w-16 items-center justify-center rounded-full bg-red-500 text-4xl leading-none text-white shadow-soft active:scale-95 md:bottom-10 md:right-10"
|
|
aria-label="거래 추가"
|
|
>
|
|
+
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute()
|
|
|
|
const items = [
|
|
{ to: '/', label: '내역', icon: '≡' },
|
|
{ to: '/stats', label: '통계', icon: '∑' },
|
|
{ to: '/assets', label: '자산', icon: '◎' },
|
|
{ to: '/settings', label: '설정', icon: '⚙' }
|
|
]
|
|
|
|
const showNav = computed(() => route.path !== '/login')
|
|
const showFab = computed(() => showNav.value && route.path !== '/add' && !route.path.startsWith('/transactions/'))
|
|
</script>
|