wip migration

components/NavBarEditar.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="navsearch_container container-fluid">
+    <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
+    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
+      >Cooperativa</NuxtLink
+    >
+    <!-- <NuxtLink to="/editar/cooperativa/crear">Crear cooperativa</NuxtLink> -->
+    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/productos"
+      >Productos</NuxtLink
+    >
+    <NuxtLink
+      :class="{ disabled: !coopIsValidated }"
+      to="/editar/productos/importar"
+      >Importar</NuxtLink
+    >
+    <NuxtLink to="/" @click="logout" >Cerrar sesión</NuxtLink>
+  </div>
+</template>
+
+<script>
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    const auth = useAuthStore();
+    return {
+      auth,
+    }
+  },
+  data() {
+    return {
+      coopIsValidated: false,
+    }
+  },
+  async mounted() {
+    await this.checkIfCoopValidated()
+  },
+  methods: {
+    async logout() {
+      await this.auth.logout()
+    },
+    //TODO: check if cooperative is validated is working
+    async checkIfCoopValidated() {
+      const result = await $fetch('my_company/', {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+      })
+      this.coopIsValidated = result.data.company.is_validated
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.navsearch_container {
+  border-bottom: 3px solid $color-grey-nav;
+  text-align: center;
+  padding: 20px 20px;
+
+  a {
+    font-size: $m;
+    font-weight: $bold;
+    color: $color-navy;
+    text-decoration: none;
+  }
+  a:nth-child(1):after,
+  a:nth-child(2):after,
+  a:nth-child(3):after,
+  a:nth-child(4):after {
+    color: $color-navy;
+    content: '\22EE';
+    margin: 0.5rem;
+  }
+  @include mobile {
+    display: none;
+  }
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+</style>