refactor(components): simplify complex code in various components

src/components/footer.vue

@@ -229,7 +229,7 @@ export default {
  type: 'error',
  duration: -100,
  title: 'Backend Error',
- text: 'Error While Connecting to Backend Server. Click the button to check my backup Servers',
+ text: 'Error While Connecting to Backend Server.',
  data: {
  loading: false,
  dark: true,

src/components/nav-bar.vue

@@ -1,30 +1,31 @@
 <template>
- <v-app-bar app dense flat collapse-on-scroll>
+ <v-app-bar app dense elevate-on-scroll>
  <v-app-bar-nav-icon @click="navclick()" />
- <v-avatar
- size="38"
- :class="
- 'mx-2 non-touch point-cursor ' +
- ($vuetify.theme.dark ? ' grad-back-dark' : ' grad-back-light')
- "
- @click="$router.push('/')"
- >
- <v-img :src="avatar" />
- </v-avatar>
  <v-tooltip bottom transition="slide-y-transition">
  <template #activator="{ on, attrs }">
- <v-toolbar-title
- v-ripple
+ <v-avatar
+ size="38"
+ :class="
+ 'mx-2 non-touch point-cursor ' +
+ ($vuetify.theme.dark ? ' grad-back-dark' : ' grad-back-light')
+ "
  v-bind="attrs"
- class="font-weight-bold non-touch point-cursor"
  v-on="on"
- @click="routerPush('/')"
+ @click="$router.push('/')"
  >
- Shan.tk ✌
- </v-toolbar-title>
+ <v-img :src="avatar" />
+ </v-avatar>
  </template>
- <span>Sudharshan TK</span>
+ <span> Go to Home </span>
  </v-tooltip>
+ <v-slide-y-transition mode="out-in">
+ <v-toolbar-title
+ :key="routeKey"
+ class="text-h6 font-weight-black non-touch"
+ >
+ {{ $route.name === 'Home' ? 'Shan.tk ✌' : $route.name }}
+ </v-toolbar-title>
+ </v-slide-y-transition>
  <v-spacer />
  <v-tooltip bottom transition="slide-y-transition">
  <template #activator="{ on, attrs }">
@@ -38,6 +39,8 @@
 </template>
 
 <script>
+import authorData from '@t/authorData.json';
+
 export default {
  name: 'NavBar',
  props: {
@@ -47,13 +50,21 @@ export default {
  },
  },
  data: () => ({
+ currentPage: '',
+ routeKey: 0,
  github: {
  link: 'https://github.com/tks18',
  icon: 'mdi-github',
  title: 'Github Profile',
  },
- avatar: 'https://i.ibb.co/b16DNTQ/IMG-0483-Copy.png',
+ avatar: authorData.logo,
  }),
+ watch: {
+ $route(to) {
+ this.currentPage = to.name;
+ this.routeKey++;
+ },
+ },
  methods: {
  navclick() {
  this.$state.store.navbar.active = true;

src/components/nav-drawer.vue

@@ -8,27 +8,15 @@
  <v-container
  :class="$state.store.botSettings.navBlur ? 'back-blur' : ' ' + ' my-5'"
  >
- <v-row align="center" justify="center">
- <v-avatar
- class="point-cursor non-touch border-light"
- size="125"
- @click="routerPush('/about/me')"
- >
- <v-img :src="avatar" />
- </v-avatar>
- </v-row>
  <v-list-item three-line class="px-2">
  <v-list-item-content>
  <v-list-item-title
- class="text-center point-cursor non-touch font-weight-medium"
+ class="point-cursor non-touch font-weight-bold"
  @click="routerPush('/about/me')"
  >
  Sudharshan TK
  </v-list-item-title>
- <v-list-item-subtitle class="text-center non-touch font-italic">
- (aka Shan.tk)
- </v-list-item-subtitle>
- <v-list-item-subtitle class="text-center non-touch font-weight-light">
+ <v-list-item-subtitle class="non-touch font-weight-light">
  Chartered Accountant / Web Developer
  </v-list-item-subtitle>
  </v-list-item-content>
@@ -88,14 +76,15 @@
  </v-navigation-drawer>
 </template>
 <script>
+import authorData from '@t/authorData.json';
 import bottomSettings from './bottom-settings.vue';
 
 export default {
  components: {
  bottomSettings,
  },
  data: () => ({
- avatar: 'https://i.ibb.co/b16DNTQ/IMG-0483-Copy.png',
+ avatar: authorData.profilePicture,
  navPaths: [
  {
  icon: 'mdi-home',
@@ -128,12 +117,6 @@ export default {
  subtitle: 'Currently Working Projects and Issues',
  link: '/projects',
  },
- {
- icon: 'mdi-web',
- title: 'Careers',
- subtitle: 'Careers',
- link: '/careers',
- },
  {
  icon: 'mdi-camera',
  title: 'Gallery',