From 5ea2826db0e02ff59a4ee26386d8fd970fc19b82 Mon Sep 17 00:00:00 2001
From: cristij <joracristi@gmail.com>
Date: Sun, 2 Sep 2018 14:57:24 +0300
Subject: [PATCH] Add icons and dropdowns to navbar

---
 src/App.vue                        |   8 ++-
 src/components/BaseDropdown.vue    |   6 +-
 src/layout/dashboard/TopNavbar.vue | 110 ++++++++++++++++++++---------
 3 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6cc2b42..920c15a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,13 @@
 </template>
 
 <script>
-export default {};
+export default {
+  mounted() {
+    if(!this.$rtl.isRTL) {
+      this.$rtl.disableRTL();
+    }
+  }
+};
 </script>
 
 <style lang="scss"></style>
diff --git a/src/components/BaseDropdown.vue b/src/components/BaseDropdown.vue
index 3915226..f0e0198 100644
--- a/src/components/BaseDropdown.vue
+++ b/src/components/BaseDropdown.vue
@@ -14,7 +14,7 @@
         </span>
       </slot>
     </a>
-    <ul class="dropdown-menu" :class="{show:isOpen}">
+    <ul class="dropdown-menu" :class="[{show:isOpen}, {'dropdown-menu-right': menuOnRight}, menuClasses]">
       <slot></slot>
     </ul>
   </component>
@@ -29,7 +29,9 @@ export default {
     },
     title: String,
     icon: String,
-    titleClasses: [String, Object, Array]
+    titleClasses: [String, Object, Array],
+    menuClasses: [String, Object],
+    menuOnRight: Boolean
   },
   data() {
     return {
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index d59194a..e30eb1c 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/src/layout/dashboard/TopNavbar.vue
@@ -33,44 +33,90 @@
             </button>
             <!-- You can choose types of search input -->
           </div>
+          <base-dropdown class="nav-item" menu-on-right>
+            <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
+              <div class="notification d-none d-lg-block d-xl-block"></div>
+              <i class="tim-icons icon-sound-wave"></i>
+              <p class="d-lg-none">
+                New Notifications
+              </p>
+            </a>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Mike John responded to your email</a>
+            </li>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">You have 5 more tasks</a>
+            </li>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Your friend Michael is in town</a>
+            </li>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Another notification</a>
+            </li>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Another one</a>
+            </li>
+          </base-dropdown>
+          <base-dropdown class="nav-item" menu-classes="dropdown-navbar">
+            <a slot="title" href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true">
+              <div class="photo">
+                <img src="/img/anime3.png">
+              </div>
+              <b class="caret d-none d-lg-block d-xl-block"></b>
+              <p class="d-lg-none">
+                Log out
+              </p>
+            </a>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Profile</a>
+            </li>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Settings</a>
+            </li>
+            <div class="dropdown-divider"></div>
+            <li class="nav-link">
+              <a href="#" class="nav-item dropdown-item">Log out</a>
+            </li>
+          </base-dropdown>
         </ul>
       </div>
-    </div></nav>
+    </div>
+  </nav>
 </template>
 <script>
-export default {
-  computed: {
-    routeName() {
-      const { name } = this.$route;
-      return this.capitalizeFirstLetter(name);
+  export default {
+    computed: {
+      routeName() {
+        const { name } = this.$route;
+        return this.capitalizeFirstLetter(name);
+      },
+      isRTL() {
+        return this.$rtl.isRTL;
+      }
     },
-    isRTL() {
-      return this.$rtl.isRTL;
+    data() {
+      return {
+        activeNotifications: false
+      };
+    },
+    methods: {
+      capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      },
+      toggleNotificationDropDown() {
+        this.activeNotifications = !this.activeNotifications;
+      },
+      closeDropDown() {
+        this.activeNotifications = false;
+      },
+      toggleSidebar() {
+        this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
+      },
+      hideSidebar() {
+        this.$sidebar.displaySidebar(false);
+      }
     }
-  },
-  data() {
-    return {
-      activeNotifications: false
-    };
-  },
-  methods: {
-    capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
-    },
-    toggleNotificationDropDown() {
-      this.activeNotifications = !this.activeNotifications;
-    },
-    closeDropDown() {
-      this.activeNotifications = false;
-    },
-    toggleSidebar() {
-      this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
-    },
-    hideSidebar() {
-      this.$sidebar.displaySidebar(false);
-    }
-  }
-};
+  };
 </script>
 <style>
 </style>