beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix broken components & update navbars logo

Browse source
This commit is contained in:
khatabwedaa 2021-05-27 19:53:11 +02:00
parent e1380f6eab
commit 66f31cf875
11 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/Footer.vue Normal file
View file

@ -0,0 +1,9 @@
<template>
<div class="container px-6 mx-auto">
<div class="flex flex-col items-center border-t border-gray-200">
<div class="py-6 text-center">
<p class="text-sm text-gray-600">© {{ (new Date().getFullYear()) }} by Baka Team</p>
</div>
</div>
</div>
</template>

4
components/ui/Cards/Testimonial.vue
View file

@ -1,7 +1,7 @@
<template>
<view-component :name="name" :code="code">
<div class="px-3 pt-16 pb-6" slot="component">
<div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex justify-center -mt-16 md:justify-end">
<img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
</div>
@ -24,7 +24,7 @@
return {
name: 'Testimonial',
code: `
<div class="max-w-md px-8 py-4 mx-auto bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="max-w-md px-8 py-4 mx-auto mt-16 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex justify-center -mt-16 md:justify-end">
<img class="object-cover w-20 h-20 border-2 border-indigo-500 rounded-full dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
</div>

6
components/ui/Heros/ECommerce.vue
View file

@ -6,7 +6,7 @@
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
@ -71,12 +71,12 @@
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
<div class="flex md:hidden">
<button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="w-6 h-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>

4
components/ui/Heros/WithBGImage.vue
View file

@ -7,7 +7,7 @@
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
@ -55,7 +55,7 @@
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

4
components/ui/Heros/WithImage.vue
View file

@ -6,7 +6,7 @@
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -113,7 +113,7 @@
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

4
components/ui/Heros/WithSideImage.vue
View file

@ -6,7 +6,7 @@
<div class="items-center justify-between md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -65,7 +65,7 @@
<div class="items-center justify-between md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

4
components/ui/Navbars/ECommerce.vue
View file

@ -5,7 +5,7 @@
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<div class="flex md:hidden">
@ -52,7 +52,7 @@
<div class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

6
components/ui/Navbars/WithAvatar.vue
View file

@ -6,7 +6,7 @@
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -37,7 +37,7 @@
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
<div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
</div>
<h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
@ -63,7 +63,7 @@
<div class="md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

4
components/ui/Navbars/WithCategories.vue
View file

@ -6,7 +6,7 @@
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen -->
<div class="hidden mx-10 md:block">
@ -109,7 +109,7 @@
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen -->
<div class="hidden mx-10 md:block">

4
components/ui/Navbars/WithSearch.vue
View file

@ -5,7 +5,7 @@
<div class="container px-6 py-3 mx-auto md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
@ -53,7 +53,7 @@
<div class="container px-6 py-3 mx-auto md:flex">
<div class="flex items-center justify-between">
<div>
<a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->

9
pages/index.vue
View file

@ -1,8 +1,9 @@
<template>
<div :class="{ 'dark' : darkMode }">
<div class="bg-white dark:bg-gray-900 font-roboto">
<header-component></header-component>
<main-component></main-component>
<header-component />
<main-component />
<footer-component />
<back-to-top visibleoffset="800">
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 focus:outline-none" aria-label="Back to top">
@ -28,10 +29,11 @@
import AppButton from "~/components/utilities/AppButton.vue";
import HeaderComponent from "~/components/Header";
import MainComponent from "~/components/Main";
import FooterComponent from "~/components/Footer";
import BackToTop from "vue-backtotop";
export default {
components: { AppButton, HeaderComponent, MainComponent, BackToTop },
components: { AppButton, HeaderComponent, MainComponent, FooterComponent, BackToTop },
data() {
return {
@ -42,7 +44,6 @@ export default {
watch: {
darkMode() {
localStorage.setItem("darkMode", this.darkMode);
console.log('Night Mode: ' + this.darkMode);
}
},
};