main layout LTR Mode

client/App.vue

 <template>
   <v-app>
-    <v-content>
       <transition name="fade" mode="out-in">
         <keep-alive>
           <router-view></router-view>
         </keep-alive>
       </transition>
-    </v-content>
   </v-app>
 </template>
 

client/components/AppFooter.vue

 <template>
-  <v-footer elevation="24" app class="d-flex" color="teal lighten-3">
+  <v-footer inset elevation="24" color="teal lighten-3" app height="70">
     <v-row justify="center" align="center" class="text-center red--text">
       <v-menu transition="slide-x-transition">
         <template v-slot:activator="{ on }">
@@ -46,7 +46,6 @@ export default {
 .changeLangBtn {
   position: absolute;
   left: 0;
-  top: 19px;
 }
 </style>>
 

client/components/AppHeader.vue

 <template>
-  <v-app-bar app elevation="24" color="teal lighten-3">
-    <v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
-    <v-spacer></v-spacer>
-    <v-btn text color="red red--text" :to="btnTo">
-      <v-icon left>{{ btnIconName }}</v-icon>
-      <strong>{{$t(btnLabel)}}</strong>
-    </v-btn>
-  </v-app-bar>
-</template>
+  <div>
+    <v-navigation-drawer v-model="drawerRight" app clipped right>
+      <v-list dense>
+        <v-list-item @click.stop="right = !right">
+          <v-list-item-action>
+            <v-icon>mdi-exit-to-app</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
 
-<script>
-export default {
-  name: "app-header",
-  data() {
-    return {
-      btnTo: null
-    };
-  },
-  props: ["btnToProp", "btnLabel", "btnIconName"],
-  created() {
-    this.btnTo = "/" + this.btnToProp;
-  }
-};
-</script>
\ No newline at end of file
+    <v-app-bar app clipped-right color="blue-grey" dark>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-toolbar-title>Toolbar</v-toolbar-title>
+      <div class="flex-grow-1"></div>
+      <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" app>
+      <v-list dense>
+        <v-list-item @click.stop="left = !left">
+          <v-list-item-action>
+            <v-icon>mdi-exit-to-app</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
+
+    <v-content>
+      <v-container class="fill-height" fluid>
+        <v-row justify="center" align="center">
+          <v-col class="shrink">
+            <v-tooltip right>
+              <template v-slot:activator="{ on }">
+                <v-btn :href="source" icon large target="_blank" v-on="on">
+                  <v-icon large>mdi-code-tags</v-icon>
+                </v-btn>
+              </template>
+              <span>Source</span>
+            </v-tooltip>
+            <v-tooltip right>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  icon
+                  large
+                  href="https://codepen.io/johnjleider/pen/QewYYx"
+                  target="_blank"
+                  v-on="on"
+                >
+                  <v-icon large>mdi-codepen</v-icon>
+                </v-btn>
+              </template>
+              <span>Codepen</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+
+    <v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>
+
+    <v-footer app color="blue-grey" class="white--text">
+      <span>Vuetify</span>
+      <div class="flex-grow-1"></div>
+      <span>&copy; 2019</span>
+    </v-footer>
+  </div>
+</template>
\ No newline at end of file

client/components/AuthHeader.vue

+<template>
+  <v-app-bar app elevation="24" color="teal lighten-3">
+    <v-toolbar-title class="red--text">{{$t('AppHeader.appName')}}</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn text color="red red--text" :to="btnTo">
+      <v-icon left>{{ btnIconName }}</v-icon>
+      <strong>{{$t(btnLabel)}}</strong>
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  name: "app-header",
+  data() {
+    return {
+      btnTo: null
+    };
+  },
+  props: ["btnToProp", "btnLabel", "btnIconName"],
+  created() {
+    this.btnTo = "/" + this.btnToProp;
+  }
+};
+</script>
\ No newline at end of file

client/main.js

@@ -8,6 +8,10 @@ Vue.use(VueMeteorTracker);
 import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
