Cambio de estilos en la navbar

public/css/app.css

@@ -19,7 +19,7 @@ nav.breadcrumb.is-fixed-top {
 	left: 0;
 	position: fixed;
 	right: 0;
-	z-index: 30;
+	z-index: 0;
 	top: 3.25rem;
 	height: 3.25rem;
 }
@@ -44,10 +44,22 @@ main.has-top-padding {
 	overflow-y: scroll;
 	overflow-x: hidden;
 	width: 100%;
-	position: fixed;	
+	position: fixed;
 	z-index: 15;
 }
 
 main.chisma-abierta {
 	padding-top: 25.5rem !important;
-}
+}
+
+@media screen and (min-width: 1024px) {
+    .hide-when-widescreen {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1023px) {
+    .hide-when-narrowscreen {
+        display: none;
+    }
+}

public/js/app.js

@@ -7,8 +7,10 @@ Vue.component('nav-bar', {
             <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>
+            <p style="margin:0 auto" class="navbar-item hide-when-widescreen">
-            <a class="navbar-item" href="#chismosa" @click.capture="toggleChismosa">
+                <slot name="subpedido"></slot>
+            </p>
+            <a class="navbar-item hide-when-widescreen" 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>
@@ -20,9 +22,19 @@ Vue.component('nav-bar', {
           </div>
 
           <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
-            <div class="navbar-start has-text-right-mobile">
+            <div class="navbar-start"></div>
+            <div class="navbar-end has-text-right-mobile">
+                <p style="margin:0 auto" class="navbar-item hide-when-narrowscreen">
+                    <slot name="subpedido"></slot>
+                </p>
+                <a class="navbar-item hide-when-narrowscreen" 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>
                 <!-- Styles nombre del barrio-->
-                <p class="navbar-item"><slot name="gdc"></slot></p>
+                <p class="navbar-item">
+                    <slot name="gdc"></slot>
+                </p>
                 <a class="navbar-item"
                 	onclick="event.preventDefault();
                 	document.getElementById('logout-form').submit();">

resources/views/layouts/app.blade.php

@@ -35,7 +35,7 @@
         <nav-migas inline-template>
             <nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
               <ul>
-                <li v-for="(miga, i) in migas" v-bind:class="i==migas.length-1 ? 'is-active' : ''"><a :href="miga.href" v-text="miga.nombre"></a></li>
+                <li v-for="(miga, i) in migas" v-bind:class="i===migas.length-1 ? 'is-active' : ''"><a :href="miga.href" v-text="miga.nombre"></a></li>
               </ul>
             </nav>
         </nav-migas>
@@ -50,4 +50,4 @@
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     @yield('scripts')
 </body>
-</html>
+</html>