Updating docs

Author: webdevnerdstuff

src/App.vue

@@ -1,7 +1,10 @@
 <template>
 	<v-app id="home">
 		<!-- ====================================================== App Bar -->
-		<AppBar @updated-drawer="toggleDrawer" />
+		<AppBar
+			@changed-theme="updateCodeBlockTheme"
+			@updated-drawer="toggleDrawer"
+		/>
 
 		<!-- ====================================================== Navigation Drawer -->
 		<v-navigation-drawer
@@ -14,174 +17,57 @@
 		</v-navigation-drawer>
 
 		<!-- ====================================================== Main Container -->
-		<v-main class="main-container pb-10">
-			<v-responsive>
-				<v-container class="px-10">
-					<DocsPage />
-				</v-container>
-			</v-responsive>
+		<v-main class="pb-10">
+			<v-container class="px-7">
+				<DocsPage :codeBlockOptions="codeBlockSettings" />
+			</v-container>
 		</v-main>
 	</v-app>
 </template>
 
 <script setup>
 import { provide, ref } from 'vue';
+import { useDisplay } from 'vuetify';
 import AppBar from './documentation/layout/AppBar.vue';
 import MenuComponent from './documentation/components/MenuComponent.vue';
 import DocsPage from './documentation/DocsPage.vue';
 import { useCoreStore } from './stores/index';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
 
-const store = useCoreStore();
 
-const drawer = ref(true);
+const { smAndUp } = useDisplay();
+
+const isSmAndUp = computed(() => smAndUp.value);
+const store = useCoreStore();
+const drawer = ref(isSmAndUp.value);
 const drawerOptions = ref({
 	absolute: false,
 	color: '',
 	elevation: 10,
 });
-const links = store.links;
-
-const menuItems = reactive([
-	{
-		href: '#home',
-		icon: 'mdi:mdi-home',
-		title: 'Home',
-	},
-	{
-		href: '#installation',
-		icon: 'mdi:mdi-plus-thick',
-		title: 'Installation',
-	},
-	{
-		href: '#description',
-		icon: 'mdi:mdi-information-outline',
-		title: 'Description',
-	},
-	{
-		href: '#props',
-		icon: 'mdi:mdi-cog',
-		items: [
-			{
-				href: '#props',
-				icon: 'mdi:mdi-checkbox-outline',
-				key: 'shared-props',
-				title: 'Props',
-			},
-			{
-				href: '#props-shared',
-				icon: 'mdi:mdi-checkbox-outline',
-				key: 'shared-props',
-				title: 'Shared Props',
-			},
-		],
-		title: 'Props',
-	},
-	{
-		href: '#components',
-		icon: 'mdi:mdi-cog',
-		items: [
-			{
-				icon: 'mdi:mdi-github',
-				key: 'vuetify-github',
-				link: links.vuetifyGithub,
-				title: 'Github',
-			},
-			{
-				key: 'vuetify',
-				link: `${links.vuetify}en/components/all/`,
-				title: 'Components',
-			},
-			{
-				href: '#components-props',
-				icon: 'mdi:mdi-checkbox-outline',
-				key: 'shared-props',
-				title: 'Props',
-			},
-			{
-				href: '#components-shared-props',
-				icon: 'mdi:mdi-checkbox-outline',
-				key: 'shared-props',
-				title: 'Shared Props',
-			},
-			{
-				href: '#components-v-inline-checkbox',
-				icon: 'mdi:mdi-checkbox-outline',
-				key: 'v-checkbox',
-				link: `${links.vuetify}en/api/v-checkbox/`,
-				title: 'VCheckbox',
-			},
-			{
-				href: '#components-v-inline-select',
-				icon: 'mdi:mdi-format-list-bulleted',
-				key: 'v-select',
-				link: `${links.vuetify}en/api/v-select/`,
-				title: 'VSelect',
-			},
-			{
-				href: '#components-v-inline-switch',
-				icon: 'mdi:mdi-toggle-switch-off-outline',
-				key: 'v-switch',
-				link: `${links.vuetify}en/api/v-switch/`,
-				title: 'VSwitch',
-			},
-			{
-				href: '#components-v-inline-textarea',
-				icon: 'mdi:mdi-text-long',
-				key: 'v-textarea',
-				link: `${links.vuetify}en/api/v-textarea/`,
-				title: 'VTextarea',
-			},
-			{
-				href: '#components-v-inline-textfield',
-				icon: 'mdi:mdi-minus',
-				key: 'v-text-field',
-				link: `${links.vuetify}en/api/v-text-field/`,
-				title: 'VTextField',
-			},
-		],
-		key: 'components',
-		title: 'Components',
-	},
-	{
-		href: '#events',
-		icon: 'mdi:mdi-calendar-star',
-		title: 'Events',
-	},
-	{
-		href: '#slots',
-		icon: 'mdi:mdi-slot-machine',
-		title: 'Slots',
-	},
-	{
-		href: '#sass-variables',
-		icon: 'mdi:mdi-sass',
-		title: 'SASS Variables',
-	},
-	{
-		href: '#example',
-		icon: 'mdi:mdi-code-json',
-		title: 'Example',
-	},
-	{
-		href: '#dependencies',
-		icon: 'mdi:mdi-asterisk-circle-outline',
-		title: 'Dependencies',
-	},
-	{
-		href: '#license',
-		icon: 'mdi:mdi-card-account-details-outline',
-		title: 'License',
-	},
-	{
-		href: '#legal',
-		icon: 'mdi:mdi-scale-balance',
-		title: 'Legal',
-	},
-]);
+
+
+const codeBlockPlugin = 'prismjs';
+const codeBlockLightTheme = 'tomorrow';
+const codeBlockDarkTheme = 'tomorrow';
+
+const codeBlockSettings = ref({
+	plugin: codeBlockPlugin,
+	theme: codeBlockDarkTheme,
+});
+
+function updateCodeBlockTheme(val) {
+	codeBlockSettings.value.theme = codeBlockLightTheme;
+
+	if (val === 'dark') {
+		codeBlockSettings.value.theme = codeBlockDarkTheme;
+	}
+}
 
 provide('drawerOptions', drawerOptions);
 provide('links', store.links);
-provide('menuItems', menuItems);
 
 function toggleDrawer() {
 	drawer.value = !drawer.value;