44 lines
1.3 KiB
Vue
44 lines
1.3 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, updateNote } from '@/composables/useNotes'
|
|
|
|
const sideBarCollapsed = ref(false)
|
|
|
|
const viewModes: ViewMode[] = [
|
|
{ name: 'Note', icon: 'fas fa-sticky-note fa-fw' },
|
|
{ name: 'List', icon: 'fas fa-list fa-fw' },
|
|
{ name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
|
|
]
|
|
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 left-0 right-0 top-[50px] flex 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"
|
|
:key="activeNote.id"
|
|
:note="activeNote"
|
|
class="w-full"
|
|
@update="(note) => updateNote(note.id, note)"
|
|
/>
|
|
</main>
|
|
</div>
|
|
</template>
|