Update docs

Author: webdevnerdstuff

src/documentation/components/MenuComponent.vue

@@ -93,9 +93,15 @@ function smoothScroll() {
 	font-size: .9em;
 	padding-left: calc(var(--indent-padding) - 10px) !important;
 
+	:deep(.v-list-item__spacer) {
+		display: none;
+	}
+
 	:deep(.v-icon) {
 		font-size: 1em !important;
 		margin-right: 1em !important;
 	}
 }
+
+// .v-list-group__items {}
 </style>

src/documentation/components/examples/ExampleContainer.vue

@@ -1,9 +1,13 @@
 <template>
 	<v-col
 		v-if="code.name"
+		:id="`${getHrefId}`"
 		class="v-col-12 offset-lg-2 offset-xl-1 v-col-sm-12 v-col-lg-8 v-col-xl-10 mb-0 pb-0"
 	>
-		<h3 class="text-info mb-1">{{ code.name }}</h3>
+		<h3 class="text-info mb-1"><a
+				class="text-info"
+				:href="`#${getHrefId}`"
+			>{{ code.name }}</a></h3>
 	</v-col>
 
 	<v-col
@@ -130,6 +134,12 @@ function showCodeBlocks() {
 	emit('closePicker', showCode.value);
 }
 
+const getHrefId = computed(() => {
+	const id = props.code.name?.toLowerCase().replace(/\s+/g, '-');
+
+	return `examples-${id}`;
+})
+
 </script>
 
 <style lang="scss">

src/documentation/components/examples/TF/OffsetExample.vue

@@ -35,6 +35,7 @@ const scriptCode = `\<script setup\>
 defineExpose({
 	exampleCode: {
 		desc: 'Using the <code class="ic">card-offset-x</code> & <code class="ic">card-offset-y</code> prop to offset the color picker card.',
+		name: 'Card Offset Props',
 		script: scriptCode,
 		template: templateCode,
 	}

src/documentation/sections/ExampleSection.vue

@@ -61,8 +61,14 @@
 		</ExampleContainer>
 
 		<!-- ================================================== Pip Examples -->
-		<v-col :class="h2Classes">
-			<h2 class="text-secondary">Pip Examples</h2>
+		<v-col
+			id="examples-pips"
+			:class="h2Classes"
+		>
+			<h2><a
+					class="text-secondary"
+					href="#examples-pips"
+				>Pip Examples</a></h2>
 		</v-col>
 
 		<ExampleContainer

src/stores/menu.ts

@@ -79,6 +79,43 @@ export const useMenuStore = defineStore('menu', () => {
 		{
 			href: '#examples',
 			icon: 'mdi:mdi-code-json',
+			items: [
+				{
+					href: '#examples',
+					icon: 'mdi:mdi-code-json',
+					title: 'Basic',
+				},
+				{
+					href: '#examples-icon-hover-color-prop',
+					icon: 'mdi:mdi-code-json',
+					title: 'Icon Hover Color Prop',
+				},
+				{
+					href: '#examples-readonly-input-prop',
+					icon: 'mdi:mdi-code-json',
+					title: 'Readonly Input Prop',
+				},
+				{
+					href: '#examples-readonly-prop',
+					icon: 'mdi:mdi-code-json',
+					title: 'Readonly Prop',
+				},
+				{
+					href: '#examples-icon-props',
+					icon: 'mdi:mdi-code-json',
+					title: 'Icon Props',
+				},
+				{
+					href: '#examples-card-offset-props',
+					icon: 'mdi:mdi-code-json',
+					title: 'Card Offset Props',
+				},
+				{
+					href: '#examples-pips',
+					icon: 'mdi:mdi-circle',
+					title: 'Pips',
+				},
+			],
 			title: 'Examples',
 		},
 		{