Usando componentes extraidos + estilos generalizados

resources/js/components/comunes/NavBar.vue

@@ -1,43 +1,26 @@
 <template>
-    <nav id="nav-bar" class="navbar is-danger is-fixed-top" role="navigation" aria-label="main navigation">
+    <nav id="nav-bar"
+         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">
+                <img src="/assets/logoMPS.png" height="28" alt="Logo del MPS">
-            </a>
-            <div class="navbar-item hide-below-1024" v-if="pedidoDefinido">
-                <p>{{ `Barrio: ${grupo_de_compra.nombre} - Núcleo: ${nombre}` }}</p>
-            </div>
-            <chismosa-dropdown
-                v-if="pedidoDefinido"
-                class="hide-above-1023"
-                ariaControls="mobile"
-            />
-            <a role="button" class="navbar-burger" :class="{'is-active':burgerActiva}" aria-label="menu"
-               aria-expanded="false" data-target="nav-bar" @click="toggleBurger">
-                <span aria-hidden="true"></span>
-                <span aria-hidden="true"></span>
-                <span aria-hidden="true"></span>
             </a>
+            <pedidos-nav-bar v-if="rol === 'barrio'"/>
+            <ollas-nav-bar v-else-if="rol === 'ollas'"/>
+            <admin-nav-bar v-else-if="rol === 'admin_barrio'"/>
+            <comisiones-nav-bar v-else/>
         </div>
-        <div class="navbar-menu" :class="{'is-active':burgerActiva}">
+        <div class="navbar-menu"
+             :class="{'is-active': burger_activa}">
             <div class="navbar-end">
-                <div v-if="pedidoDefinido" class="navbar-item field has-addons mt-1 mr-3 mb-1">
+                <buscador v-if="pedidoDefinido"/>
-                    <a class="button is-small has-text-dark-grey" @click.capture="buscar">
+                <chismosa-dropdown v-if="pedidoDefinido"
-                <span class="icon">
+                                   class="hide-below-1024"
-                  <i class="fas fa-search"></i>
+                                   ariaControls="wide"/>
-                </span>
-                    </a>
-                    <input class="input is-small" type="text" placeholder="Harina" v-model="searchString"
-                           @keyup.enter="buscar">
-                </div>
-                <chismosa-dropdown
-                    v-if="pedidoDefinido"
-                    class="hide-below-1024"
-                    ariaControls="wide">
-                </chismosa-dropdown>
                 <div class="block navbar-item">
-                    <a onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
+                    <a @click="logOut" class="text-a">
-                       class="text-a">
                         Cerrar sesión
                     </a>
                 </div>
@@ -48,63 +31,28 @@
 
 <script>
 import ChismosaDropdown from '../pedidos/ChismosaDropdown.vue';
-import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
+import PedidosNavBar from "../pedidos/PedidosNavBar.vue";
+import ComisionesNavBar from "../comisiones/ComisionesNavBar.vue";
+import AdminNavBar from "../admin/AdminNavBar.vue";
+import OllasNavBar from "../ollas/OllasNavBar.vue";
+import Buscador from "../pedidos/Buscador.vue";
 
 export default {
-    components: { ChismosaDropdown },
+    components: { Buscador, OllasNavBar, AdminNavBar, ComisionesNavBar, PedidosNavBar, ChismosaDropdown },
-    data() {
-        return {
-            burgerActiva: false,
-            searchString: "",
-            nombreCanasta: "",
-            fechaCanasta: "",
-        }
-    },
     computed: {
         ...mapGetters('pedido', ["pedidoDefinido"]),
-        ...mapState('pedido', ["nombre"]),
+        ...mapState('login', ["rol"]),
-        ...mapState('pedido', ["grupo_de_compra"]),
+        ...mapState('ui', ["burger_activa"])
     },
     methods: {
-        ...mapActions('productos', ["filtrarProductos"]),
+        logOut() {
-        ...mapMutations('ui', ["addMiga", "popUltimaBusqueda"]),
+            event.preventDefault();
-        toggleBurger() {
+            document.getElementById('logout-form').submit();
-            this.burgerActiva = !this.burgerActiva
         },
-        buscar() {
+    }
-            if (this.burgerActiva)
-                this.toggleBurger();
-            this.filtrarProductos({ filtro: "nombre", valor: this.searchString });
-            this.popUltimaBusqueda();
-            this.addMiga({ nombre: this.searchString });
-        }
-    },
 };
 </script>
 
 <style>
-
-p.navbar-item:empty {
-    display: none;
-}
-
-#nav-bar {
-    z-index: 10;
-}
-
-.text-a {
-    color: inherit;
-}
-
-@media (max-width: 1023px) {
-    .hide-below-1024 {
-        display: none !important;
-    }
-}
-
-@media (min-width: 1024px) {
-    .hide-above-1023 {
-        display: none !important;
-    }
-}
 </style>

resources/sass/app.scss

@@ -48,6 +48,30 @@ table.table td {
     border-color: transparent;
     color: #fff;
 }
+
+p.navbar-item:empty {
+    display: none;
+}
+
+#nav-bar {
+    z-index: 10;
+}
+
+.text-a {
+    color: inherit;
+}
+
+@media (max-width: 1023px) {
+    .hide-below-1024 {
+        display: none !important;
+    }
+}
+
+@media (min-width: 1024px) {
+    .hide-above-1023 {
+        display: none !important;
+    }
+}
 /*
   Author: Aseem Lalfakawma <alalfakawma.github.io>
   This SCSS mixin will allow sizing of table columns in Bulma CSS Framework.