botones

package-lock.json

@@ -2455,9 +2455,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
-      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
     },
     "bootstrap-vue": {
       "version": "2.15.0",

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
     "sweetalert": "^2.1.2",

src/App.vue

@@ -11,6 +11,7 @@ import Vue from "vue";
 import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
 
 Vue.use(BootstrapVue);
+
 Vue.use(IconsPlugin);
 
 export default {

src/components/panelAdmin.vue

@@ -5,34 +5,50 @@
     <div>
       <h1>Hackaton UNAM-AWS</h1>
     </div>
+   
+    <nav class="navbar navbar-expand-md navbar-light " >
     <div class="container">
       <div class="row">
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
-          <button
-            class="navbar-toggler"
-            type="button"
-            data-toggle="collapse"
-            data-target="#navbarTogglerDemo01"
-            aria-controls="navbarTogglerDemo01"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
-            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
-              <li class="nav-item ">
-                <a class="navbar-brand" @click="numPanel=1">Equipos </a
-                >
+        <div class="col">
+
+
+
+
+          <nav class="navbar navbar-dark">
+                    <button class=" navbar-toggler van  btn-sm" type="button" id="toggle-menu" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" v-on:click="toggle()">
+
+                      <span class=" navbar-toggler-icon m-1" ></span>
+                      Opciones
+                    </button>
+          </nav>
+           
+           
+
+
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item dropdown">
+                <div class="nav-item nav-link " @click="numPanel=1"><a>Equipos</a></div>
               </li>
-              <li class="nav-item">
-                <a class="navbar-brand"  @click="numPanel=2">Participantes</a>
+              <li class="nav-item dropdown">
+               <div class="nav-item nav-link " @click="numPanel=2"><a>Participantes</a></div>
               </li>
+             
+             
             </ul>
+
           </div>
-        </nav>
+
+        </div>
       </div>
+
+    
     </div>
+
+  </nav>
+
+
+
   
       <div class="container" v-if="numPanel==1">
         <div class="row">
@@ -120,6 +136,11 @@ export default {
     };
   },
   methods: {
+     toggle: function() {
+            let element = document.getElementById('navbarNav')
+            element.classList.toggle('block')
+            element.classList.add('mystyle')
+        },
    
   },
   async created() {
@@ -217,5 +238,65 @@ td {
 .navbar-brand{
   color: white;
   
+}
+
+body{
+   overflow-x: hidden;
+}
+.mystyle {
+    text-align: left;
+}
+
+.block {
+    display: block;
+}
+a {
+    max-height: 100%;
+}
+.menu {
+    background-color: #bb8800;
+}
+
+.menu nav ul {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 1rem;
+}
+
+.menu nav ul div {
+    display: flex;
+    justify-content: space-between;
+}
+
+.menu nav ul li {
+    list-style: none;
+}
+
+.menu nav ul li a {
+    display: block;
+}
+
+
+
+
+.van{
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  color: black;
+  
+}
+
+
+
+
+
+@media (min-width: 768px) {
+.van{
+  display: none;
+}
+
+
+
 }
 </style>