89 lines
4.9 KiB
Vue
89 lines
4.9 KiB
Vue
<template>
|
|
|
|
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
|
|
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
|
<a href="#" class="flex">
|
|
<svg class="mr-3 h-10" viewBox="0 0 52 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.87695 53H28.7791C41.5357 53 51.877 42.7025 51.877 30H24.9748C12.2182 30 1.87695 40.2975 1.87695 53Z" fill="#76A9FA"/><path d="M0.000409561 32.1646L0.000409561 66.4111C12.8618 66.4111 23.2881 55.9849 23.2881 43.1235L23.2881 8.87689C10.9966 8.98066 1.39567 19.5573 0.000409561 32.1646Z" fill="#A4CAFE"/><path d="M50.877 5H23.9748C11.2182 5 0.876953 15.2975 0.876953 28H27.7791C40.5357 28 50.877 17.7025 50.877 5Z" fill="#1C64F2"/></svg>
|
|
<span class="self-center text-lg font-semibold whitespace-nowrap dark:text-white">Slovník</span>
|
|
</a>
|
|
<div class="flex md:order-2">
|
|
<button data-collapse-toggle="mobile-menu-2" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Preklad</button>
|
|
<button data-collapse-toggle="mobile-menu-4" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">
|
|
<span class="sr-only">Open main menu</span>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
|
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="hidden justify-between items-center w-full md:flex md:w-auto md:order-1" id="mobile-menu-4">
|
|
<div class="pt-2 px-2 relative mx-auto text-gray-600">
|
|
<input class="w-full border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
|
|
type="search" name="search" placeholder="Výraz">
|
|
<button type="submit" class="absolute right-0 top-0 mt-5 mr-4">
|
|
<svg class="text-gray-600 h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
|
|
viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve"
|
|
width="512px" height="512px">
|
|
<path
|
|
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<ul class="px-2 flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
|
<vue-tabz
|
|
:data="['Jednoduchý', 'Výslovnosť', 'Písmená' ]"
|
|
@clickedTab="tabsHandler"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class=" lg:flex lg:flex-row bg-green-100 sm:flex-none">
|
|
<div id="mobile-menu-2" class="bg-yellow-100 md:text-lg flex flex-col w-full px-4 border-b lg:border-r lg:h-fit lg:w-64 ">
|
|
<left-dict :data="trData"></left-dict>
|
|
</div>
|
|
<div class=" flex flex-col w-full px-4" >
|
|
<translation-content :data="termsData" :type="currentIndex"> </translation-content>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import vueTabz from './components/vue-tabz.vue'
|
|
import logoUrl from './assets/logo.png'
|
|
import trData from './components/Translations'
|
|
import termsData from './components/Terms'
|
|
import LeftDict from './components/LeftDict.vue'
|
|
import SearchForm from './components/SearchForm.vue'
|
|
import TranslationContent from './components/Translation.vue'
|
|
import Translation from './components/Translation.vue'
|
|
|
|
|
|
console.log(trData);
|
|
console.log(logoUrl);
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
components: { LeftDict, SearchForm, Translation },
|
|
name: 'vue-tabz',
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
currentTab: '',
|
|
};
|
|
},
|
|
methods: {
|
|
tabsHandler(data) {
|
|
this.currentIndex = data.index;
|
|
this.currentTab = data.tab;
|
|
console.log(data.index);
|
|
console.log(data.tab);
|
|
},
|
|
},
|
|
};
|
|
|
|
</script>
|
|
|