<template>
  <div>

<div class="header bottomShadow">
	<div class="content pageWidth">
		<div class="top">
			<div class="content bread">
				<table><tbody><tr><td class="contact contactLinks">
					<img src="../assets/img/svg/mobile.svg" class="inlineTextIcon inlineTextPhoneIcon"><span>
						<a href="tel:13817819452">13817819452</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../assets/img/svg/airplane.svg" class="inlineTextIcon">
						<span><a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a></span>
				</td><td class="searchContainer desktop">
					<input type="text" class="search" placeholder="Sök" style="margin-left:1em;width:10em">
				</td></tr></tbody></table>
			</div>
		</div>
		<!-- BOTTOM - DESKTOP -->
		<div class="bottom desktop">
			<table>
				<tbody>
					<tr>
						<td class="logoCell">
							<img class="logo" src="../assets/img/logo.png">
						</td>
						<td class="mainMenuCell">
							<table class="mainMenu">
								<tbody>
									<tr>
										<td  class="h2" v-for="menu in menus" :key="menu.name" >
 											<router-link :to="menu.url">
												 {{menu.name}}
												 <span v-if="menu.child.length>0" class="downCaret"></span>
											 </router-link>
											<div class="dropDown bottomShadowSegment" v-if="menu.child.length>0"   >
											 	<router-link :to="sonMenu.url" v-for="sonMenu in   menu.child" :key="sonMenu.name">{{sonMenu.name}}</router-link>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- END BOTTOM - DESKTOP -->

		<div class="bottom headerBottom mobile">
			<table>
				<tbody>
					<tr>
						<td class="logoCell">
							<img class="logo" src="../assets/img/bimwe_logo.png">
						</td>
						<td class="mobileIconsCell">
							<!-- <img src="../assets/img/svg/ic_search.svg" /> -->
							<img src="../assets/img/svg/ic_hamburger.svg" id="hamburger">
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div id="mobileMenu" class="headerMobileMenu bread">
	<div class="menuDummy"></div><div class="menuContent">
		<ul>
			<li v-for="menu in menus" :key="menu.name" >
					<router-link class="hasSubmenu" :to="menu.url">{{menu.name}}</router-link>
				<ul class="subMenu" v-if="menu.child.length>0"  >
					<li v-for="sonMenu in   menu.child" :key="sonMenu.name" >
						<router-link class="hasSubmenu" :to="sonMenu.url">{{sonMenu.name}}</router-link>
					</li>
				</ul>
			</li>
		
		</ul>
		<div class="goBack">
			<!-- <a href="javascript:history.back()" class="flexVerticalCenter"> -->
				<a href="#" class="linkGoBack flexVerticalCenter">
					<img src="../assets/img/svg/ic_arrow_back.svg" alt="Tillbaka">
					<span>Tillbaka</span>
				</a>		
		</div>
	</div>	
</div>
</div>
  </div>
 </template>
<script>
export default {
  data() {
    return {
      menus: window.config.menus
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
