57 lines
1.6 KiB
Vue
57 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { rootNote, notes, activeNote } from '@/composables/useNotes'
|
|
import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
|
|
import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
|
|
|
|
const props = defineProps<{
|
|
viewModes: ViewMode[]
|
|
activeViewMode: ViewMode
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'setViewMode', viewMode: ViewMode): void
|
|
}>()
|
|
</script>
|
|
<template>
|
|
<div
|
|
id="sidebar"
|
|
class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
|
|
>
|
|
<SideBarMenu>
|
|
<template #header>Root note</template>
|
|
<template #items>
|
|
<SideBarMenuItem
|
|
icon="fas fa-fw fa-home"
|
|
@click="activeNote = rootNote"
|
|
>{{ rootNote?.title }}</SideBarMenuItem
|
|
>
|
|
</template>
|
|
</SideBarMenu>
|
|
<SideBarMenu>
|
|
<template #header>View mode</template>
|
|
<template #items>
|
|
<SideBarMenuItem
|
|
v-for="viewMode in props.viewModes"
|
|
:icon="viewMode.icon"
|
|
:active="viewMode.name === activeViewMode.name"
|
|
@click="emit('setViewMode', viewMode)"
|
|
>{{ viewMode.name }}</SideBarMenuItem
|
|
>
|
|
</template>
|
|
</SideBarMenu>
|
|
<SideBarMenu>
|
|
<template #header
|
|
><i class="far fa-clock fa-fw mr-2" />Recent notes</template
|
|
>
|
|
<template #items>
|
|
<SideBarMenuItem
|
|
v-for="note in notes"
|
|
icon="far fa-file-alt fa-fw"
|
|
@click="activeNote = note"
|
|
>{{ note.title }}</SideBarMenuItem
|
|
>
|
|
</template>
|
|
</SideBarMenu>
|
|
</div>
|
|
</template>
|