Tab menu en admin_login_blade.php

resources/js/components/TabMenu.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <div class="tabs is-centered">
+            <ul>
+                <li v-for="(tab, index) in tabs" :class="{ 'is-active': selected == index }">
+                    <a @click="select(index)">
+                        <span>{{ names[index] }}</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div v-for="(tab, index) in tabs" v-show="selected == index">
+            <slot :name="tab"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                selected: 0,
+            }
+        },
+        mounted() {
+            select(0)
+        },
+        methods: {
+            select(index) {
+                this.selected = index
+            }
+        },
+        props: {
+            'tabs': Array,
+            'names': Array,
+        },
+    }
+</script>

resources/views/auth/admin_login.blade.php

@@ -16,6 +16,9 @@
         <p class="subtitle has-text-white">
             Bienvenidx a la administración de pedidos del <strong class="has-text-white">Mercado Popular de Subsistencia</strong>
         </p>
+
+        <tab-menu id="tabmenu" :tabs="['barrios','super']" :names="['Barrios', 'Super admin']">
+            <template #barrios>
                 @error('name')
                 <div class="notification is-warning">
                     Contraseña incorrecta, intentalo nuevamente.
@@ -27,6 +30,11 @@
                     <barrio-select admin="true"></barrio-select>
                     <login-admin></login-admin>
                 </form>
+            </template>
+            <template #super>
+                
+            </template>
+        </tab-menu>
     </div>
 </section>
 <script src="{{ asset('js/app.js') }}" defer></script>