+import { Plugin } from 'vue-fragment'
+Vue.use(Plugin)
+
+
 import routes from './plugins/routes';
 const router = new VueRouter({
     mode: 'history',

client/plugins/i18n.js

@@ -67,8 +67,8 @@ const messages = {
 };
 
 const i18n = new VueI18n({
-    locale: 'fa', // set locale    
-    fallbackLocale: 'en', // set fallback locale    
+    locale: 'en', // set locale    
+    fallbackLocale: 'fa', // set fallback locale    
     messages, // set locale messages
 });
 

client/plugins/routes.js

 import Login from '../views/Login.vue';
 import Home from '../views/Home.vue';
 import Register from '../views/Register.vue';
+import Main from '../views/Main.vue';
 
 const routes = [{
         path: '/',
@@ -16,6 +17,11 @@ const routes = [{
         path: '/register',
         component: Register,
         name: 'register'
+    },
+    {
+        path: '/main',
+        component: Main,
+        name: 'main'
     }
 ];
 

client/plugins/vuetify.js

@@ -16,13 +16,11 @@ Vue.use(VueI18n);
 
 import messages from './i18n';
 
-const i18n = new VueI18n(
-    {
-        locale: 'fa', // set locale    
-        fallbackLocale: 'en', // set fallback locale    
-        messages, // set locale messages
-    }
-);
+const i18n = new VueI18n({
+    locale: 'fa', // set locale    
+    fallbackLocale: 'en', // set fallback locale    
+    messages, // set locale messages
+});
 
 
 export default new Vuetify({
@@ -30,9 +28,9 @@ export default new Vuetify({
         locales: { fa, en },
         current: 'fa',
         t: (key, ...params) => i18n.t(key, params),
-      },
+    },
     icons: {
         iconfont: 'mdi', // default - only for display purposes
     },
-    rtl: true,
+    rtl: false,
 });
\ No newline at end of file

client/store/modules/appSetting.js

 const state = {
-    lang: 'fa'
+    lang: 'en'
 }
 
 const mutations = {
     'SET_LANG' (state, lang) {
-
         state.lang = lang;
     }
 }

client/views/Home.vue

@@ -5,7 +5,6 @@
 <script>
 export default {
   beforeRouteEnter(to, from, next) {
-      
     next(vm => {
       vm.$router.push('/login');
     });

client/views/Login.vue

 <template>
-  <div style="height:100%">
-    <app-header btnToProp="register" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></app-header>
-    <v-container fluid class="align-start fill-height backgroundImg">
-      <img src="../../public/img/radio2.png" />
-      <v-row justify="center" class="loginCard">
-        <v-col xs="12" sm="8" md="4">
-          <v-card class="elevation-12" light elevation="24">
-            <v-toolbar color="light-green" dark>
-              <v-toolbar-title>{{$t('Login.loginHeader')}}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text>
-              <v-form>
-                <v-text-field
-                  :label="$t('Login.username')"
-                  prepend-icon="mdi-account-circle"
-                  :rules="[rules.required]"
-                />
-                <v-text-field
-                  :type="!showPassword?'password' :'text'"
-                  :label="$t('Login.password')"
-                  prepend-icon="mdi-lock"
-                  @click:append="showPassword = !showPassword"
-                  :append-icon="showPassword ? 'mdi-eye': 'mdi-eye-off'"
-                  :hint="$t('Login.passwordHint')"
-                  :rules="[rules.required, rules.min]"
-                />
-              </v-form>
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn color="light-green white--text">
-                <v-icon left>mdi-login</v-icon>
-                <small>{{$t('Login.loginBtn')}}</small>
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
+  <!-- <fragment> -->
+  <!-- <div style="height:100%"> -->
+  <v-content class="fill-height">
+    <auth-header btnToProp="register" btnLabel="Login.registerBtn" btnIconName="mdi-account-plus"></auth-header>
+    
+      <v-container fluid class="align-center fill-height backgroundImg">
+        <img src="../../public/img/radio2.png" />
+        <v-row justify="center" class="loginCard">
+          <v-col xs="12" sm="8" md="4">
+            <v-card class="elevation-12" light elevation="24">
+              <v-toolbar color="light-green" dark>
+                <v-toolbar-title>{{$t('Login.loginHeader')}}</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    :label="$t('Login.username')"
+                    prepend-icon="mdi-account-circle"
+                    :rules="[rules.required]"
+                  />
+                  <v-text-field
+                    :type="!showPassword?'password' :'text'"
+                    :label="$t('Login.password')"
+                    prepend-icon="mdi-lock"
+                    @click:append="showPassword = !showPassword"
+                    :append-icon="showPassword ? 'mdi-eye': 'mdi-eye-off'"
+                    :hint="$t('Login.passwordHint')"
+                    :rules="[rules.required, rules.min]"
+                  />
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="light-green white--text" to="/main">
+                  <v-icon left>mdi-login</v-icon>
+                  <small>{{$t('Login.loginBtn')}}</small>
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
+    
     <app-footer></app-footer>
-  </div>
+    <!-- </fragment> -->
+    <!-- </div> -->
+  </v-content>
 </template>
 
 <script>
 import AppFooter from "../components/AppFooter.vue";
-import AppHeader from "../components/AppHeader.vue";
+import AuthHeader from "../components/AuthHeader.vue";
 export default {
   components: {
     "app-footer": AppFooter,
-    "app-header": AppHeader
+    "auth-header": AuthHeader
   },
   data() {
     return {
@@ -56,8 +62,7 @@ export default {
       rules: {
         required: value => !!value || this.$t("Login.required"),
         min: v => {
-          if (v==undefined)
-            return true
+          if (v == undefined) return true;
           return v.length >= 8 || this.$t("Login.min8Character");
         }
       }

client/views/Main.vue

+<template>
+  <div class="fill-height">
+    <!-- <v-content class="fill-height"> -->
+
+    <template v-if="!$vuetify.rtl">
+      <v-navigation-drawer v-model="drawerRight" app right clipped>
+        <v-list dense>
+          <v-list-item @click.stop="right = !right">
+            <v-list-item-action>
+              <v-icon>mdi-exit-to-app</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>right
+      </v-navigation-drawer>
+
+      <v-app-bar app clipped-right color="teal lighten-3" dark>
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        <v-spacer></v-spacer>
+        <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
+        <v-toolbar-title>Toolbar</v-toolbar-title>
+      </v-app-bar>
+
+      <v-navigation-drawer v-model="drawer" app>
+        <v-list dense>
+          <v-list-item @click.stop="left = !left">
+            <v-list-item-action>
+              <v-icon>mdi-exit-to-app</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>left
+      </v-navigation-drawer>
+    </template>
+
+    <template v-if="$vuetify.rtl">
+      <v-navigation-drawer v-model="drawer" app clipped>
+        <v-list dense>
+          <v-list-item @click.stop="left = !left">
+            <v-list-item-action>
+              <v-icon>mdi-exit-to-app</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>left
+      </v-navigation-drawer>
+
+      <v-app-bar app clipped-left color="teal lighten-3" dark>
+        <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
+        <v-spacer></v-spacer>
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+        <v-toolbar-title>Toolbar</v-toolbar-title>
+      </v-app-bar>
+
+      <v-navigation-drawer v-model="drawerRight" app right>
+        <v-list dense>
+          <v-list-item @click.stop="right = !right">
+            <v-list-item-action>
+              <v-icon>mdi-exit-to-app</v-icon>
+            </v-list-item-action>
+            <v-list-item-content>
+              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>right
+      </v-navigation-drawer>
+    </template>
+
+    <v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
+
+    <v-content class="fill-height">
+      <v-container class="fill-height" fluid>
+        <v-row justify="center" align="center">
+          <v-col class="shrink">
+            <v-tooltip right>
+              <template v-slot:activator="{ on }">
+                <v-btn :href="source" icon large target="_blank" v-on="on">
+                  <v-icon large>mdi-code-tags</v-icon>
+                </v-btn>
+              </template>
+              <span>Source</span>
+            </v-tooltip>
+            <v-tooltip right>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  icon
+                  large
+                  href="https://codepen.io/johnjleider/pen/QewYYx"
+                  target="_blank"
+                  v-on="on"
+                >
+                  <v-icon large>mdi-codepen</v-icon>
+                </v-btn>
+              </template>
+              <span>Codepen</span>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+
+    <v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>
+
+    <app-footer></app-footer>
+  </div>
+  <!-- </v-content> -->
+</template>
+
+<script>
+import { Fragment } from "vue-fragment";
+import AppFooter from "../components/AppFooter.vue";
+export default {
+  components: {
+    "app-footer": AppFooter,
+    "fragment": Fragment
+  },
+  props: {
+    source: String
+  },
+  data: () => ({
+    drawer: null,
+    drawerRight: null,
+    right: false,
+    left: false
+  })
+};
+</script>
\ No newline at end of file

client/views/Register.vue

 <template>
-  <div style="height:100%">
-    <app-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></app-header>
-    <v-container fluid class="align-start fill-height backgroundImg">
-      <img src="../../public/img/radio2.png" />
-      <v-row justify="center" class="loginCard">
-        <v-col xs="12" sm="8" md="4">
-          <v-card class="elevation-12" light elevation="24">
-            <v-toolbar color="light-green" dark>
-              <v-toolbar-title>{{$t('Register.registerHeader')}}</v-toolbar-title>
-            </v-toolbar>
-            <v-card-text>
-              <v-form>
-                <v-text-field 
-                :label="$t('Register.username')" 
-                prepend-icon="mdi-account-circle"
-                :rules="[rules.required]" />
-                <v-text-field
-                  :type="!showPassword1?'password' :'text'"
-                  :label="$t('Register.password')"
-                  prepend-icon="mdi-lock"
-                  @click:append="showPassword1 = !showPassword1"
-                  :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
-                  v-model="firstPass"
-                  :rules="[rules.required, rules.min]"
-                />
-                <v-text-field
-                  :type="!showPassword2?'password' :'text'"
-                  :label="$t('Register.repeatPassword')"
-                  prepend-icon="mdi-lock"
-                  @click:append="showPassword2 = !showPassword2"
-                  :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
-                  v-model="secondPass"
-                  :rules="[rules.required, rules.matchPass]"
-                />
-              </v-form>
-            </v-card-text>
-            <v-card-actions>
-              <v-spacer></v-spacer>
-              <v-btn color="light-green white--text">
-                <v-icon left>mdi-login</v-icon>
-                <small>{{$t('Register.registerBtn')}}</small>
-              </v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-container>
+  <!-- <div class="fill-height"> -->
+    <v-content class="fill-height">
+    <auth-header btnToProp="login" btnLabel="Register.loginBtn" btnIconName="mdi-login"></auth-header>
+      <v-container fluid class="align-center fill-height backgroundImg">
+        <img src="../../public/img/radio2.png" />
+        <v-row justify="center" class="loginCard">
+          <v-col xs="12" sm="8" md="4">
+            <v-card class="elevation-12" light elevation="24">
+              <v-toolbar color="light-green" dark>
+                <v-toolbar-title>{{$t('Register.registerHeader')}}</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    :label="$t('Register.username')"
+                    prepend-icon="mdi-account-circle"
+                    :rules="[rules.required]"
+                  />
+                  <v-text-field
+                    :type="!showPassword1?'password' :'text'"
+                    :label="$t('Register.password')"
+                    prepend-icon="mdi-lock"
+                    @click:append="showPassword1 = !showPassword1"
+                    :append-icon="showPassword1 ? 'mdi-eye': 'mdi-eye-off'"
+                    v-model="firstPass"
+                    :rules="[rules.required, rules.min]"
+                  />
+                  <v-text-field
+                    :type="!showPassword2?'password' :'text'"
+                    :label="$t('Register.repeatPassword')"
+                    prepend-icon="mdi-lock"
+                    @click:append="showPassword2 = !showPassword2"
+                    :append-icon="showPassword2 ? 'mdi-eye': 'mdi-eye-off'"
+                    v-model="secondPass"
+                    :rules="[rules.required, rules.matchPass]"
+                  />
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="light-green white--text">
+                  <v-icon left>mdi-login</v-icon>
+                  <small>{{$t('Register.registerBtn')}}</small>
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
     <app-footer></app-footer>
-  </div>
+     </v-content>
+  <!-- </div> -->
 </template>
 
 <script>
 import AppFooter from "../components/AppFooter.vue";
-import AppHeader from "../components/AppHeader.vue";
+import AuthHeader from "../components/AuthHeader.vue";
 export default {
   components: {
     "app-footer": AppFooter,
-    "app-header": AppHeader
+    "auth-header": AuthHeader
   },
   data() {
     return {
@@ -67,14 +70,12 @@ export default {
       rules: {
         required: value => !!value || this.$t("Register.required"),
         min: v => {
-          if (v==undefined)
-            return true
+          if (v == undefined) return true;
           return v.length >= 8 || this.$t("Register.min8Character");
         },
         matchPass: v => {
           return (
-            this.firstPass === this.secondPass ||
-            this.$t('Register.matchPass')
+            this.firstPass === this.secondPass || this.$t("Register.matchPass")
           );
         }
       }

package-lock.json

 {
-  "name": "karname",
+  "name": "karname-ui",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
@@ -4286,9 +4286,9 @@
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
     "minipass": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.4.0.tgz",
-      "integrity": "sha512-6PmOuSP4NnZXzs2z6rbwzLJu/c5gdzYg1mRI/WIYdx45iiX7T+a4esOzavD6V/KmBzAaopFSTZPZcUx73bqKWA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.5.0.tgz",
+      "integrity": "sha512-9FwMVYhn6ERvMR8XFdOavRz4QK/VJV8elU1x50vYexf9lslDcWe/f4HBRxCPd185ekRSjU6CfYyJCECa/CQy7Q==",
       "requires": {
         "safe-buffer": "^5.1.2",
         "yallist": "^3.0.0"
@@ -6284,6 +6284,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-fragment": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.1.tgz",
+      "integrity": "sha512-ig6eES6TcMBbANW71ylB+AJgRN+Zksb3f50AxjGpAk6hMzqmeuD80qeh4LJP0jVw2dMBMjgRUfIkrvxygoRgtQ=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",

package.json

@@ -16,6 +16,7 @@
         "meteor-node-stubs": "^1.0.0",
         "valid-url": "^1.0.9",
         "vue": "^2.6.10",
+        "vue-fragment": "^1.5.1",
         "vue-i18n": "^8.14.0",
         "vue-meta": "^2.2.1",
         "vue-meteor-tracker": "^2.0.0-beta.5",
@@ -53,4 +54,4 @@
         "webpack-hot-middleware": "^2.25.0",
         "webpack-meteor-externals": "0.0.5"
     }
-}
\ No newline at end of file
+}