Basics

src/scripts/App.vue

@@ -7,7 +7,7 @@
       <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-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>
@@ -16,7 +16,20 @@
   </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">
+    <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"
@@ -25,21 +38,14 @@
   </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 trData from './components/Translations'
 import LeftDict from './components/LeftDict.vue'
-import SearchFrom from './components/SearchForm.vue'
 import SearchForm from './components/SearchForm.vue'
 
 console.log(trData);

src/scripts/components/LeftDict.vue

@@ -5,11 +5,9 @@ export default {
 </script>
 
 <template>
-<div class="min-h-screen flex flex-row bg-gray-100 ">
+<div id="mobile-menu-2" class="min-h-screen flex flex-row bg-green-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="bg-white overflow-hidden flex flex-col w-full px-4 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">
@@ -20,9 +18,6 @@ export default {
       
     </ul>
   </div>
-   <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
-        Content...<!-- content area -->
-  </main>
 </div>