mindol1004/real-world-springboot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: header click active event implement.

Browse Source
This commit is contained in:
kms
2022-11-27 16:35:04 +09:00
parent 021c8d7b74
commit e8247f7521
1 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/vite-frontend/src/components/TheHeader.vue
View File

@@ -16,19 +16,29 @@
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<!-- Add "active" class when you're on that page" -->
<router-link to="/" class="nav-link active" active-class="active">Home</router-link>
<router-link to="/" class="nav-link"
@click="selected(home)"
:class="{ active : home}" active-class="active">Home</router-link>
</li>
<li class="nav-item" v-if="isLogin">
<router-link to="/editor/" class="nav-link" active-class="active">New Article</router-link>
<router-link to="/editor/" class="nav-link"
@click="selected(article)"
:class="{ active : article}" active-class="active">New Article</router-link>
</li>
<li class="nav-item" v-if="isLogin">
<router-link to="/settings" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
<router-link to="/settings" class="nav-link"
@click="selected(setting)"
:class="{ active : setting}" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
</li>
<li class="nav-item" v-if="!isLogin">
<router-link to="/login" class="nav-link" active-class="active">Sign in</router-link>
<router-link to="/login" class="nav-link"
@click="selected(signIn)"
:class="{ active : signIn}" active-class="active">Sign in</router-link>
</li>
<li class="nav-item" v-if="!isLogin">
<router-link to="/register" class="nav-link" active-class="active">Sign up</router-link>
<router-link to="/register" class="nav-link"
@click="selected(signUp)"
:class="{ active : signUp}" active-class="active">Sign up</router-link>
</li>
</ul>
</div>
@@ -46,6 +56,23 @@ export default {
setup(){
const store = useStore();
const isLogin = ref(false);
const home = ref(false);
const article = ref(false);
const setting = ref(false);
const signIn = ref(false);
const signUp = ref(false);
const allHide = () => {
home.value = false;
article.value = false;
setting.value = false;
signUp.value = false;
signIn.value = false;
}
const selected = (headerName : boolean) => {
allHide();
headerName = true;
}
onMounted(()=> {
if(store.state.token == ""){
@@ -55,7 +82,7 @@ export default {
}
})
return { isLogin}
return { isLogin, home, article, setting, signIn, signUp, allHide, selected }
}
}