35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { activeNote, updateNote } from '@/composables/useNotes'
|
|
import { viewModes, activeViewMode } from '@/composables/useViewMode'
|
|
const sideBarCollapsed = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<TopBar
|
|
:side-bar-collapsed="sideBarCollapsed"
|
|
@toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
|
|
/>
|
|
<div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
|
|
<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] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
|
|
:class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
|
|
>
|
|
<Note
|
|
v-if="activeViewMode.name === 'Note' && activeNote"
|
|
:key="activeNote.id"
|
|
:note="activeNote"
|
|
class=""
|
|
@update="(note) => updateNote(note.id, note)"
|
|
/>
|
|
<ListView v-else-if="activeViewMode.name === 'List'" />
|
|
<Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
|
|
</main>
|
|
</div>
|
|
</template>
|