85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { rootNote, notes, setActiveNote as baseSetActiveNote } from '@/composables/useNotes'
|
|
import { windowIsMobile } from '@/utils/helpers'
|
|
import { initialized } from '@/composables/useFirebase'
|
|
import { activeViewMode } from '@/composables/useViewMode';
|
|
|
|
const props = defineProps<{
|
|
viewModes: ViewMode[]
|
|
activeViewMode: ViewMode
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
setViewMode: [viewMode: ViewMode]
|
|
collapse: [collapse: boolean]
|
|
}>()
|
|
|
|
const setActiveNote = (noteId: string | undefined) => {
|
|
emit('collapse', windowIsMobile())
|
|
baseSetActiveNote(noteId)
|
|
}
|
|
|
|
const setViewMode = (viewMode: ViewMode) => {
|
|
emit('collapse', windowIsMobile())
|
|
emit('setViewMode', viewMode)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div
|
|
id="sidebar"
|
|
class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-full max-sm:text-[120%]"
|
|
>
|
|
<SideBarMenu>
|
|
<template #header>Root note</template>
|
|
<template #items>
|
|
<SideBarMenuItem
|
|
icon="fas fa-fw fa-home"
|
|
@click="setActiveNote(rootNote?.id)"
|
|
:title="rootNote?.title"
|
|
v-if="initialized"
|
|
>
|
|
{{ rootNote?.title }}
|
|
</SideBarMenuItem>
|
|
<SkeletonSidebarItem v-else />
|
|
</template>
|
|
</SideBarMenu>
|
|
<SideBarMenu>
|
|
<template #header>View mode</template>
|
|
<template #items>
|
|
<template v-if="initialized">
|
|
<SideBarMenuItem
|
|
v-for="viewMode in props.viewModes"
|
|
:key="viewMode.name"
|
|
:icon="viewMode.icon"
|
|
:active="viewMode.name === activeViewMode.name"
|
|
@click="setViewMode(viewMode)"
|
|
>
|
|
{{ viewMode.name }}
|
|
</SideBarMenuItem>
|
|
</template>
|
|
<SkeletonSidebarItem :n="3" v-else />
|
|
</template>
|
|
</SideBarMenu>
|
|
<SideBarMenu>
|
|
<template #header>
|
|
<i class="far fa-clock fa-fw mr-2" />
|
|
Recent notes
|
|
</template>
|
|
<template #items>
|
|
<template v-if="initialized">
|
|
<SideBarMenuItem
|
|
v-for="note in notes.slice(-10)"
|
|
:key="note.id"
|
|
icon="far fa-file-alt fa-fw"
|
|
@click="setActiveNote(note.id)"
|
|
:title="rootNote?.title"
|
|
>
|
|
{{ note.title }}
|
|
</SideBarMenuItem>
|
|
</template>
|
|
<SkeletonSidebarItem v-else :n="5" />
|
|
</template>
|
|
</SideBarMenu>
|
|
</div>
|
|
</template>
|