phancy non-shift bottom nav animation

NUXT/components/bottomNavigation.vue

@@ -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"
+      style="
-      class="transparent"
+        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;