cambios en la nav bar y barra de búsqueda

resources/js/components/NavBar.vue

@@ -1,28 +1,42 @@
 <template>
     <nav class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
+      
       <div class="navbar-brand">
         <a class="navbar-item" href="https://mps.org.uy">
           <img src="/assets/logoMPS.png" height="28">
         </a>
-        <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
-        <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
-          <img style="padding:0 0.3em;" src="/assets/chismosa.png" height="28">
-          <p style="margin:0 auto; color:white">$ <span v-text="subpedido == null ? 0 : subpedido.total"></span></p>
-        </a>
-        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
+        <!-- Styles nombre del barrio-->
+        <p class="navbar-item">
+          <slot name="gdc"></slot>
+        </p>
+        <p class="navbar-item">
+          <slot name="subpedido"></slot>
+        </p>
+        
+        <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="nav-bar" @click="toggleState">
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
           <span aria-hidden="true"></span>
         </a>
       </div>
 
-      <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
-        <div class="navbar-start has-text-right-mobile">
-            <!-- Styles nombre del barrio-->
-            <p class="navbar-item"><slot name="gdc"></slot></p>
+      <div id="nav-bar" class="navbar-menu" :class="{'is-active':isActive}">
+        <div class="navbar-start"></div>
+        <div class="navbar-end">
+            <div class="control mt-auto mb-auto has-icons-left margin-in-burger">
+              <input class="input is-small" type="text" placeholder="Harina" :v-model="searchString">
+              <span class="icon is-small is-left">
+                <i class="fas fa-search"></i>
+              </span>
+            </div>
+            <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+                <span class="icon is-small mr-1" id="chismosa">
+                  <img class="invert-in-burger" src="/assets/chismosa.png">
+                </span>
+                <span v-text="'$' + (subpedido == null ? 0 : subpedido.total)"></span>
+            </a>
             <a class="navbar-item"
-                onclick="event.preventDefault();
-                document.getElementById('logout-form').submit();">
+                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                 Cerrar sesión
             </a>
             <slot name="logout-form"></slot>
@@ -34,35 +48,41 @@
 <script>
     export default {
         data() {
-            return {
-                isActive: false,
-                subpedido: null
-            }
+          return {
+            isActive: false,
+            subpedido: null,
+            searchString: ""
+          }
         },
         methods: {
-            toggleState() {
-                this.isActive = !this.isActive;
-            },
-        actualizarSubpedido(){
-          axios.get("/api/subpedidos/" + this.subpedido.id)
-            .then(response => {
-              this.subpedido = response.data.data;
-          });
+          toggleState() {
+            this.isActive = !this.isActive
+          },
+          actualizarSubpedido(){
+            axios.get("/api/subpedidos/" + this.subpedido.id)
+              .then(response => {
+                this.subpedido = response.data.data
+            });
+          },
+          toggleChismosa(){
+            if (this.isActive) this.toggleState()
+            Event.$emit("toggle-chismosa")
+          },
+          buscar() {
+            Event.$emit("buscar-productos",this.searchString)
+          }
         }, 
-        toggleChismosa(){
-          Event.$emit("toggle-chismosa");
-        }
-        }, mounted() {
-        axios.get("/subpedidos/obtener_sesion").then(response => {
-          this.subpedido = response.data.subpedido;
-          this.actualizarSubpedido()
-        });
-        //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
-        Event.$on('sync-subpedido', (cantidad, id) => {
-            axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
+        mounted() {
+          axios.get("/subpedidos/obtener_sesion").then(response => {
+            this.subpedido = response.data.subpedido
+            this.actualizarSubpedido()
+          });
+          //Emitir un evento subpedido-actualizado al agregar o eliminar un producto del subpedido para que el total de la chismosa se muestre correctamente
+          Event.$on('sync-subpedido', (cantidad, id) => {
+              axios.post("/api/subpedidos/"+this.subpedido.id+"/sync", {
                 cantidad: cantidad,
                 producto_id: id
-            }).then((response) => {
+              }).then((response) => {
                 this.subpedido = response.data.data;
                 Event.$emit('sync-chismosa',this.subpedido);
                 window.bulmaToast.toast({
@@ -72,22 +92,22 @@
                   position: 'bottom-center',
                   animate: { in: 'fadeIn', out: 'fadeOut' }
                 });
-            });
-        });
-        Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
+              });
+          });
+          Event.$on('aprobacion-subpedido', (subpedidoId, aprb) => {
             axios.post("/api/admin/subpedidos/" + subpedidoId + "/aprobacion", {
-                aprobacion: aprb
+              aprobacion: aprb
             }).then((response) => {
-                Event.$emit('sync-aprobacion', response.data.data);
-                window.bulmaToast.toast({
-                    message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
-                    duration: 1000,
-                    type: 'is-danger',
-                    position: 'bottom-center',
-                    animate: { in: 'fadeIn', out: 'fadeOut' }
-                })
+              Event.$emit('sync-aprobacion', response.data.data);
+              window.bulmaToast.toast({
+                message: 'Pedido ' + (aprb ? 'aprobado' : 'desaprobado') + ' exitosamente',
+                duration: 1000,
+                type: 'is-danger',
+                position: 'bottom-center',
+                animate: { in: 'fadeIn', out: 'fadeOut' }
+              })
             })
-        })
+          })
       }
     };
 </script>
@@ -95,7 +115,15 @@
 <style>
 
 p.navbar-item:empty {
-    display: none;
+  display: none;
+}
+@media (max-width: 1023px) {
+  .invert-in-burger {
+    filter: invert(.5);
+  }
+  .margin-in-burger {
+    margin-left: .75rem;
+    margin-right: .75rem;
+  }
 }
-
 </style>

resources/js/components/NavMigas.vue

@@ -43,8 +43,8 @@ nav.breadcrumb.is-fixed-top {
 	left: 0;
 	position: fixed;
 	right: 0;
-	z-index: 30;
 	top: 3.25rem;
 	height: 3.25rem;
+	z-index: -10;
 }
 </style>