zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: add nav more menu on mobile (#322)

Browse source 
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
This commit is contained in:
Ayaka Rizumu 2022-12-04 22:17:02 +08:00 • committed by GitHub
parent 8f32b1ce22
commit cbd5867275
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 237 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

48
components/nav/NavBottom.vue
View file

@ -1,30 +1,58 @@
<script setup lang="ts">
// only one icon can be lit up at the same time
const moreMenuVisible = ref(false)
</script>
<template>
<nav h-14 border="t base" flex flex-row>
<nav
h-14 border="t base" flex flex-row text-xl
of-y-scroll overscroll-none
class="scrollbar-hide after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
>
<!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
<template v-if="currentUser">
<NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:home-5-line />
</NuxtLink>
<NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:notification-4-line />
</NuxtLink>
</template>
<NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<NuxtLink to="/explore" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:hashtag />
</NuxtLink>
<NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<NuxtLink group to="/public/local" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:group-2-line />
</NuxtLink>
<NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line />
</NuxtLink>
<template v-if="!currentUser">
<NuxtLink to="/public" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:earth-line />
</NuxtLink>
</template>
<template v-if="currentUser">
<NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
<div i-ri:at-line />
</NuxtLink>
</template>
<NavBottomMoreMenu v-slot="{ changeShow, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
<label
flex items-center place-content-center h-full flex-1 class="selete-none"
:class="show ? '!text-primary' : ''"
>
<input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="changeShow">
<span v-show="show" i-ri:close-fill />
<span v-show="!show" i-ri:more-fill />
</label>
</NavBottomMoreMenu>
</nav>
</template>
<style scoped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>