add doc

src/components/modal/ShareConnection.vue

@@ -32,7 +32,6 @@
               </v-btn>
             </div>
           </v-card>
-          <!-- {{ connection }} -->
         </div>
       </v-card-text>
       <v-card-actions>

src/layouts/default/AppBar.vue

@@ -12,7 +12,7 @@
     <v-chip
       v-else-if="AppStore.validConnection"
       color="success"
-      style="max-width: 40vw"
+      style="max-width: 35vw"
     >
       <v-icon color="success" start> mdi-check-circle </v-icon>
       {{

src/layouts/doc/AppBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title class="flex-shrink-0">
+      <v-btn @click="drawer = !drawer" icon>
+        <v-icon>mdi-menu</v-icon>
+      </v-btn>
+      <v-btn variant="text" @click="$router.push({ name: 'doc' })">
+        <v-img src="@/assets/logo.png" height="24" width="24" class="mr-2" />
+        Evolution Doc
+      </v-btn>
+    </v-app-bar-title>
+    <v-btn :to="{ name: 'instances' }"> Instâncias </v-btn>
+    <v-btn @click="toggleTheme" icon>
+      <v-icon>mdi-{{ dark ? "white-balance-sunny" : "weather-night" }}</v-icon>
+    </v-btn>
+  </v-app-bar>
+
+  <v-navigation-drawer :width="200" v-model="drawer">
+    <v-select
+      :value="lang"
+      :items="lang_list"
+      item-text="text"
+      item-value="value"
+      density="compact"
+      hide-details="auto"
+      class="ma-1"
+      @update:model-value="DocStore.setLang"
+    />
+    <v-list-item
+      title="Documentação"
+      subtitle="Evolution-Manager"
+    ></v-list-item>
+    <v-divider></v-divider>
+    <v-list-item
+      link
+      :title="doc"
+      v-for="doc in docs"
+      :key="doc"
+      :to="{ name: 'doc', params: { doc } }"
+    />
+  </v-navigation-drawer>
+</template>
+
+<script>
+import { useTheme } from "vuetify";
+import { useDocStore } from "@/store/doc";
+export default {
+  name: "AppBar",
+  data: () => ({
+    theme: useTheme(),
+    drawer: false,
+    lang_list: [
+      { title: "Português", value: "pt_br" },
+      { title: "English", value: "en" },
+    ],
+    DocStore: useDocStore(),
+  }),
+  methods: {
+    toggleTheme() {
+      const theme = this.theme.global.current.dark ? "light" : "dark";
+      this.theme.global.name = theme;
+      localStorage.setItem("theme", theme);
+    },
+  },
+  computed: {
+    lang() {
+      return this.DocStore.lang;
+    },
+    docs() {
+      return Object.keys(this.DocStore.docs).filter((doc) => doc !== "index");
+    },
+    dark() {
+      return this.theme.global.current.dark;
+    },
+    files() {},
+  },
+  mounted() {
+    this.DocStore.loadDocs();
+  },
+};
+</script>

src/layouts/doc/AppFooter.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-footer absolute app class="mt-10">
+    <div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
+      <div class="flex-shrink-0 d-flex gap-2 align-center">
+        <v-btn
+        @click="about"
+        variant="tonal"
+          size="small"
+          color="blue"
+          >
+          <v-icon start> mdi-information </v-icon>
+          Sobre
+        </v-btn>
+        <v-btn
+        @click="contribute"
+          variant="tonal"
+          size="small"
+          color="light-blue-lighten-1"
+        >
+          <v-icon start>mdi-hand-coin</v-icon>
+          Contribua com o projeto
+        </v-btn>
+        <p style="font-size: 12px" class="text-disabled">v{{ version }}</p>
+      </div>
+    </div>
+  </v-footer>
+  <Contribute ref="contribute" />
+  <About ref="about" />
+</template>
+
+<script>
+import About from "@/components/modal/About.vue";
+import Contribute from "@/components/modal/Contribute.vue";
+import { version } from "../../../package.json";
+
+export default {
+  name: "AppFooter",
+  data: () => ({
+    version,
+  }),
+  methods: {
+    about() {
+      this.$refs.about.open();
+    },
+    contribute() {
+      this.$refs.contribute.open();
+    },
+  },
+  components: { Contribute, About },
+};
+</script>
+
+<style></style>

src/layouts/doc/Index.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app>
+    <doc-bar />
+
+    <doc-view />
+
+    <doc-footer />
+  </v-app>
+</template>
+
+<script setup>
+
+import DocBar from "./AppBar.vue";
+import DocView from "./View.vue";
+import DocFooter from "./AppFooter.vue";
+</script>

src/layouts/doc/View.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-main>
+    <v-container>
+      <router-view />
+    </v-container>
+  </v-main>
+</template>
+
+<script setup>
+//
+</script>

src/router/index.js

@@ -21,6 +21,23 @@ const routes = [
 
     ],
   },
+  {
+    path: BASE_URL + 'doc',
+    component: () => import('@/layouts/doc/Index.vue'),
+    children: [
+      {
+        path: ':doc',
+        name: 'doc',
+        component: () => import('@/views/Doc.vue'),
+
+      },
+      {
+        path: '',
+        name: 'doc.index',
+        component: () => import('@/views/Doc.vue'),
+      },
+    ]
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: BASE_URL,

src/store/app.js

@@ -85,7 +85,8 @@ export const useAppStore = defineStore('app', {
       this.instancesList = []
       this.instancesKeys = {}
       this.connectionsList = []
-      window.localStorage.clear();
+      this.saveLocalStorage()
+
     },
 
     async reconnect() {

src/store/doc.js

@@ -0,0 +1,65 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+
+export const useDocStore = defineStore('doc', {
+  getters: {
+    lang: (state) => state.language,
+  },
+  state: () => ({
+    language: 'pt_br',
+    languages: [],
+    docs: {},
+  }),
+
+  actions: {
+    async setLang(lang) {
+      this.language = lang;
+    },
+    async loadDocs() {
+      try {
+        const { languages, docs } = getFileTree();
+        this.languages = languages;
+        this.docs = docs;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async loadDoc(path) {
+      try {
+        debugger;
+        const { language } = this;
+        const doc = this.docs[path]
+        const content = await doc[language]();
+        return {
+          content,
+          language,
+        };
+      } catch (error) {
+        console.log(error);
+        throw new Error('Documento não encontrado');
+      }
+    }
+  }
+})
+
+// Function to get the file tree from @doc
+function getFileTree() {
+  const tree = import.meta.glob('@docs/**/*.{md,mdx}', { as: 'raw'})
+  const docsFiles = {}
+  const languages = new Set()
+
+  Object.entries(tree).forEach(([path, imprt]) => {
+    const [, , lang, ...rest] = path.split('/')
+    languages.add(lang)
+
+    const filename = rest.join('/').replace(/\.mdx?$/, '')
+    docsFiles[filename] = docsFiles[filename] || {}
+    docsFiles[filename][lang] = imprt
+  })
+
+  return {
+    languages: Array.from(languages),
+    docs: docsFiles,
+  }
+}

src/views/Doc.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-card elevation="0" :loading="loading">
+    <VMarkdownView
+      v-if="!error"
+      :mode="dark ? 'dark' : 'light'"
+      :content="content"
+    ></VMarkdownView>
+
+    <div v-else>
+      <v-alert type="error" outlined>
+        {{ error }}
+      </v-alert>
+    </div>
+  </v-card>
+</template>
+
+<script>
+import { VMarkdownView } from "vue3-markdown";
+import "vue3-markdown/dist/style.css";
+import { useDocStore } from "@/store/doc";
+export default {
+  components: {
+    VMarkdownView,
+  },
+  data: () => ({
+    drawer: false,
+    lang_list: [
+      { title: "Português", value: "pt_br" },
+      { title: "English", value: "en" },
+    ],
+    DocStore: useDocStore(),
+    content: "",
+    error: false,
+    loading: false,
+  }),
+  methods: {
+    async loadDoc(doc) {
+      try {
+        this.loading = true;
+        this.error = false;
+        debugger;
+        const { content } = await this.DocStore.loadDoc(doc || "index");
+        this.content = content;
+      } catch (e) {
+        this.error = e;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  watch: {
+    $route() {
+      this.loadDoc(this.$route.params.doc);
+    },
+    lang() {
+      this.loadDoc(this.$route.params.doc);
+    },
+  },
+  computed: {
+    lang() {
+      return this.DocStore.lang;
+    },
+    docs() {
+      return this.DocStore.docs;
+    },
+    dark() {
+      return this.theme?.global?.current?.dark;
+    },
+  },
+  mounted() {
+    debugger;
+    this.loadDoc(this.$route.params.doc);
+  },
+};
+</script>