38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import TopBar from '@/components/TopBar.vue'
|
|
import SideBar from '@/components/SideBar.vue'
|
|
import Note from '@/components/Note.vue'
|
|
import { activeNote } from '@/composables/useNotes'
|
|
|
|
const sideBarCollapsed = ref(false)
|
|
|
|
const viewModes: ViewMode[] = [
|
|
{ name: 'Note', icon: 'card-text' },
|
|
{ name: 'List', icon: 'list-task' },
|
|
{ name: 'Mindmap', icon: 'diagram-3' },
|
|
]
|
|
const activeViewMode = ref(viewModes[0])
|
|
</script>
|
|
|
|
<template>
|
|
<TopBar
|
|
:side-bar-collapsed="sideBarCollapsed"
|
|
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
|
|
/>
|
|
<div class="relative mx-auto flex h-full max-w-app">
|
|
<SideBar
|
|
:view-modes="viewModes"
|
|
:active-view-mode="activeViewMode"
|
|
@set-view-mode="(viewMode) => (activeViewMode = viewMode)"
|
|
class="mt-[50px] px-3 py-6"
|
|
/>
|
|
<main
|
|
class="transition[margin-left] absolute bottom-0 right-0 top-[50px] flex-1 overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
|
|
:class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
|
|
>
|
|
<Note v-if="activeNote" :note="activeNote" />
|
|
</main>
|
|
</div>
|
|
</template>
|