From 91b1cf7cdaf29df11c2e6e3f2950f13f26623bab Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Wed, 9 Sep 2020 23:00:52 +0200
Subject: [PATCH] Add new components

---
 src/components/Main.vue                      |  20 ++-
 src/components/ui/Buttons/Primary.vue        |  23 +++
 src/components/ui/Buttons/WithIcon.vue       |  29 ++++
 src/components/ui/Buttons/WithMenu.vue       |  58 +++++++
 src/components/ui/Dropdowns/Notification.vue |  96 +++++++++++
 src/components/ui/Dropdowns/Simple.vue       |  72 ++++++++
 src/components/ui/Heros/WithBGImage.vue      |  94 +++++++++++
 src/components/ui/Navbars/WithCategories.vue | 169 +++++++++++++++++++
 src/components/utilities/ViewComponent.vue   |   2 +-
 src/models/Components.js                     |  14 ++
 10 files changed, 572 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ui/Buttons/Primary.vue
 create mode 100644 src/components/ui/Buttons/WithIcon.vue
 create mode 100644 src/components/ui/Buttons/WithMenu.vue
 create mode 100644 src/components/ui/Dropdowns/Notification.vue
 create mode 100644 src/components/ui/Dropdowns/Simple.vue
 create mode 100644 src/components/ui/Heros/WithBGImage.vue
 create mode 100644 src/components/ui/Navbars/WithCategories.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 922484b..ef9eb1e 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -41,6 +41,10 @@ import AlertsErrorFullWidth from "./ui/Alerts/ErrorFullWidth";
 // Authentication
 import AuthenticationSimpleLogin from "./ui/Authentication/SimpleLogin";
 import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
+// Buttons
+import ButtonsPrimary from "./ui/Buttons/Primary";
+import ButtonsWithIcon from "./ui/Buttons/WithIcon";
+import ButtonsWithMenu from "./ui/Buttons/WithMenu";
 // Cards
 import CardsArticle from "./ui/Cards/Article";
 import CardsArticleWithImage from "./ui/Cards/ArticleWithImage";
@@ -51,16 +55,21 @@ import CardsSimpleProduct from "./ui/Cards/SimpleProduct";
 import CardsTestimonial from "./ui/Cards/Testimonial";
 import CardsUser from "./ui/Cards/User";
 import CardsUserWithDetails from "./ui/Cards/UserWithDetails";
+// Dropdowns
+import DropdownsSimple from "./ui/Dropdowns/Simple";
+import DropdownsNotification from "./ui/Dropdowns/Notification";
 // Forms
 import FormsNewsletter from "./ui/Forms/Newsletter";
 import FormsSimple from "./ui/Forms/Simple";
 // Navbars
 import NavbarsECommerce from "./ui/Navbars/ECommerce";
 import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
+import NavbarsWithCategories from "./ui/Navbars/WithCategories";
 import NavbarsWithSearch from "./ui/Navbars/WithSearch";
 // Heros
 import HerosECommerce from "./ui/Heros/ECommerce";
 import HerosWithImage from "./ui/Heros/WithImage";
+import HerosWithBGImage from "./ui/Heros/WithBGImage";
 import HerosWithPattern from "./ui/Heros/WithPattern";
 // Sections
 import SectionsAboutMe from "./ui/Sections/AboutMe";
@@ -74,10 +83,6 @@ import FootersSimple from "./ui/Footers/Simple";
 import FootersWithDetails from "./ui/Footers/WithDetails";
 import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
 
