feat: manual (#191)

* feat: add markdown render deps

* feat: add manual route

* feat: example toc

* feat: add highlight js dependency

* feat: add view page

* feat: add translations for property and manual in English and Thai

* feat: enhance drawer menu with internationalization support and manual section

* feat: add conditional internationalization for sub-menu labels

* feat: add video support

* refactor: add stores and type

* fix: wrong path

* feat: improve layout structure and enhance scroll functionality in ViewPage

* fix: scroll not working

* chore: change variable name

* feat: show sub tile of manual

* feat: add translation for 'Table of Contents' in English and Thai

* feat: enhance layout and add conditional rendering for Table of Contents in ViewPage

* chore: clean

* refactor: use expansion

* refactor: show icon

* refactor: spacing

---------

Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Co-authored-by: Thanaphon Frappet <thanaphon@frappet.com>

src/stores/manual/index.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { getToken } from 'src/services/keycloak';
+import { Manual } from './types';
+import { baseUrl } from '../utils';
+
+const ENDPOINT = 'manual';
+
+export async function getManual() {
+  const res = await api.get<Manual[]>(`/${ENDPOINT}`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getManualByPage(opt: {
+  category: string;
+  pageName: string;
+}) {
+  const res = await fetch(
+    `${baseUrl}/${ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+  );
+  if (res.status < 400) {
+    return res;
+  }
+  return null;
+}
+
+export const useManualStore = defineStore('manual-store', () => {
+  const dataManual = ref<Manual[]>([]);
+
+  return {
+    getManual,
+    getManualByPage,
+
+    dataManual,
+  };
+});

src/stores/manual/types.ts

@@ -0,0 +1,14 @@
+export type Manual = {
+  label: string;
+  labelEN: string;
+  category: string;
+  icon?: string;
+  page: Page[];
+};
+
+type Page = {
+  name: string;
+  label: string;
+  labelEN: string;
+  icon?: string;
+};