wip migration

components/NavBar.vue

@@ -0,0 +1,204 @@
+<template>
+  <header class="header">
+    <div class="container wrapper">
+      <div class="navmenu-container">
+        <NavMenu @logout="logout" />
+      </div>
+      <!-- isAdmin: {{ isAdmin }} <br>
+      isAuthenticated: {{ isAuthenticated }} <br> -->
+      <nav>
+        <NuxtLink to="/">
+          <img
+            class="logo"
+            src="@/assets/img/latienda-logo.png"
+            alt="latienda.coop"
+          />
+        </NuxtLink>
+        <SearchInput v-if="$route.name == 'index'" class="search-input"/>
+        <div class="nav-buttons">
+          <NuxtLink to="/page/info">
+            <img
+              class="nav-buttons-info nav-icon"
+              src="@/assets/img/latienda-info.svg"
+              alt="latienda.coop"
+            />
+          </NuxtLink>
+          <div class="nav-buttons-dots"></div>
+          <NuxtLink v-if="isAuthenticated & !isAdmin" to="/editar/perfil">
+            <div class="nav-buttons-acceso">
+              <img
+                class="nav-icon"
+                src="@/assets/img/latienda-acceder.svg"
+                alt="latienda.coop"
+              />
+              <div class="nav-text">{{ name }}</div>
+            </div>
+          </NuxtLink>
+          <NuxtLink v-else-if="isAuthenticated & isAdmin" to="/admin">
+            <div class="nav-buttons-acceso">
+              <img
+                class="nav-icon"
+                src="@/assets/img/latienda-acceder.svg"
+                alt="latienda.coop"
+              />
+              <div class="nav-text">{{ name }}</div>
+            </div>
+          </NuxtLink>
+          <NuxtLink v-else to="/login">
+            <div class="nav-buttons-acceso">
+              <img
+                class="nav-icon"
+                src="@/assets/img/latienda-acceder.svg"
+                alt="latienda.coop"
+              />
+              <div class="nav-text">Acceder</div>
+            </div>
+          </NuxtLink>
+        </div>
+
+        <!-- <nuxt-link to="/">Búsqueda</nuxt-link>
+      <nuxt-link to="/auth/registro">Registrarse</nuxt-link>
+      <nuxt-link to="/auth/login">Login</nuxt-link>
+      <nuxt-link to="/editar">{{ $store.state.auth.email }}</nuxt-link>
+      <nuxt-link to="/admin" v-if="isAdmin">Panel de administración</nuxt-link> -->
+        <!-- <button @click="logout">Logout</button> -->
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script>
+import { mapActions } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
+export default {
+
+  setup() {
+    const auth = useAuthStore();
+    return {
+      auth,
+    }
+  },
+  computed: {
+    isAdmin() {
+      return this.auth.isAdmin
+    },
+    isAuthenticated() {
+      return this.auth.isAuthenticated
+    },
+    name() {
+      return this.auth.getName
+    },
+  },
+
+  methods: {
+    ...mapActions('auth', ['logout']),
+    async logout() {
+      try {
+        await this.logout()
+        this.$router.push('/login')
+      } catch (err) {
+        console.log(err)
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.header {
+  background-color: $color-green;
+  padding: 10px;
+
+  @include mobile {
+    position: fixed;
+    z-index: 999999;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.wrapper {
+  width: 100%;
+  height: 50px;
+}
+
+nav {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-and-login {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.logo {
+  width: 10rem;
+  margin: 0 0.5rem;
+  @include mobile {
+    width: 9rem;
+  }
+}
+
+.nav-icon {
+  height: 1.25rem;
+}
+
+.nav-buttons {
+  width: auto;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0.6rem;
+  margin-left: 1.25rem;
+
+  @include mobile {
+    display: none;
+  }
+
+  &-info {
+    cursor: pointer;
+  }
+  &-dots:after {
+    color: $color-navy;
+    content: '\22EE';
+    margin: 0.5rem;
+    @include mobile {
+      display: none;
+    }
+  }
+  &-acceso {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+  }
+  .nav-buttons-info {
+    @include mobile {
+      display: none;
+    }
+  }
+}
+
+.nav-text {
+  font-size: $xs;
+  color: $color-navy;
+  margin: 0.5rem;
+  @include mobile {
+    display: none;
+  }
+}
+</style>