nav bar 로그인/로그아웃 상태변경

 

        <div class="mypage">
          <el-dropdown style="font-family:'Playfair Display'; align-center:center; margin:23px 0px 0px 40px; width:80px;">
            <p class="el-dropdown-link" @click="hadleApp_join" style="font-size:22px; color: #3c5240;">sign up<el-icon class="el-icon--right"><arrow-down /></el-icon></p>
            <template #dropdown>
              <el-dropdown-menu style="font-family:'Playfair Display'; background-color=transparent;">
                <el-dropdown-item @click="hadleApp_login" v-if="!logged">log in</el-dropdown-item>
                <el-dropdown-item @click="hadleApp_mypage" v-if="logged">my page</el-dropdown-item>
                <el-dropdown-item @click="hadleApp_logout" v-if="logged">log out</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

 

elementplus.org 프레임워크를 사용해서 dropdown 적용

https://element-plus.org/en-US/component/dropdown.html

Dropdown | Element Plus

* el- 로 시작되는 태그는 css style 적용이 안되어서 바로 css 적용 

methods : {
      changeLogged(logged){
      this.logged = logged;
      },
      hadleApp_join() {
        this.$router.push({ path : '/join'});
      },
      hadleApp_login() {
        this.$router.push({ path : '/login'});
      },
      hadleApp_mypage() {
        this.$router.push({ path : '/mypage_info'});
      }
}