add header and lang switcher

resources/client/components/header.vue

@@ -1,10 +1,10 @@
 <template>
 	<header class="header">
 		<div class="container-fluid">
-			<nav class="row">
-				<div class="col-12">
+			<nav class="row align-items-center">
+				<div class="col-7 links">
 					<div class="container-fluid">
-						<ul class="row">
+						<ul class="row align-items-center">
 							<nuxt-link :to="staticData.home.url" tag="li" exact class="col">
 								<a class="logo">
 									<logo/>
@@ -25,11 +25,26 @@
 							<nuxt-link :to="staticData.contact.url" tag="li" exact class="col">
 								<a>{{staticData.contact.title}}</a>
 							</nuxt-link>
+						</ul>
+					</div>
+				</div>
+				<div class="col-5 lag-switcher">
+					<div class="container-fluid">
+						<ul class="row flex-row-reverse align-items-center">
 							<li>
-								<select name="" id="">
-									<option value="fa" selected>فا</option>
-									<option value="en" selected>EN</option>
-								</select>
+								<div class="dropdown" id="lang">
+									<div class="title">
+										<p class="current-lang">فا</p>
+									</div>
+									<div class="dropMenu">
+										<div class="drop-item">
+											<p id="fa" class="locales">فا</p>
+										</div>
+										<div class="drop-item">
+											<p id="en" class="locales">EN</p>
+										</div>
+									</div>
+								</div>
 							</li>
 						</ul>
 					</div>
@@ -49,6 +64,37 @@
                return this.$store.state.staticData.header.en
             }
          }
+      },
+      mounted() {
+         const that = this
+         /////////////// lang switcher dropdown
+         $('#lang').hover(function () {
+            $(this).toggleClass('dropdown-active')
+         })
+
+         /////////////// switching language
+         $('.locales').click(function () {
+            if ($(this).attr('id') === 'fa') {
+               const currentURL = window.location.href
+               const urlSplit = currentURL.split('en')
+               console.log(urlSplit)
+               if (urlSplit.length > 1) {
+                  that.$router.push('/fa' + urlSplit[1])
+                  $('html').attr({lang: 'fa'})
+						$('.current-lang').text('فا')
+               }
+            } else if ($(this).attr('id') === 'en') {
+               const currentURL = window.location.href
+               const urlSplit = currentURL.split('fa')
+               console.log(urlSplit)
+               if (urlSplit.length > 1) {
+                  that.$router.push('/en' + urlSplit[1])
+                  $('html').attr({lang: 'en'})
+                  $('.current-lang').text('EN')
+               }
+            }
+         })
+
       }
    }
 </script>