Init

src/scripts/App.vue

@@ -0,0 +1,70 @@
+<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 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">Get started</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">
+    <ul class="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>
+
+
+     
+           <left-dict :data="trData"></left-dict>
+     
+
+    
+</template>
+
+<script setup>
+import vueTabz from './components/vue-tabz.vue'
+import logoUrl from './assets/logo.png'
+import trData from './components/Translatios'
+import LeftDict from './components/LeftDict.vue'
+import SearchFrom from './components/SearchForm.vue'
+import SearchForm from './components/SearchForm.vue'
+
+console.log(trData);
+console.log(logoUrl);
+</script>
+
+<script>
+export default {
+  components: { LeftDict, SearchForm },
+  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>
+

src/scripts/components/HelloWorld.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>

src/scripts/components/LeftDict.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  props: ['data']
+}
+</script>
+
+<template>
+<div class="min-h-screen flex flex-row bg-gray-100 ">
+  <div class="bg-white overflow-hidden flex flex-col w-full px-4 py-8  border-b lg:border-r lg:h-screen lg:w-64">
+    <div class="flex items-center justify-center h-20 shadow-md">
+      <h1 class="text-3xl uppercase text-indigo-500">Preklad</h1>
+    </div>
+    <ul class="flex flex-col py-4">
+      <li v-for="(t, i) in data.translations" :key="i"> 
+        <a href="#" class="flex flex-row items-center h-12 transform hover:translate-x-2 transition-transform ease-in duration-200 text-gray-500 hover:text-gray-800">
+          <span class="inline-flex items-center justify-center h-12 w-12 text-lg text-gray-400"><i class="bx bx-home"></i></span>
+          <span class="text-sm font-medium">{{ t.lang }}</span>
+        </a>
+      </li>
+      
+    </ul>
+  </div>
+   <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
+        Content...<!-- content area -->
+  </main>
+</div>
+
+
+</template>

src/scripts/components/SearchForm.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+  props: ['data']
+}
+</script>
+
+<template>
+<div class="w-full max-w-xs">
+  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+   <div class="grid grid-cols-3 gap-3">
+    <div class="mb-4">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+        Slovo
+      </label>
+      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="term" type="text" placeholder="slovo">
+    </div>
+    <div class="mb-6">
+      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+        Slovnik
+      </label>
+      <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
+    </div>
+    <div class="mt-7">
+      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
+        Hľadaj
+      </button>
+    </div>
+   </div>
+  </form>
+</div>
+</template>

src/scripts/components/Translatios.js

@@ -0,0 +1,4 @@
+export default {
+   translations: 
+      {"1":{"slug":"anglicko-slovensky","lang":"Anglicko-Slovenský","t":{}},"2":{"slug":"slovensko-anglicky","lang":"Slovensko-Anglický","t":{}},"3":{"slug":"holandsko-cesky","lang":"Holandsko-Český","t":{}},"4":{"slug":"cesko-holandsky","lang":"Česko-Holandský","t":{}},"5":{"slug":"francuzsko-slovensky","lang":"Francúzsko-Slovenský","t":{}},"6":{"slug":"slovensko-francuzsky","lang":"Slovensko-Francúzsky","t":{}},"7":{"slug":"nemecko-slovensky","lang":"Nemecko-Slovenský","t":{}},"8":{"slug":"slovensko-nemecky","lang":"Slovensko-Nemecký","t":{}},"9":{"slug":"taliansko-slovensky","lang":"Taliansko-Slovenský","t":{}},"10":{"slug":"slovensko-taliansky","lang":"Slovensko-Taliansky","t":{}},"11":{"slug":"latinsko-cesky","lang":"Latinsko-Český","t":{}},"12":{"slug":"cesko-latinsky","lang":"Česko-Latinský","t":{}},"13":{"slug":"madarsko-slovensky","lang":"Maďarsko-Slovenský","t":{}},"14":{"slug":"slovensko-madarsky","lang":"Slovensko-Maďarský","t":{}},"15":{"slug":"polsko-cesky","lang":"Poľsko-Český","t":{}},"16":{"slug":"cesko-polsky","lang":"Česko-Poľský","t":{}},"17":{"slug":"portugalsko-cesky","lang":"Portugalsko-Český","t":{}},"18":{"slug":"cesko-portugalsky","lang":"Česko-Portugalský","t":{}},"19":{"slug":"rusko-slovensky","lang":"Rusko-Slovenský","t":{}},"20":{"slug":"slovensko-rusky","lang":"Slovensko-Ruský","t":{}},"21":{"slug":"slovensko-slovensky","lang":"Slovensko-Slovenský","t":{}},"22":{"slug":"slovensko-slovensky","lang":"Slovensko-Slovenský","t":{}},"23":{"slug":"spanielsko-slovensky","lang":"Španielsko-Slovenský","t":{}},"24":{"slug":"slovensko-spanielsky","lang":"Slovensko-Španielsky","t":{}},"25":{"slug":"svedsko-cesky","lang":"Švédsko-Český","t":{}},"26":{"slug":"cesko-svedsky","lang":"Česko-Švédsky","t":{}}},
+}

src/scripts/components/vue-tabz.vue

@@ -0,0 +1,58 @@
+<template>
+<li v-for="(tabData, i) in data"
+   :key="tabData"
+   @click="changeIndex(i)"
+>
+  <a v-if="currentIndex === i" href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"> {{ tabData }} </a>
+  <a v-else href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"> {{ tabData }} </a>
+</li>	
+</template>
+
+<script>
+export default {
+  name: 'vue-tabz',
+   emits: ["clickedTab"],
+  data() {
+    return {
+      currentIndex: 0,
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    mainColor: {
+      type: String,
+      default: "",
+    },
+    maxWidth: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    cssVars() {
+      return {
+        "--main-color": `#${this.mainColor.replace('#', '')}`,
+        "--max-width": `${parseInt(this.maxWidth, 10)}px`,
+      };
+    },
+  },
+  methods: {
+    /**
+     * Change current index based on tab index
+     *
+     * @param {Number} index tab index
+     * @return void
+     */
+    changeIndex(index) {
+      this.currentIndex = index;
+      this.$emit("clickedTab", {
+        index,
+        tab: this.data[index],
+      });
+    },
+  },
+};
+</script>

src/scripts/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/scripts/main.js

@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+import { Application, Controller } from '@hotwired/stimulus'
+import "@hotwired/turbo"
+import 'flowbite';
+
+
+const LibStimulus = new Application(document.documentElement)
+
+LibStimulus.start()
+
+LibStimulus.register('body', class extends Controller {
+  connect() {
+    console.log('Hello stimulus')
+  }
+})
+
+createApp(App).mount('#app')
+

src/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;