#8 make menu responsive

fiqus · Jul 5, 2019 · 6b2e31e · 6b2e31e
1 parent 1994900
commit 6b2e31e
Show file tree

Hide file tree

Showing 2 changed files with 1,267 additions and 1,241 deletions.
diff --git a/assets/js/components/user-bar.vue b/assets/js/components/user-bar.vue
@@ -1,7 +1,13 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div id="navbarNav" class="collapse navbar-collapse">
-      <ul class="navbar-nav">
+
+    <a class="navbar-brand" href="#">Menú</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse">
+      <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <router-link :to="{name: 'home'}" class="nav-link">Home</router-link>
         </li>
@@ -24,17 +30,18 @@
           <router-link :to="{name: 'users-list'}" class="nav-link">Usuarios</router-link>
         </li>
       </ul>
-    </div>
-    <div id="navbarUser" class="nav-user" v-if="user">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <span class="nav-link username">{{user.first_name}} {{user.last_name}}</span>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" v-on:click="logout">Cerrar Sesión</a>
-        </li>
+      <ul class="nav navbar-nav navbar-right" v-if="user">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              {{user.first_name}} {{user.last_name}}
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a v-on:click="logout" class="dropdown-item" href="#">Cerrar Sesión</a>
+            </div>
+          </li>
       </ul>
     </div>
+
   </nav>
 </template>
 <script>