-
-
-
-
 import Component from "../models/ComponentsFilter";
 
 export default {
@@ -93,6 +98,9 @@ export default {
         AlertsErrorFullWidth,
         AuthenticationSimpleLogin,
         AuthenticationLoginWithSideImage,
+        ButtonsPrimary,
+        ButtonsWithIcon,
+        ButtonsWithMenu,
         CardsArticle,
         CardsArticleWithImage,
         CardsArticleWithSMIcons,
@@ -102,13 +110,17 @@ export default {
         CardsTestimonial,
         CardsUser,
         CardsUserWithDetails,
+        DropdownsSimple,
+        DropdownsNotification,
         FormsNewsletter,
         FormsSimple,
         NavbarsECommerce,
         NavbarsWithAvatar,
+        NavbarsWithCategories,
         NavbarsWithSearch,
         HerosECommerce,
         HerosWithImage,
+        HerosWithBGImage,
         HerosWithPattern,
         SectionsAboutMe,
         SectionsFeature,
diff --git a/src/components/ui/Buttons/Primary.vue b/src/components/ui/Buttons/Primary.vue
new file mode 100644
index 0000000..6b9ef89
--- /dev/null
+++ b/src/components/ui/Buttons/Primary.vue
@@ -0,0 +1,23 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-8 flex items-center justify-center" slot="component">
+            <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                Primary
+            </button>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Primary',
+                code: `
+        <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+            Primary
+        </button>`
+            }
+        }
+    }
+</script>
diff --git a/src/components/ui/Buttons/WithIcon.vue b/src/components/ui/Buttons/WithIcon.vue
new file mode 100644
index 0000000..5290ccd
--- /dev/null
+++ b/src/components/ui/Buttons/WithIcon.vue
@@ -0,0 +1,29 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6 flex items-center justify-center" slot="component">
+            <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+                </svg>
+                <span class="mx-1">Refresh</span>
+            </button>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Icon',
+                code: `
+        <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+            <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
+            </svg>
+            <span class="mx-1">Refresh</span>
+        </button>`
+            }
+        }
+    }
+</script>
diff --git a/src/components/ui/Buttons/WithMenu.vue b/src/components/ui/Buttons/WithMenu.vue
new file mode 100644
index 0000000..8668f2d
--- /dev/null
+++ b/src/components/ui/Buttons/WithMenu.vue
@@ -0,0 +1,58 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pt-6 pb-40 flex justify-center" slot="component">
+            <div class="flex items-center">
+                <button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
+                
+                <span class="border"></span>
+
+                <div class="relative">
+                    <button @click="menuOpen = !menuOpen" class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+                        </svg>
+                    </button>
+
+                    <div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Menu',
+                code: `
+        <div class="flex items-center">
+            <button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
+            
+            <span class="border"></span>
+
+            <div class="relative">
+                <!-- Menu toggle button --> 
+                <button class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
+                    </svg>
+                </button>
+
+                <!-- Menu list -->
+                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
+                </div>
+            </div>
+        </div>`,
+            menuOpen: true
+            }
+        }
+    }
+</script>
diff --git a/src/components/ui/Dropdowns/Notification.vue b/src/components/ui/Dropdowns/Notification.vue
new file mode 100644
index 0000000..5103bce
--- /dev/null
+++ b/src/components/ui/Dropdowns/Notification.vue
@@ -0,0 +1,96 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component">
+            <div class="relative">
+                <!-- Dropdown toggle button -->
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
+                    <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+                    </svg>
+                </button>
+
+                <!-- Dropdown menu -->
+                <div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
+                    <div class="py-2">
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                            <p class="text-gray-600 text-sm mx-2">
+                                <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
+                            </p>
+                        </a>
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                            <p class="text-gray-600 text-sm mx-2">
+                                <span class="font-bold" href="#">Slick Net</span> start following you . 45m
+                            </p>
+                        </a>
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                            <p class="text-gray-600 text-sm mx-2">
+                                <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
+                            </p>
+                        </a>
+                        <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
+                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
+                            <p class="text-gray-600 text-sm mx-2">
+                                <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
+                            </p>
+                        </a>
+                    </div>
+                    <a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Notification',
+                code: `
+        <div class="relative">
+            <!-- Dropdown toggle button -->
+            <button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
+                <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
+                </svg>
+            </button>
+
+            <!-- Dropdown menu -->
+            <div class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
+                <div class="py-2">
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                        <p class="text-gray-600 text-sm mx-2">
+                            <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
+                        </p>
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                        <p class="text-gray-600 text-sm mx-2">
+                            <span class="font-bold" href="#">Slick Net</span> start following you . 45m
+                        </p>
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                        <p class="text-gray-600 text-sm mx-2">
+                            <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
+                        </p>
+                    </a>
+                    <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
+                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
+                        <p class="text-gray-600 text-sm mx-2">
+                            <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
+                        </p>
+                    </a>
+                </div>
+                <a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
+            </div>
+        </div>`,
+                dropdownOpen: true
+            }
+        }
+    }
+</script>
diff --git a/src/components/ui/Dropdowns/Simple.vue b/src/components/ui/Dropdowns/Simple.vue
new file mode 100644
index 0000000..bc1cfe0
--- /dev/null
+++ b/src/components/ui/Dropdowns/Simple.vue
@@ -0,0 +1,72 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component">
+            <div class="relative">
+                <!-- Dropdown toggle button -->
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
+                    <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                    </svg>
+                </button>
+
+                <!-- Dropdown menu -->
+                <div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                        your profile
+                    </a>
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                        Your projects
+                    </a>
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                        Help
+                    </a>
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                        Settings
+                    </a>
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                        Sign Out
+                    </a>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple',
+                code: `
+        <div class="relative">
+            <!-- Dropdown toggle button -->
+            <button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
+                <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </button>
+
+            <!-- Dropdown menu -->
+            <div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    your profile
+                </a>
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    Your projects
+                </a>
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    Help
+                </a>
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    Settings
+                </a>
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    Sign Out
+                </a>
+            </div>
+        </div>`,
+                dropdownOpen: true
+            }
+        }
+    }
+</script>
diff --git a/src/components/ui/Heros/WithBGImage.vue b/src/components/ui/Heros/WithBGImage.vue
new file mode 100644
index 0000000..1bdc9e5
--- /dev/null
+++ b/src/components/ui/Heros/WithBGImage.vue
@@ -0,0 +1,94 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <header>
+                <nav class="bg-white shadow">
+                    <div class="container mx-auto px-6 py-3 ">
+                        <div class="md:flex md:items-center md:justify-between">
+                            <div class="flex justify-between items-center">
+                                <div class="text-xl font-semibold text-gray-700">
+                                    <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                                </div>
+
+                                <div @click="isOpen = !isOpen" class="flex md:hidden">
+                                    <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                        <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                            <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+
+                <div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+                    <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
+                        <div class="text-center">
+                            <h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
+                            <button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Background Image',
+                isOpen: false,
+                code: `
+        <header>
+            <nav class="bg-white shadow">
+                <div class="container mx-auto px-6 py-3 ">
+                    <div class="md:flex md:items-center md:justify-between">
+                        <div class="flex justify-between items-center">
+                            <div class="text-xl font-semibold text-gray-700">
+                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                            </div>
+
+                            <!-- Mobile menu button -->
+                            <div class="flex md:hidden">
+                                <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                        <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                        <div class="hidden -mx-4 md:flex md:items-center">
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            <div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+                <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
+                    <div class="text-center">
+                        <h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
+                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                    </div>
+                </div>
+            </div>
+        </header>`,
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
new file mode 100644
index 0000000..9a76abb
--- /dev/null
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -0,0 +1,169 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <nav class="bg-white shadow">
+                <div class="container mx-auto px-6 py-3">
+                    <div class="flex flex-col md:flex-row md:justify-between md:items-center">
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center">
+                                <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+
+                                <!-- Search input on desktop screen -->
+                                <div class="mx-10 hidden md:block">
+                                    <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
+                                </div>
+                            </div>
+
+                            <!-- Mobile menu button -->
+                            <div class="flex md:hidden">
+                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                        <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                        <div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'">
+                            <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
+                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                            </div>
+
+                            <div class="flex items-center py-2 -mx-1 md:mx-0">
+                                <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                                <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                            </div>
+
+                            <!-- Search input on mobile screen -->
+                            <div class="mt-3 md:hidden">
+                                <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
+                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Categories',
+                isOpen: false,
+                code: `
+        <!-- Require css -->
+        <style>
+        .scroll-hidden::-webkit-scrollbar {
+            height: 0px;
+            background: transparent; /* make scrollbar transparent */
+        }
+        </style>
+
+        <nav class="bg-white shadow">
+            <div class="container mx-auto px-6 py-3">
+                <div class="flex flex-col md:flex-row md:justify-between md:items-center">
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+
+                            <!-- Search input on desktop screen -->
+                            <div class="mx-10 hidden md:block">
+                                <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
+                            </div>
+                        </div>
+
+                        <!-- Mobile menu button -->
+                        <div class="flex md:hidden">
+                            <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                    <div class="hidden md:flex items-center">
+                        <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
+                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                        </div>
+
+                        <div class="flex items-center py-2 -mx-1 md:mx-0">
+                            <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                            <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                        </div>
+
+                        <!-- Search input on mobile screen -->
+                        <div class="mt-3 md:hidden">
+                            <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
+                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                </div>
+            </div>
+        </nav>`,
+            }
+        }
+    }
+</script>
+
+<style>
+    .scroll-hidden::-webkit-scrollbar {
+        height: 0px;
+        background: transparent; /* make scrollbar transparent */
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/utilities/ViewComponent.vue b/src/components/utilities/ViewComponent.vue
index 0dbf4e9..9828a3a 100644
--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -35,7 +35,7 @@
 
                 <transition name="fade">
                     <div v-if="copied">
-                        <div class="w-full h-full absolute top-0 left-0 z-10">
+                        <div class="w-full h-full absolute top-0 left-0 z-50">
                             <div class="bg-gray-300 h-full flex items-center justify-center">
                                 <p class="text-gray-700 text-2xl">Copied!</p>
                             </div>
diff --git a/src/models/Components.js b/src/models/Components.js
index 7f8b2f4..cc54883 100644
--- a/src/models/Components.js
+++ b/src/models/Components.js
@@ -17,6 +17,14 @@ export default [
         name: "Authentication",
         components: [{ name: "SimpleLogin" }, { name: "LoginWithSideImage" }],
     },
+    {
+        name: 'Buttons',
+        components: [
+            { name: "Primary" },
+            { name: "WithIcon" },
+            { name: "WithMenu" }
+        ]
+    },
     {
         name: "Cards",
         components: [
@@ -35,12 +43,17 @@ export default [
         name: "Forms",
         components: [{ name: "Simple" }, { name: "Newsletter" }],
     },
+    {
+        name: "Dropdowns",
+        components: [{ name: "Simple" }, { name: "Notification" }],
+    },
     {
         name: "Navbars",
         components: [
             { name: "ECommerce" },
             { name: "WithSearch" },
             { name: "WithAvatar" },
+            { name: "WithCategories" },
         ],
     },
     {
@@ -48,6 +61,7 @@ export default [
         components: [
             { name: "ECommerce" },
             { name: "WithImage" },
+            { name: "WithBGImage" },
             { name: "WithPattern" },
         ],
     },