From 4aa6f0ff4280592cc67104c7df721d115429ec72 Mon Sep 17 00:00:00 2001
From: FeriVOQ <36544651+ferivoq@users.noreply.github.com>
Date: Tue, 27 Dec 2022 14:32:22 +0100
Subject: [PATCH 1/7] Update to Hungarian readme (#589)

---
 readme/readme.hu.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/readme/readme.hu.md b/readme/readme.hu.md
index 1947ea1..3e956c0 100644
--- a/readme/readme.hu.md
+++ b/readme/readme.hu.md
@@ -76,16 +76,18 @@ Az alkalmazás telepítéséhez látogasson el erre az oldalra [vuetube.app/inst
 
 ### Android
 
-| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/android.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.4.2><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
+| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/android.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.5><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Eléggé unstabil, de előre megkapod a legújabb funkciókat.                                                                                                                                           | Kevesebb hiba van benne mint a Unstable-ben, de mégis több a funkció benne mint a Stable-ben.                                                                                        | Még nem elérhető.                                                                                                                                       |
 
 ### iOS
 
-| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/iOS.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://cdn.discordapp.com/attachments/949908267855921163/972164558930198528/VueTube-Canary-May-6-2022.ipa><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
+| <a href=https://nightly.link/VueTubeApp/VueTube/workflows/ci/main/iOS.zip><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getunstable.png></a> | <a href=https://github.com/VueTubeApp/VueTube/releases/tag/0.3><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getcanary.png></a> | <a href=https://vuetube.app/install><img id="im" width="200" src=https://raw.githubusercontent.com/VueTubeApp/VueTube/main/resources/getstable.png></a> |
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Eléggé unstabil, de előre megkapod a legújabb funkciókat.                                                                                                                                       | Kevesebb hiba van benne mint a Unstable-ben, de mégis több a funkció benne mint a Stable-ben.                                                                                                                                          | Még nem elérhető.                                                                                                                                       |
 
+(Az Apple hivatalosan nem támogatja a sideloading-ot, vagyis nem lehet az alkalmazások telepítését csak a fájllal tenni anélkül, hogy azokat feltöltenék a cég hivatalos boltjába. A VueTube iPhone / iPad eszközökre történő telepítéséhez speciális módszereket kell használod)
+
 </details>
 
 <h2 align="left">

From 3766978f47fb69cb9a6db6c3784596cbc56c5002 Mon Sep 17 00:00:00 2001
From: Adam Iskandar <89963248+AdamIskandarAI@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:08:18 +0800
Subject: [PATCH 2/7] Major revision of malay.js (#591)

* Fixed telegram badge in Malay readme

* Major revision of malay.js
---
 NUXT/plugins/languages/malay.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/NUXT/plugins/languages/malay.js b/NUXT/plugins/languages/malay.js
index 6f76ca8..9c25330 100644
--- a/NUXT/plugins/languages/malay.js
+++ b/NUXT/plugins/languages/malay.js
@@ -8,7 +8,7 @@ module.exports = {
     restart: "Mulakan semula",
     later: "Kemudian",
     settingRestart:
-      "Mengubah tetapan ini memerlukan apl untuk dimulakan semula untuk menerapkan tetapan.",
+      "Mengubah tetapan ini memerlukan apl dimulakan semula untuk menerapkan tetapan.",
     okay: "OK",
   },
 
@@ -27,8 +27,8 @@ module.exports = {
     plugins: "Pemalam",
     startup: "Permulaan",
     theme: "Tema",
-    tweaks: "Pelarasan",
-    updates: "Kemaskini"
+    tweaks: "Pengubahsuaian",
+    updates: "Kemaskini",
   },
 
   index: {
@@ -41,7 +41,7 @@ module.exports = {
     general: "Umum",
     theme: "Tema",
     player: "Pemain",
-    uitweaker: "Pelarasan UI",
+    uitweaker: "Pengubahsuaian UI",
     startupoptions: "Pilihan Permulaan",
     plugins: "Pemalam",
     updates: "Kemaskini",
@@ -55,7 +55,7 @@ module.exports = {
       language: "Bahasa",
       backup: "Sandaran",
       backupinfo: "Sandarkan atau pulihkan semula tetapan aplikasi anda",
-      restore: "Pulihkan semula"
+      restore: "Pulihkan semula",
     },
     theme: {
       normal: "Normal",
@@ -69,9 +69,9 @@ module.exports = {
     tweaks: {
       fullscreen: "Skrin Penuh",
       navbarblur: "Bar Navigasi Kabur",
-      roundedcorners: "Sudut Bulat",
-      roundthumbnails: "Lakaran Kecil Bulat",
-      roundwatchpagecomponents: "Komponen Halaman Tonton Bulat",
+      roundedcorners: "Sudut Berbucu Bulat",
+      roundthumbnails: "Lakaran Kecil Berbucu Bulat",
+      roundwatchpagecomponents: "Komponen Halaman Tonton Berbucu Bulat",
       radius: "Radius",
     },
     startup: {

From f3977da8ab1d0ca1a55f3ce2298ce8f2da19b5ab Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 27 Dec 2022 11:44:51 -0500
Subject: [PATCH 3/7] fix: comments

---
 .../Comments/mainCommentRenderer.vue          | 25 +++++------
 .../Comments/mainCommentReplyRenderer.vue     | 12 +++--
 .../swipeableBottomSheet/_variables.scss      |  2 -
 .../swipeableBottomSheet/index.js             |  4 --
 .../swipeableBottomSheet.js                   | 34 --------------
 .../swipeableBottomSheet.sass                 | 44 -------------------
 NUXT/components/dialogBase.vue                |  2 +-
 NUXT/pages/watch.vue                          | 34 ++++++++------
 8 files changed, 39 insertions(+), 118 deletions(-)
 delete mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
 delete mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
 delete mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
 delete mode 100644 NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index 40303ec..c2b1be8 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -32,7 +32,7 @@
       <v-divider v-if="getComponents()[Object.keys(comment)[0]]"></v-divider>
     </div>
 
-    <div class="loading" v-if="loading">
+    <div v-if="loading" class="loading">
       <v-sheet
         v-for="i in comments.length <= 0 ? 5 : 1"
         :key="i"
@@ -50,6 +50,7 @@
         :defaultContinuation="replyData.replyContinuation"
         class="transition-fast-in-fast-out v-card--reveal"
         style="height: 100%"
+        @closeComments="$emit('changeState', false)"
       ></main-comment-reply-renderer>
     </template>
   </dialog-base>
@@ -57,26 +58,24 @@
 
 <script>
 import dialogBase from "~/components/dialogBase.vue";
-import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.vue";
-import continuationItemRenderer from "~/components/observer.vue";
+import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer.vue";
 import mainCommentReplyRenderer from "~/components/Comments/mainCommentReplyRenderer.vue";
+import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["defaultContinuation", "commentData", "showComments"],
-
+  components: {
+    dialogBase,
+    commentThreadRenderer,
+    commentsHeaderRenderer,
+    mainCommentReplyRenderer,
+    continuationItemRenderer,
+  },
   model: {
     prop: "showComments",
     event: "changeState",
   },
-
-  components: {
-    dialogBase,
-    commentsHeaderRenderer,
-    commentThreadRenderer,
-    continuationItemRenderer,
-    mainCommentReplyRenderer,
-  },
+  props: ["defaultContinuation", "commentData", "showComments"],
 
   data: () => ({
     loading: true,
diff --git a/NUXT/components/Comments/mainCommentReplyRenderer.vue b/NUXT/components/Comments/mainCommentReplyRenderer.vue
index 115315f..a58aaba 100644
--- a/NUXT/components/Comments/mainCommentReplyRenderer.vue
+++ b/NUXT/components/Comments/mainCommentReplyRenderer.vue
@@ -31,18 +31,16 @@ import commentThreadRenderer from "~/components/Comments/commentThreadRenderer.v
 import continuationItemRenderer from "~/components/observer.vue";
 
 export default {
-  props: ["defaultContinuation", "parentComment", "showReplies"],
-
-  model: {
-    prop: "showReplies",
-    event: "changeState",
-  },
-
   components: {
     dialogBase,
     commentsHeaderRenderer,
     commentThreadRenderer,
     continuationItemRenderer,
   },
+  model: {
+    prop: "showReplies",
+    event: "changeState",
+  },
+  props: ["defaultContinuation", "parentComment", "showReplies"],
 };
 </script>
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss b/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
deleted file mode 100644
index 96c8ce2..0000000
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "~vuetify/src/styles/settings/_variables";
-$bottom-sheet-inset-width: 70% !default;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
deleted file mode 100644
index e82b45a..0000000
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import swipeableBottomSheet from "./swipeableBottomSheet";
-
-export { swipeableBottomSheet };
-export default swipeableBottomSheet;
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
deleted file mode 100644
index a4fc272..0000000
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import "./swipeableBottomSheet.sass";
-
-// Extensions
-import { VDialog } from "vuetify/lib";
-
-/* @vue/component */
-export default VDialog.extend({
-  name: "swipeable-bottom-sheet",
-
-  props: {
-    inset: Boolean,
-    maxWidth: [String, Number],
-    transition: {
-      type: String,
-      default: "bottom-sheet-transition",
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        ...VDialog.options.computed.classes.call(this),
-        "swipeable-bottom-sheet": true,
-        "swipeable-bottom-sheet--inset": this.inset,
-      };
-    },
-    contentClasses() {
-      return {
-        "swipeable-bottom-sheet__content": true,
-        "swipeable-bottom-sheet__content--active": this.isActive,
-      };
-    },
-  },
-});
diff --git a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass b/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
deleted file mode 100644
index 24c597d..0000000
--- a/NUXT/components/ExtendedComponents/swipeableBottomSheet/swipeableBottomSheet.sass
+++ /dev/null
@@ -1,44 +0,0 @@
-@import './_variables.scss'
-
-// Transition
-.bottom-sheet-transition
-  &-enter
-    transform: translateY(100%)
-
-  &-leave-to
-    transform: translateY(100%)
-
-// Block
-
-.swipeable-bottom-sheet
-
-  &.v-dialog
-    align-self: flex-end
-    border-radius: 0
-    flex: 0 1 auto
-    margin: 0
-    overflow: visible
-
-    &.swipeable-bottom-sheet--inset
-      max-width: $bottom-sheet-inset-width
-
-      @media #{map-get($display-breakpoints, 'xs-only')}
-        max-width: none
-    
-    &.v-dialog:not(.v-dialog--fullscreen)
-      max-height: 100%
-      height: 100%
-  
-.swipeable-bottom-sheet__content
-  align-items: center
-  display: flex
-  justify-content: center
-  pointer-events: none
-  position: absolute
-  transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
-  width: 100%
-  height: 100%
-  outline: none
-  inset: 0
-
-
diff --git a/NUXT/components/dialogBase.vue b/NUXT/components/dialogBase.vue
index 3fe32ef..1890511 100644
--- a/NUXT/components/dialogBase.vue
+++ b/NUXT/components/dialogBase.vue
@@ -4,7 +4,7 @@
       class="toolbar-container d-flex flex-column background"
       style="flex-direction: column !important"
     >
-      <v-toolbar color="background" flat>
+      <v-toolbar color="background" style="position: sticky; top: 0" flat>
         <slot name="header"></slot>
       </v-toolbar>
       <v-divider></v-divider>
diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 66950ce..09537af 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -241,21 +241,17 @@
         "
       />
 
-      <swipeable-bottom-sheet
+      <div
         v-if="loaded && video.commentData"
-        v-model="showComments"
-        hide-overlay
-        persistent
-        no-click-animation
-        style="z-index: 2 !important"
-        attach="#content-container"
+        :class="showComments ? 'comments-open' : ''"
+        class="scroll-y comments"
       >
         <mainCommentRenderer
           v-model="showComments"
           :comment-data="video.commentData"
           :default-continuation="video.commentContinuation"
         ></mainCommentRenderer>
-      </swipeable-bottom-sheet>
+      </div>
 
       <!-- <swipeable-bottom-sheet
       :v-model="showComments"
@@ -281,14 +277,12 @@
 </template>
 
 <script>
-import player from "~/components/Player/index.vue";
 import { Share } from "@capacitor/share";
 import { getCpn } from "~/plugins/utils";
-import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
+import player from "~/components/Player/index.vue";
 import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
-import SwipeableBottomSheet from "~/components/ExtendedComponents/swipeableBottomSheet";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 
 import backType from "~/plugins/classes/backType";
@@ -296,11 +290,9 @@ import backType from "~/plugins/classes/backType";
 export default {
   components: {
     player,
-    ShelfRenderer,
     VidLoadRenderer,
     ItemSectionRenderer,
     mainCommentRenderer,
-    SwipeableBottomSheet,
     SlimVideoDescriptionRenderer,
   },
   layout: "empty",
@@ -512,6 +504,22 @@ export default {
 </script>
 
 <style>
+.comments {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  opacity: 0;
+  height: 100%;
+  max-height: 100%;
+  position: absolute;
+  transform: translateY(100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.comments-open {
+  transform: translatey(0);
+  opacity: 1;
+}
 #watch-body {
   height: 100%;
   max-height: 100vh;

From c2cfa6087ce002d787fa3593b49904262d9bb3f8 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 27 Dec 2022 11:54:24 -0500
Subject: [PATCH 4/7] fix the previous fix

---
 NUXT/pages/watch.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 09537af..01211cd 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -513,11 +513,13 @@ export default {
   height: 100%;
   max-height: 100%;
   position: absolute;
+  pointer-events: none;
   transform: translateY(100%);
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 .comments-open {
   transform: translatey(0);
+  pointer-events: auto;
   opacity: 1;
 }
 #watch-body {

From 75b5aaf88dbd49b5815c9b1e10c07b9a48f9cc3f Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 27 Dec 2022 12:06:19 -0500
Subject: [PATCH 5/7] fix: little scroll bug

---
 NUXT/pages/watch.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/NUXT/pages/watch.vue b/NUXT/pages/watch.vue
index 01211cd..63be806 100644
--- a/NUXT/pages/watch.vue
+++ b/NUXT/pages/watch.vue
@@ -486,6 +486,7 @@ export default {
 
     // Toggle this.showComments to true or false. If it is true, then add the dismiss function to backStack.
     toggleComment() {
+      document.getElementById("content-container").scrollTo(0, 0);
       this.showComments = !this.showComments;
       if (this.showComments) {
         const dismissComment = new backType(
@@ -508,8 +509,8 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2;
   opacity: 0;
+  z-index: 2;
   height: 100%;
   max-height: 100%;
   position: absolute;

From 1f4cda19333c9e45e38fd14a7e27e65e6e40bd2e Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 27 Dec 2022 12:36:30 -0500
Subject: [PATCH 6/7] back action for replies drawer closes #399

---
 NUXT/components/Comments/mainCommentRenderer.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/NUXT/components/Comments/mainCommentRenderer.vue b/NUXT/components/Comments/mainCommentRenderer.vue
index c2b1be8..973bbcc 100644
--- a/NUXT/components/Comments/mainCommentRenderer.vue
+++ b/NUXT/components/Comments/mainCommentRenderer.vue
@@ -63,6 +63,8 @@ import commentsHeaderRenderer from "~/components/Comments/commentsHeaderRenderer
 import mainCommentReplyRenderer from "~/components/Comments/mainCommentReplyRenderer.vue";
 import continuationItemRenderer from "~/components/observer.vue";
 
+import backType from "~/plugins/classes/backType";
+
 export default {
   components: {
     dialogBase,
@@ -144,6 +146,18 @@ export default {
 
     openReply(event) {
       this.showReply = true;
+      if (this.showReply) {
+        const dismissReply = new backType(
+          () => {
+            this.showReply = false;
+          },
+          () => {
+            return this.showReply;
+          }
+        );
+        this.$vuetube.addBackAction(dismissReply);
+      }
+
       this.replyData = { parent: event, replyContinuation: null };
     },
   },

From 63ac26a3202015455310515b87954c66624c76df Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Tue, 27 Dec 2022 15:24:42 -0500
Subject: [PATCH 7/7] phancy non-shift bottom nav animation

---
 NUXT/components/bottomNavigation.vue | 55 ++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/NUXT/components/bottomNavigation.vue b/NUXT/components/bottomNavigation.vue
index ab7cc66..94f5b76 100644
--- a/NUXT/components/bottomNavigation.vue
+++ b/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"
-      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;