[Vue3 + vite + tailwindCSS] firestore정보 사용하기 & 현재 메뉴 색 변경하기

이제 현재 로그인 중인 유저의 

정보를 사용하여 

 

프로필카드 및 유저 정보가 필요한 곳에 사용해 보도록 한당

https://velog.io/@jcs526/Vue3-computed-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95

[Vue3] computed 사용방법

 

import { ref, onBeforeMount, computed } from "vue";

    const currentUser = computed(() => store.state.user);

    return { routes, showProfileDropdown, onLogout, currentUser };

 

 

 

 

currentUser에 저장되어있는 email과 username을 표시했다. 

        <div class="mx-4">

          <div class="font-bold text-sm">{{ currentUser.email }}</div>

          <div class="text-left text-sm text-gray-500">

            @{{ currentUser.username }}

          </div>

        </div>

 

 

 

 

이미지도 동일하게 사용해본

        <img

          :src="currentUser.profile_image_url"

          class="w-10 h-10 rounded-full"

        />

 

 

 

그리고 현재는 

사이드 메뉴를 클릭해서 메뉴를 이동해도  현재 어디 메뉴에 있는지 표시되지 않는다

 

그래서 현재 있는 메뉴의 폰트에 색상을 입혀줄거임

 

 

router -> index.js 의 routes에  name을 지정한다. 

const routes = [

  {

    path: "/",

    name: "home",

    component: Home,

    title: "홈",

    icon: "fas fa-home fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    name: "explore",

    component: Home,

    title: "탐색하기",

    icon: "fas fa-hashtag fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/notifications",

    name: "notifications",

    component: Notifications,

    title: "알림",

    icon: "far fa-bell fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/messages",

    name: "messages",

    component: Messages,

    title: "쪽지",

    icon: "far fa-envelope fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    name: "bookmarks",

    component: Home,

    title: "북마크",

    icon: "far fa-bookmark fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    name: "list",

    component: Home,

    title: "리스트",

    icon: "far fa-list-alt fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/profile",

    name: "profile",

    component: Profile,

    title: "프로필",

    icon: "far fa-user fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/",

    name: "more",

    component: Home,

    title: "더보기",

    icon: "fas fa-ellipsis-h fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/register",

    name: "register",

    component: Register,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

  {

    path: "/login",

    name: "login",

    component: Login,

    meta: { isMenu: false, layout: "EmptyLayout" },

  },

];

 

 

라우터를 리턴한

  return { routes, showProfileDropdown, onLogout, currentUser, router };

 

사이드 메뉴 class에 

현재 라우터의 name과 route의 name이 동일하면 text-primary css를 주고 아니면 안줌 

        <!-- 트위터 사이드 메뉴 -->

        <div class="flex flex-col items-start space-y-1">

          <router-link

            :to="route.path"

            :class="`hover:text-primary hover:bg-blue-50 px-4 py-2 rounded-full cursor-pointer ${

              router.currentRoute.value.name == route.name ? 'text-primary' : ''

            }`"

            v-for="route in routes"

            :key="route"

          >

            <div v-if="route.meta.isMenu">

              <i :class="route.icon"></i>

              <span class="ml-3 text-xl hidden xl:inline-block">{{

                route.title

              }}</span>

            </div>

          </router-link>

        </div>