46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { rootNote } 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"
|
|
>
|
|
<SideBarMenu>
|
|
<template #header>Root note</template>
|
|
<template #items>
|
|
<SideBarMenuItem icon="house">{{ 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>Recent notes</template>
|
|
<template #items>
|
|
<SideBarMenuItem>{{ rootNote?.title }}</SideBarMenuItem>
|
|
</template>
|
|
</SideBarMenu>
|
|
</div>
|
|
</template>
|