imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix Navbar

Browse Source
This commit is contained in:
chiayin
2023-03-06 16:33:45 +08:00
parent 35568fe095
commit f07490ee82
8 changed files with 249 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Navbar.vue
View File

@@ -3,12 +3,19 @@
<div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
<div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
<div class="flex flex-1 items-center">
<h2 class="mr-28 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
<ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
<li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
<!-- 回 Files 頁 -->
<router-link to class="mr-4" v-if="navViewName !== 'FILES'">
<span @click="$router.back(-1)" class="material-symbols-outlined text-neutral-10 leading-loose">
arrow_back
</span>
</router-link>
<h2 class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
<ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
<li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
</ul>
</div>
<div class="flex justify-end items-center">
<!-- Files Page: Search and Upload -->
<div class="flex justify-end items-center" v-if="navViewName === 'FILES'">
<form role="search">
<label for="searchFiles" class="mr-4 relative">
<input type="search" id="searchFiles" placeholder="Search" class="px-5 py-2 w-72 rounded-full text-sm align-middle duration-300 border border-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring focus:border-neutral-300">
@@ -26,6 +33,11 @@
upload
</label>
</div>
<!-- Other Page: Save and Download -->
<div v-else class="space-x-4">
<button class="btn btn-sm btn-neutral">Save</button>
<button class="btn btn-sm btn-neutral">Download</button>
</div>
</div>
</div>
</nav>
@@ -49,9 +61,7 @@ export default {
};
},
watch: {
$route(to){
this.navViewName = to.name.toUpperCase();
}
'$route':'getnavViewName',
},
setup() {
const store = filesStore();
@@ -65,11 +75,15 @@ export default {
},
mounted() {
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
this.getnavViewName();
},
methods: {
switchNavItem(event) {
this.store.filesTag = event.target.innerText;
}
},
getnavViewName() {
this.navViewName = this.$route.name.toUpperCase();
},
},
}
</script>