Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 14:43:23 +00:00
Code Issues Projects Releases Wiki Activity

Add all navbars components

Browse Source
This commit is contained in:
khatabwedaa
2020-05-07 16:25:22 +02:00
parent b1fa3f3906
commit dd9fd501ba
4 changed files with 95 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Models/data.js
View File

@@ -38,13 +38,13 @@ export default [
{ name: 'Hero With Pattern' },
],
},
// {
// name: 'Navigation',
// components: [
// { name: 'Navbar With Search' },
// { name: 'Footer With Subscribe Form' },
// ]
// },
{
name: 'Navbars',
components: [
{ name: 'Navbar' },
{ name: 'Navbar With Search' },
]
},
// {
// name: 'Sections',
// components: [

11
src/components/Master.vue
View File

@@ -63,11 +63,9 @@
// Heroes
import HeroWithImage from "./UI/Heroes/HeroWithImage";
import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
// import NavbarWithSearch from "./UI/Navigation/NavbarWithSearch";
// import FooterWithSubscribeForm from "./UI/Navigation/FooterWithSubscribeForm";
// import SimplePagination from "./UI/Paginations/SimplePagination";
// import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
// Navbar
import Navbar from "./UI/Navbars/Navbar";
import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
import Component from "../Models/Component";
import ViewComponent from "./Utilities/ViewComponent";
@@ -96,6 +94,9 @@
HeroWithImage,
HeroWithPattern,
Navbar,
NavbarWithSearch,
ViewComponent,
},
data() {

39
src/components/UI/Navbars/Navbar.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div :id="name | toId">
<nav class="bg-white shadow-md">
<div class="container py-3 px-6 mx-auto">
<div class="md:flex justify-between items-center">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
</div>
<div class="md:hidden">
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path 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"/>
</svg>
</button>
</div>
</div>
<div class="flex flex-col mt-3 md:flex-row md:mt-0">
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Home</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">Contact</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4" href="#">About Us</a>
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Navbar'
}
}
}
</script>

43
src/components/UI/Navbars/NavbarWithSearch.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div :id="name | toId">
<nav class="bg-white shadow-md">
<div class="container mx-auto px-6 py-3 md:flex">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl" href="#">Brand</a>
</div>
<div class="md:hidden">
<button type="button" class="block text-gray-800 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<path 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"/>
</svg>
</button>
</div>
</div>
<div class="w-full md:flex md:items-center md:justify-between">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div>
<div>
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search">
</div>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Navbar With Search'
}
}
}
</script>