83 lines
2.7 KiB
Vue
83 lines
2.7 KiB
Vue
<template>
|
|
<nav class="bg-neutral-700">
|
|
<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">FILES</h2>
|
|
<ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
|
|
<li @click="switchNavItem($event)">ALL</li>
|
|
<li @click="switchNavItem($event)">DISCOVER</li>
|
|
<li @click="switchNavItem($event)">COMPARE</li>
|
|
<li @click="switchNavItem($event)">DESIGN</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex justify-end items-center">
|
|
<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">
|
|
<span class="absolute top-2 bottom-1.5 right-0.5 flex justify-center items-center gap-2">
|
|
<IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
|
|
<span class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"></span>
|
|
<button class="pr-2 py-1 rounded-r-full">
|
|
<IconSearch class="w-6 h-6"></IconSearch>
|
|
</button>
|
|
</span>
|
|
</label>
|
|
</form>
|
|
<label class="btn btn-sm btn-neutral cursor-pointer">
|
|
<input id="uploadFiles" class="hidden" type="file">
|
|
upload
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import filesStore from '@/stores/files.js';
|
|
import IconSearch from '@/components/icons/IconSearch.vue';
|
|
import IconSetting from '@/components/icons/IconSetting.vue';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showNavbarBreadcrumb: false,
|
|
// 之後優化要模組化
|
|
// navViewName: {
|
|
// files: ['all', 'discover', 'compare', 'design'],
|
|
// },
|
|
navViewName: '',
|
|
};
|
|
},
|
|
setup() {
|
|
const store = filesStore();
|
|
|
|
return {
|
|
store,
|
|
}
|
|
},
|
|
components: {
|
|
IconSearch,
|
|
IconSetting,
|
|
},
|
|
mounted() {
|
|
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
|
|
},
|
|
methods: {
|
|
switchNavView(name) {
|
|
this.navViewName = name;
|
|
},
|
|
switchNavItem(event) {
|
|
this.store.filesTag = event.target.innerText;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#searchFiles::-webkit-search-cancel-button{
|
|
appearance: none;
|
|
}
|
|
</style>
|