etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-12-22 16:30:20 +00:00
Code Issues Projects Releases Wiki Activity

phancy non-shift bottom nav animation

Browse source
This commit is contained in:
Nikita Krupin 2022-12-27 15:24:42 -05:00
parent 1f4cda1933
commit 63ac26a320
1 changed files with 47 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
NUXT/components/bottomNavigation.vue
View file

@ -6,15 +6,20 @@
<v-divider v-if="!$store.state.tweaks.roundTweak" />
<v-bottom-navigation
v-model="tabSelection"
style="padding: 0 !important; box-shadow: none !important"
class="transparent"
style="
box-shadow: none !important;
padding: 0 !important;
position: relative;
"
class="transparent nav"
:shift="$store.state.tweaks.navigationShift"
>
<v-btn
v-for="(item, i) in tabs"
:key="i"
v-ripple="false"
class="navButton"
active-class="link-active"
class="navButton link"
:to="item.link"
plain
>
@ -31,7 +36,7 @@
: 'var(--v-background-darken4)',
}"
:class="
tabSelection == i
tabSelection == i && $store.state.tweaks.navigationShift
? $vuetify.theme.dark
? 'tab primary darken-4'
: 'tab primary lighten-4'
@ -53,7 +58,7 @@
v-if="$store.state.tweaks.navigationIcons === 2"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
viewBox="0 0 21 21"
height="1.5rem"
width="1.5rem"
class="mt-1"
@ -64,7 +69,7 @@
v-if="$store.state.tweaks.navigationIcons === 3"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 32 32"
viewBox="0 0 33 33"
height="1.5rem"
width="1.5rem"
class="mt-1"
@ -74,6 +79,7 @@
</div>
<v-icon
v-if="$store.state.tweaks.navigationIcons === 0"
class="my-1"
:color="
tabSelection == i
? 'primary'
@ -82,7 +88,7 @@
: 'background darken-4'
"
:class="
tabSelection == i
tabSelection == i && $store.state.tweaks.navigationShift
? $vuetify.theme.dark
? 'tab primary darken-4'
: 'tab primary lighten-4'
@ -92,6 +98,13 @@
/>
<!-- + (tabSelection == i ? '' : '-outline') -->
</v-btn>
<div
v-if="!$store.state.tweaks.navigationShift"
:style="{
top: $store.state.tweaks.navigationText ? '0.35rem' : '0.75rem',
}"
class="link-anime"
></div>
<!-- <v-btn
text
class="navButton mr-2 fill-height"
@ -151,15 +164,41 @@ export default {
</script>
<style scoped>
.link-anime {
right: 0;
height: 2rem;
width: 3.25rem;
position: absolute;
transition: transform 0.15s ease-in-out, scale 0.1s ease;
background-color: var(--v-primary-base);
padding: 0.1em 0.5em 0.1em 0.5em;
border-radius: 2rem;
opacity: 0.25;
z-index: -1;
scale: 0;
}
/* TODO: calculate inside <template></template> based on tabs.length */
.nav .link:first-child.link-active ~ .link-anime {
transform: translateX(calc(-75vw + 50%));
scale: 1;
}
.nav .link:nth-child(2).link-active ~ .link-anime {
transform: translateX(calc(-50vw + 50%));
scale: 1;
}
.nav .link:nth-child(3).link-active ~ .link-anime {
transform: translateX(calc(-25vw + 50%));
scale: 1;
}
.bottomNav {
/* box-shadow: inset 0 0 10rem var(--v-background-base) !important; */
height: calc(4rem + env(safe-area-inset-bottom)) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
box-shadow: none !important;
position: fixed;
z-index: 100;
width: 100%;
bottom: 0;
z-index: 100;
}
.navButton {
width: 25vw !important;