App.Vue

App.Vue

<!-- src/App.vue -->
<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>마이로그, 일상의 기록</v-toolbar-title>
      <v-spacer></v-spacer>
      <div @click="doLogout" v-if="user" style="cursor: pointer">
        <v-icon left class="ml-5">mdi-logout</v-icon>
      </div> 
    </v-app-bar>

    <!-- Navigation Drawer -->
    <v-navigation-drawer app v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp">
      <v-list>
        <v-list-item-group>
          <!-- Loop through routes array to create navigation items -->
          <v-list-item v-for="(route, index) in GetMenuItems" :key="index" @click="$router.push(route.path).catch(() => {});">
            <v-list-item-icon>
              <v-icon>{{ route.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ route.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>        
      </v-list>
    </v-navigation-drawer>

    <!-- Main Content with Router View -->
    <v-main>
      <v-container>
        <div class="ml-5 mb-1">
          <b>- Beta Test 공지 -</b><br>
          '마이로그'는 Vue와 Vuetify로 개발한 PWA로서 일상에 대한 짧은 글을 공유하는 서비스입니다.
          서비스 사용에 불편함이 있거나 오류가 있으면, 여기에 글을 써서 알려 주세요.<br>
        </div>

        <!-- Router View to display route components -->
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
      <!--홈 화면이 아닌 경우 돌아가기 버튼 표시-->
      <v-btn icon v-if="$route.name !== 'home'" @click="$router.go(-1)">
        <v-icon>mdi-arrow-left</v-icon>         
      </v-btn>

      <v-btn class="ml-2" icon v-if="$route.name == 'home'" @click="orderByAsc">
        <v-icon>mdi-arrow-up</v-icon>
      </v-btn>

      <v-btn class="ml-2" icon v-if="$route.name == 'home'" @click="orderByDesc">
        <v-icon>mdi-arrow-down</v-icon>
      </v-btn>      

      <router-link v-if="user" to="/write" style="cursor: pointer" class="ml-2">
        <v-icon>mdi-pencil</v-icon>
      </router-link>

      <v-spacer></v-spacer>
      <router-link to="/" style="cursor: pointer">
        <v-icon>mdi-home</v-icon>
      </router-link>
    </v-footer>
  </v-app>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import router from '@/router';  // Vue Router import

export default {
  name: 'App',

  data: () => ({
    drawer: false, // State to toggle the navigation drawer
  }),
  computed: {
    ...mapGetters('auth', ['user']),

    // 로그인 여부에 따라 다르게 탐색서랍과 툴바 메뉴명 항목 배열 반환
    GetMenuItems() {
      if(this.user) {
        return [
          { title: '홈', path: '/', icon: 'mdi-home'},
          { title: '쓰기', path: '/write', icon: 'mdi-pencil'},
          { title: '내꺼', path: '/mylogs', icon: 'mdi-post-outline'},
          { title: '찾기', path: '/search', icon: 'mdi-file-search-outline'},   
          { title: '구독', path: '/subscribing', icon: 'mdi-account-heart'}, 
          { title: '독자', path: '/subscriber', icon: 'mdi-account-details'},  
          { title: '알림', path: '/notification', icon: 'mdi-bell'},
          { title: '계정', path: '/profile', icon: 'mdi-account-box-edit-outline'},
          { title: '통계', path: '/manage', icon: 'mdi-cog'},
          { title: 'About', path: '/about', icon: 'mdi-information'}
        ]
      } else {
        return [
          { title: '홈', path: '/', icon: 'mdi-home'},          
          { title: '찾기', path: '/search', icon: 'mdi-file-search-outline'},
          { title: '로그인', path: '/login', icon: 'mdi-login'},
          { title: '계정 만들기', path: '/register', icon: 'mdi-account'},
          { title: 'About', path: '/about', icon: 'mdi-information'}
        ]
      }
    }
  },
  methods: {
    ...mapActions('auth', ['logout']),
    ...mapActions('mylogs', ['fetchMylogs', 'fetchMylogsAsc']),

    doLogout() {
      this.logout();

      if(this.$route.name !== 'home')
        router.push("/");   // home으로
    },
    orderByDesc() { 
      this.fetchMylogs();
    },
    orderByAsc() { 
      this.fetchMylogsAsc();
    }
  }
};
</script>