9 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 // Menu (top of page):
11 // Left: hall, variants, mygames, forum (ext. link)
12 // Right: usermenu, settings, flag
14 label.drawer-toggle(for="drawerControl")
15 input#drawerControl.drawer(type="checkbox")
16 #menuBar(@click="hideDrawer")
17 label.drawer-close(for="drawerControl")
21 router-link(to="/variants")
22 | {{ st.tr["Variants"] }}
23 router-link(to="/mygames")
24 | {{ st.tr["My games"] }}
25 a(href="https://forum.vchess.club")
26 | {{ st.tr["Forum"] }}
28 .clickable(onClick="doClick('modalUser')")
29 | {{ st.user.id > 0 ? "Update" : "Login" }}
30 .clickable(onClick="doClick('modalSettings')")
31 | {{ st.tr["Settings"] }}
32 .clickable#flagContainer(onClick="doClick('modalLang')")
33 img(v-if="!!st.lang" :src="flagImage")
36 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
38 router-link.menuitem(to="/about") {{ st.tr["About"] }}
39 p.clickable(onClick="doClick('modalContact')")
40 | {{ st.tr["Contact"] }}
41 // TODO: add only the necessary icons to mini-css custom build
42 //script(src="//unpkg.com/feather-icons")
46 // See https://stackoverflow.com/a/35417159
47 import ContactForm from "@/components/ContactForm.vue";
48 import Language from "@/components/Language.vue";
49 import Settings from "@/components/Settings.vue";
50 import UpsertUser from "@/components/UpsertUser.vue";
51 import { store } from "./store.js";
65 flagImage: function() {
66 return `/images/flags/${this.st.lang}.svg`;
70 hideDrawer: function(e) {
71 if (e.target.innerText == "Forum")
72 return; //external link
73 e.preventDefault(); //TODO: why is this needed?
74 document.getElementsByClassName("drawer")[0].checked = false;
82 font-family: "Avenir", Helvetica, Arial, sans-serif
83 -webkit-font-smoothing: antialiased
84 -moz-osx-font-smoothing: grayscale
87 @media screen and (max-width: 767px)
100 justify-content: center
121 justify-content: flex-start
123 display: inline-block
125 &.router-link-exact-active
132 justify-content: flex-end
134 display: inline-block
142 [type="checkbox"].drawer+*
150 //background-color: #000033
157 justify-content: center
159 display: inline-block
164 text-decoration: none
166 display: inline-block