61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { rootNote, notes, activeNote } from '@/composables/useNotes'
|
|
|
|
const props = defineProps<{
|
|
viewModes: ViewMode[]
|
|
activeViewMode: ViewMode
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
setViewMode: [viewMode: ViewMode]
|
|
}>()
|
|
</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"
|
|
:title="rootNote?.title"
|
|
>
|
|
{{ 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"
|
|
:title="rootNote?.title"
|
|
>
|
|
{{ note.title }}
|
|
</SideBarMenuItem>
|
|
</template>
|
|
</SideBarMenu>
|
|
</div>
|
|
</template>
|