add doc

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>