Add modal and search modal

src/components/Modal.vue

@@ -0,0 +1,121 @@
+<template>
+  <SlideYUpTransition :duration="animationDuration">
+    <div class="modal fade"
+         @click.self="closeModal"
+         :class="[{'show d-block': show}, {'d-none': !show}, {'modal-mini': type === 'mini'}]"
+         v-show="show"
+         tabindex="-1"
+         role="dialog"
+         :aria-hidden="!show">
+
+      <div class="modal-dialog"
+           :class="[{'modal-notice': type === 'notice'}, {'modal-dialog-centered': centered}, modalClasses]">
+        <div class="modal-content" :class="[gradient ? `bg-gradient-${gradient}` : '',modalContentClasses]">
+
+          <div class="modal-header" :class="[headerClasses]" v-if="$slots.header">
+            <slot name="header"></slot>
+            <slot name="close-button">
+              <button type="button"
+                      class="close"
+                      v-if="showClose"
+                      @click="closeModal"
+                      data-dismiss="modal"
+                      aria-label="Close">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+            </slot>
+          </div>
+
+          <div class="modal-body" :class="bodyClasses">
+            <slot></slot>
+          </div>
+
+          <div class="modal-footer" :class="footerClasses" v-if="$slots.footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </SlideYUpTransition>
+</template>
+<script>
+import { SlideYUpTransition } from "vue2-transitions";
+
+export default {
+  name: "modal",
+  components: {
+    SlideYUpTransition
+  },
+  props: {
+    show: Boolean,
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    centered: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: "",
+      validator(value) {
+        let acceptedValues = ["", "notice", "mini"];
+        return acceptedValues.indexOf(value) !== -1;
+      },
+      description: 'Modal type (notice|mini|"") '
+    },
+    modalClasses: {
+      type: [Object, String],
+      description: "Modal dialog css classes"
+    },
+    modalContentClasses: {
+      type: [Object, String],
+      description: "Modal dialog content css classes"
+    },
+    gradient: {
+      type: String,
+      description: "Modal gradient type (danger, primary etc)"
+    },
+    headerClasses: {
+      type: [Object, String],
+      description: "Modal Header css classes"
+    },
+    bodyClasses: {
+      type: [Object, String],
+      description: "Modal Body css classes"
+    },
+    footerClasses: {
+      type: [Object, String],
+      description: "Modal Footer css classes"
+    },
+    animationDuration: {
+      type: Number,
+      default: 500,
+      description: "Modal transition duration"
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit("update:show", false);
+      this.$emit("close");
+    }
+  },
+  watch: {
+    show(val) {
+      let documentClasses = document.body.classList;
+      if (val) {
+        documentClasses.add("modal-open");
+      } else {
+        documentClasses.remove("modal-open");
+      }
+    }
+  }
+};
+</script>
+<style>
+.modal.show {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>

src/layout/dashboard/TopNavbar.vue

@@ -27,7 +27,7 @@
       <collapse-transition>
         <div class="collapse navbar-collapse show" v-show="showMenu">
           <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
-            <div class="search-bar input-group">
+            <div class="search-bar input-group" @click="searchModalVisible = true">
               <!-- <input type="text" class="form-control" placeholder="Search...">
               <div class="input-group-addon"><i class="tim-icons icon-zoom-split"></i></div> -->
               <button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal">
@@ -35,6 +35,12 @@
               </button>
               <!-- You can choose types of search input -->
             </div>
+            <modal :show.sync="searchModalVisible"
+                   id="searchModal"
+                   :centered="false"
+                   :show-close="true">
+              <input slot="header" type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
+            </modal>
             <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>
@@ -88,9 +94,12 @@
 </template>
 <script>
   import { CollapseTransition } from 'vue2-transitions';
+  import Modal from '@/components/Modal';
+
   export default {
     components: {
-      CollapseTransition
+      CollapseTransition,
+      Modal
     },
     computed: {
       routeName() {
@@ -104,7 +113,8 @@
     data() {
       return {
         activeNotifications: false,
-        showMenu: false
+        showMenu: false,
+        searchModalVisible: false
       };
     },
     methods: {