app.vue

<template>
  <div class="d-flex min-vh-100">
    <!-- 左側側邊欄 -->
    <aside class="bg-dark text-white p-3" style="min-width: 200px; width: 200px;">
      <h4 class="text-center mb-4">功能選單</h4>
      <button
        class="btn w-100 mb-2"
        :class="currentView === 'kanban' ? 'btn-light' : 'btn-outline-light'"
        @click="currentView = 'kanban'"
      >
        看板工作區
      </button>
      <button
        class="btn w-100"
        :class="currentView === 'notes' ? 'btn-light' : 'btn-outline-light'"
        @click="currentView = 'notes'"
      >
        筆記工作區
      </button>
    </aside>

    <!-- 右側主內容 -->
    <main class="flex-grow-1 p-4 bg-light overflow-auto">
      <KanbanView v-if="currentView === 'kanban'" />
      <NoteView v-else />
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import KanbanView from './components/KanbanView.vue'
import NoteView from './components/NoteView.vue'

const currentView = ref('kanban')
</script>

<style scoped>
body {
  margin: 0;
}
</style>