add header and lang switcher

resources/client/assets/sass/app.scss

@@ -22,6 +22,14 @@
 
 
 ///////////////////// mixins
+@mixin defaultTransition() {
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+}
+
 @mixin transition($p) {
   transition: $p;
   -webkit-transition: $p;
@@ -68,6 +76,7 @@ $darkGray: #303030;
 
 body {
   direction: rtl;
+  background: $bg;
 
   &:lang(en) {
     direction: ltr;
@@ -83,6 +92,15 @@ h1, h2, h3, h4, h5, h6 {
   font-family: 'sahel-bold';
 }
 
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+
 /////// global classes
 .logo {
   display: inline-block;
@@ -93,33 +111,122 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.lang--bar {
-  background: $darkGray;
-  height: 25px;
+.header {
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
 
-  p {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 13px;
-    line-height: 25px;
-    float: left;
+  .links {
+    li {
+      text-align: right;
+      padding: 30px 0;
+
+      &:lang(en) {
+        text-align: left;
+      }
+
+      &:first-child {
+        text-align: right;
+
+        &:lang(en) {
+          text-align: left;
+        }
+      }
+
+      a:not(.logo) {
+        position: relative;
+        padding: 5px 0;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 1px;
+          background: $darkGray;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          @include defaultTransition;
+        }
+
+        &:lang(en) {
+          &::after {
+            right: auto;
+            left: 0;
+          }
+        }
+
+        &:hover {
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+
+    }
   }
 
-  select {
-    @extend %appearance;
-    @extend %userSelect;
-    background: $darkGray;
-    color: #fff;
-    font-family: sans-serif;
-    border: none;
+  .lag-switcher {
+    .dropdown {
+      position: relative;
 
-    option{
-      padding: 5px;
-      background: #fff;
-      color: #000;
+      .title {
+        @include defaultTransition();
+        padding: 5px;
+
+        p {
+          @extend %userSelect;
+          @include defaultTransition();
+          text-align: center;
+          font-size: 23px;
+        }
+      }
+
+      .dropMenu {
+        width: 100%;
+        height: 0;
+        overflow: hidden;
+        background: $darkGray;
+        @include defaultTransition();
+        position: absolute;
+        top: 27px;
+        left: 0;
+
+        .drop-item {
+          padding-top: 10px;
+
+          p {
+            padding: 5px;
+            color: #fff;
+            font-size: 13px;
+            text-align: center;
+            cursor: pointer;
+            @extend %userSelect;
+            @include defaultTransition();
+          }
+        }
+      }
+    }
+
+    .dropdown-active {
+      .title {
+        background: $darkGray;
+
+        p {
+            color: #fff;
+
+        }
+      }
+
+      .dropMenu {
+        height: 75px;
+
+        p:hover {
+          background: rgba(255, 255, 255, 0.05);
+        }
+      }
     }
   }
 }
-
-.header {
-
-}

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>

resources/client/components/langBar.vue

@@ -1,14 +0,0 @@
-<template>
-	<div class="lang--bar">
-		<div class="container-fluid">
-			<div class="row">
-				<div class="col-6">
-				
-				</div>
-				<div class="col-6">
-					<p>تمامی اطلاعات این سایت برای شرکت اراک ریل محفوظ است</p>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>

resources/client/layouts/default.vue

@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<langBar/>
 		<site-header/>
 		<nuxt/>
 	</div>
@@ -8,6 +7,7 @@
 
 
 <script>
+	 
    export default {
       beforeCreate() {
          if (this.$route.params.lang === 'fa') {
@@ -15,6 +15,11 @@
          } else if (this.$route.params.lang === 'en') {
             $('html').attr({lang: 'en'})
          }
-      }
+      },
+		head(){
+         return {
+         
+         }
+		}
    }
 </script>

resources/client/middleware/routerGuards.js

@@ -0,0 +1,17 @@
+export default function (ctx) {
+   if (ctx.app.store.state.global.navigation_guard) {
+      ctx.app.store.commit('global/navigationGuards', false)
+
+      /////////////////////////////////// beforeEach
+
+
+      ////////////////////////////////// afterEach
+      ctx.app.router.afterEach((to, from) => {
+         if (to.params.lang === 'fa') {
+            $('html').attr({lang: 'fa'})
+         } else if (to.params.lang === 'en') {
+            $('html').attr({lang: 'en'})
+         }
+      })
+   }
+}

resources/client/nuxt.config.js

@@ -79,5 +79,8 @@ export default {
    generate: {
       dir: '../../public/nuxt_build'
    },
-   router: {}
+   router: {
+      mode: 'history',
+      middleware: 'routerGuards'
+   }
 }

resources/client/pages/_lang/index.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="container">
-      salam
+  <div class="home--page">
+      <section class="s1">
+      
+      </section>
   </div>
 </template>
 

resources/client/plugins/components.js

@@ -1,9 +1,7 @@
 import Vue from 'vue'
 import header from '../components/header'
 import logo from '../components/icons/logo'
-import langBar from '../components/langBar'
 
 
 Vue.component('site-header', header)
 Vue.component('logo', logo)
-Vue.component('langBar', langBar)

resources/client/store/global.js

@@ -1,5 +1,5 @@
 export const state = () => ({
-  navigation_guard: false
+  navigation_guard: true
 })
 
 export const mutations = {