Nuxt 대시보드 프로젝트 시리즈 (4): 대시보드 레이아웃 구현

<template>
  <n-layout has-sider h-screen>
    <!-- 사이드바 -->
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      :collapsed="appStore.isSidebarCollapsed"
      show-trigger
      @collapse="appStore.toggleSidebar"
      @expand="appStore.toggleSidebar"
    >
      <div class="h-16 flex-center font-bold text-lg overflow-hidden whitespace-nowrap">
        {{ appStore.isSidebarCollapsed ? 'D' : 'Dashboard' }}
      </div>
      <n-menu :options="menuOptions" />
    </n-layout-sider>
 
    <n-layout>
      <!-- 헤더 -->
      <n-layout-header bordered class="h-16 flex items-center justify-between px-6">
        <div class="i-carbon-menu text-xl cursor-pointer" @click="appStore.toggleSidebar" />
        <div class="flex items-center gap-4">
          <span>{{ authStore.user.name }}</span>
          <n-avatar round :src="authStore.user.avatar" />
        </div>
      </n-layout-header>
 
      <!-- 콘텐츠 영역 -->
      <n-layout-content content-style="padding: 24px;" class="bg-gray-50/50">
        <slot />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>
 
<script setup>
import { useAppStore } from '@/stores/app'
import { useAuthStore } from '@/stores/auth'
 
const appStore = useAppStore()
const authStore = useAuthStore()
 
const menuOptions = [
  { label: '홈', key: 'home', icon: () => h('div', { class: 'i-carbon-home' }) },
  { label: '통계', key: 'stats', icon: () => h('div', { class: 'i-carbon-chart-line' }) },
  { label: '설정', key: 'settings', icon: () => h('div', { class: 'i-carbon-settings' }) },
]
</script>