1
+ <div class =" AppHeader" >
2
+ <div class =" bg-blue-dark border-t-8 border-green" >
3
+ <div class =" container flex items-center flex-wrap px-4 py-1 mx-auto" >
4
+ <a href =" /" class =" w-1/4 flex-1" >
5
+ <div class =" relative w-16 h-16" >
6
+ <img class =" w-16 h-16 absolute pin"
7
+ src =" https://art.nativescript-vue.org/NativeScript-Vue-White-Green.svg"
8
+ alt =" NativeScript-Vue Logo" >
9
+ <img class =" w-16 h-16 absolute pin transition-all-ease hover:opacity-0"
10
+ src =" https://art.nativescript-vue.org/NativeScript-Vue-Green-White.svg"
11
+ alt =" NativeScript-Vue Logo" >
12
+ </div >
13
+ </a >
14
+ <div class =" w-auto text-center relative" >
15
+ <input class =" w-full md:w-48 px-4 py-2 text-blue-lightest bg-blue-light rounded-full"
16
+ type =" search"
17
+ placeholder =" Search coming soon."
18
+ disabled
19
+ >
20
+
21
+ <div class =" hidden absolute ml-2 mt-2" >
22
+ <div class =" border bg-white rounded shadow w-48" ></div >
23
+ </div >
24
+ </div >
25
+
26
+ <!-- Bars-->
27
+ <div class =" ml-4 md:hidden text-right" @click =" navOpen = !navOpen" >
28
+ <div class =" inline-block" >
29
+ <div class =" w-6 h-2px bg-white mb-1" ></div >
30
+ <div class =" w-6 h-2px bg-white mb-1" ></div >
31
+ <div class =" w-6 h-2px bg-white" ></div >
32
+ </div >
33
+ </div >
34
+
35
+ <!-- Nav-->
36
+ <div :class =" { hidden: isMobile && !navOpen, flex: isMobile && navOpen }"
37
+ class =" flex-col md:flex-row w-full md:w-auto" >
38
+ <a href =" #" class =" no-underline text-blue-lightest md:ml-6 mr-4 py-4" >Quick Start</a >
39
+ <a href =" #" class =" no-underline text-blue-lightest mr-4 py-4" >Guides</a >
40
+ <a href =" #" class =" no-underline text-blue-lightest mr-4 py-4" >API</a >
41
+ <div class =" inline text-blue-lightest mr-4 py-4 relative group" >
42
+ Community
43
+
44
+ <div class =" pl-4 mt-3 md:pl-0 md:hidden group-hover:block hover:block md:absolute md:bg-white md:border md:shadow md:rounded md:pin-r" >
45
+ <div class =" flex flex-col" >
46
+ <a href =" #" class =" no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" >GitHub</a >
47
+ <a href =" #" class =" no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" >Slack</a >
48
+ </div >
49
+ </div >
50
+ </div >
51
+ <div class =" inline text-blue-lightest py-4 relative group" >
52
+ <svg class="w-4 h-4 fill-current -mb-px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M20,10c0,-5.532 -4.488,-10 -10,-10c-5.509,0 -10,4.465 -10,10c0,5.522 4.477,10 10,10c5.52,0 10,-4.475 10,-10Zm-1.678,2.581l-4.01,0c0.277,-1.73 0.266,-3.497 0.002,-5.162l4.008,0c0.517,1.67 0.517,3.492 0,5.162Zm-8.322,6.064c-1.239,-1.118 -2.183,-2.803 -2.72,-4.774l5.44,0c-0.537,1.971 -1.481,3.656 -2.72,4.774Zm-3.006,-6.064c-0.29,-1.669 -0.297,-3.449 0.001,-5.162l6.01,0c0.298,1.712 0.291,3.492 0.001,5.162l-6.012,0Zm3.006,-11.225c1.353,1.221 2.24,3.022 2.718,4.773l-5.436,0c0.48,-1.76 1.37,-3.556 2.718,-4.773Zm7.804,4.773l-3.75,0c-0.441,-1.78 -1.184,-3.375 -2.173,-4.635c2.588,0.569 4.762,2.295 5.923,4.635Zm-9.685,-4.635c-0.989,1.26 -1.732,2.855 -2.173,4.635l-3.75,0c1.161,-2.34 3.335,-4.066 5.923,-4.635Zm-6.441,5.925l4.008,0c-0.264,1.665 -0.275,3.432 0.002,5.162l-4.01,0c-0.517,-1.67 -0.517,-3.492 0,-5.162Zm0.518,6.452l3.755,0c0.443,1.781 1.188,3.38 2.17,4.636c-2.602,-0.572 -4.77,-2.308 -5.925,-4.636Zm9.683,4.636c0.982,-1.256 1.727,-2.855 2.17,-4.636l3.755,0c-1.157,2.332 -3.327,4.065 -5.925,4.636Z" style="fill-rule:nonzero;"/></svg>
53
+ <span class =" md:hidden" >Language</span >
54
+
55
+ <div class =" pl-4 mt-3 md:pl-0 md:hidden group-hover:block hover:block md:absolute md:bg-white md:border md:shadow md:rounded md:pin-r" >
56
+ <div class =" flex flex-col" >
57
+ <a href =" #" class =" no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" @click.prevent =" switchLang('en')" >en</a >
58
+ <a href =" #" class =" no-underline text-blue-lightest md:text-blue-dark hover:bg-green hover:text-white px-4 py-2" @click.prevent =" switchLang('hu')" >hu</a >
59
+ </div >
60
+ </div >
61
+ </div >
62
+ </div >
63
+ </div >
64
+ </div >
65
+
66
+ <!-- Mobile Docs Nav-->
67
+ <!-- <div class="bg-grey-lighter md:hidden">-->
68
+ <!-- <div class="container mx-auto p-4">-->
69
+ <!-- <select class="w-full p-2">-->
70
+ <!-- <!–<option v-for="item in flat_toc" :key="item.name" :value="item.path">{{ item.name }}</option>–>-->
71
+ <!-- </select>-->
72
+ <!-- </div>-->
73
+ <!-- </div>-->
74
+ </div >