initial commit

components/NavBar.vue

@@ -4,31 +4,43 @@
       <div class="navmenu-container">
         <NavMenu @handle-logout="handleLogout" />
       </div>
-      <!-- isAdmin: {{ isAdmin }} <br>
-      isAuthenticated: {{ isAuthenticated }} <br> -->
       <nav>
         <NuxtLink to="/">
           <img
             class="logo"
-            src="@/assets/img/latienda-logo.png"
+            src="@/assets/img/logo-consumo-cuidado.png"
             alt="latienda.coop"
           />
         </NuxtLink>
-        <SearchInput v-if="$route.name == 'index'" class="search-input"/>
         <div class="nav-buttons">
-          <NuxtLink to="/page/info">
+          <!-- <NuxtLink to="/page/info">
             <img
               class="nav-buttons-info nav-icon"
               src="@/assets/img/latienda-info.svg"
               alt="latienda.coop"
             />
+          </NuxtLink> -->
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">Inicio</p>
           </NuxtLink>
-          <div class="nav-buttons-dots"></div>
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">Catálogo</p>
+          </NuxtLink>
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">Productoras</p>
+          </NuxtLink>
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">Únete</p>
+          </NuxtLink>
+          <NuxtLink to="/" class="nuxt-link">
+            <p class="nav-text">kit-eco.social</p>
+          </NuxtLink>
+          <div class="nav-buttons-line"></div>
           <NuxtLink v-if="isAuthenticated & !isAdmin" to="/editar/perfil">
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
+                src="@/assets/img/circle-user-round.svg"
                 alt="latienda.coop"
               />
               <div class="nav-text">{{ name }}</div>
@@ -38,7 +50,7 @@
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
+                src="@/assets/img/circle-user-round.svg"
                 alt="latienda.coop"
               />
               <div class="nav-text">{{ name }}</div>
@@ -48,20 +60,12 @@
             <div class="nav-buttons-acceso">
               <img
                 class="nav-icon"
-                src="@/assets/img/latienda-acceder.svg"
+                src="@/assets/img/circle-user-round.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>
@@ -103,7 +107,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .header {
-  background-color: $color-green;
+  background-color: white;
   padding: 10px;
 
   @include mobile {
@@ -167,11 +171,11 @@ nav {
     display: none;
   }
 
-  &-info {
+  &-line {
     cursor: pointer;
   }
-  &-dots:after {
-    color: $color-navy;
+  &-line:after {
+    color: $color-consumo-base;
     content: '\22EE';
     margin: 0.5rem;
     @include mobile {
@@ -183,6 +187,7 @@ nav {
     flex-direction: row;
     align-items: center;
     cursor: pointer;
+    margin-left: 1rem;
   }
   .nav-buttons-info {
     @include mobile {
@@ -191,10 +196,27 @@ nav {
   }
 }
 
+.nuxt-link {
+  text-decoration: none;
+  :hover {
+    color: $color-consumo-base;
+  }
+  @include desktop {
+    padding: 12px;
+    margin: 0 1rem;
+  }
+  @include tablet {
+    padding: 8px;
+  }
+}
+
 .nav-text {
   font-size: $xs;
-  color: $color-navy;
-  margin: 0.5rem;
+  color: $color-primary;
+  text-transform: uppercase;
+  margin: 0 0.1rem;
+  font-weight: $medium;
+
   @include mobile {
     display: none;
   }