vue-code-block/src/documentation/components/MenuComponent.vue at main · webdevnerdstuff/vue-code-block · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
	<v-list
		:color="drawerOptions.color ? 'white' : 'primary'"
		density="compact"
	>
		<template v-for="item in menuItems">
			<v-list-group
				v-if="item.items"
				:key="item.items"
				:value="item.title"
			>
				<template v-slot:activator="{ props }">
					<v-list-item
						density="compact"
						v-bind="props"
						:prepend-icon="item.icon"
						:title="item.title"
					></v-list-item>
				</template>

				<template v-for="subItem in item.items">
					<v-list-item
						v-if="subItem.href"
						:key="subItem.title"
						class="sub-items"
						:href="subItem.href"
						:prepend-icon="subItem.icon"
					>
						<div v-html="subItem.title"></div>
					</v-list-item>
				</template>
			</v-list-group>

			<v-list-item
				v-else
				:key="item.title"
				:class="{
					'v-list-item--active': active === item.href,
				}"
				:color="drawerOptions.color ? 'white' : 'primary'"
				:href="item.href"
				link
				:title="item.title"
			>

				<template v-slot:prepend>
					<v-icon :icon="item.icon"></v-icon>
				</template>
			</v-list-item>
		</template>
	</v-list>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue';
import { useMenuStore } from '@/stores/menu';

const drawerOptions = inject('drawerOptions');
const store = useMenuStore();

const active = ref('');
const menuItems = store.menuItems;

onMounted(() => {
	smoothScroll();

	active.value = window.location.hash || '#home';
});

function smoothScroll() {
	document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
		anchor.addEventListener('click', (e) => {
			e.preventDefault();

			const hash = anchor.hash;
			const id = hash.replace('#', '');
			const yOffset = -55;
			const element = document.getElementById(id);
			const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

			active.value = hash;

			window.location.hash = hash;
			window.scrollTo({ behavior: 'smooth', top: y });
		});
	});
}

</script>

<style lang="scss" scoped>
.sub-items {
	font-size: .9em;
	padding-left: calc(var(--indent-padding) - 10px) !important;

	:deep(.v-icon) {
		font-size: 1em !important;
		margin-right: 1em !important;
	}
}

:deep(.v-list-group__items) {
	.v-list-item__spacer {
		display: none;
	}
}
</style>