fix: mobile menu

src/components/MenuDesktop.vue

@@ -2,7 +2,7 @@
     <div
         id="menu-desktop"
         class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
-        :class="{ 'collapse-text': collapseText }"
+        :class="{ 'collapse-text': collapseText, 'enable-animations': enableAnimations }"
         style="padding: 32px 24px; height: 100vh;"
         :style="{
             width: collapsed ? '78px' : '291px',
@@ -47,7 +47,6 @@
                     <router-link
                         to="/"
                         class="highlight sidebar-link uk-flex"
-                        :class="{ 'enable-animations': enableAnimations }"
                         :style="collapseText ? 'padding: 6px 8px;' : {}"
                     >
                         <font-awesome-icon icon="fire" />
@@ -55,21 +54,13 @@
                     </router-link>
                 </li>
                 <li>
-                    <router-link
+                    <router-link to="/feed" class="highlight sidebar-link uk-flex">
-                        to="/feed"
-                        class="highlight sidebar-link uk-flex"
-                        :class="{ 'enable-animations': enableAnimations }"
-                    >
                         <font-awesome-icon icon="rss" />
                         <span v-if="!hideText" v-t="'titles.feed'" />
                     </router-link>
                 </li>
                 <li>
-                    <router-link
+                    <router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
-                        to="/subscriptions"
-                        class="highlight sidebar-link uk-flex"
-                        :class="{ 'enable-animations': enableAnimations }"
-                    >
                         <font-awesome-icon icon="heart" />
                         <span v-if="!hideText" v-t="'titles.subscriptions'" />
                     </router-link>
@@ -80,7 +71,6 @@
         <router-link
             to="/preferences"
             class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
-            :class="{ 'enable-animations': enableAnimations }"
             style="text-decoration: none;"
         >
             <font-awesome-icon icon="cog" />
@@ -89,7 +79,6 @@
 
         <button
             class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
-            :class="{ 'enable-animations': enableAnimations }"
             :style="{ backgroundColor: backgroundColor }"
             style="border-radius: 9999px; border: none; margin-top: 20px;"
             @click="logout()"
@@ -184,7 +173,7 @@ export default {
     }
 }
 
-#menu-desktop .piped-play.enable-animations {
+#menu-desktop.enable-animations .piped-play {
     animation: bump 300ms ease-in-out;
     animation-delay: 700ms !important;
 }
@@ -211,7 +200,7 @@ export default {
     padding: 10px 12px;
     border-radius: 12px;
 }
-#menu-desktop .sidebar-link.enable-animations {
+#menu-desktop.enable-animations .sidebar-link {
     transition: padding 400ms, gap 400ms;
 }
 
@@ -220,7 +209,7 @@ export default {
     gap: 0px !important;
 }
 
-#menu-desktop .sidebar-link.enable-animations span {
+#menu-desktop.enable-animations .sidebar-link span {
     transition: font-size 400ms;
 }
 .collapse-text .sidebar-link span {

src/components/MenuMobile.vue

@@ -2,14 +2,21 @@
     <div
         id="menu-mobile"
         class="uk-flex uk-flex-column uk-flex-middle uk-position-fixed uk-position-top"
-        :class="{ 'uk-height-viewport': !collapsed }"
+        :class="{ 'uk-height-viewport': !collapsed, 'enable-animations': enableAnimations }"
-        style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; transition: min-height 40ms, height 400ms; overflow: hidden;"
+        style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; overflow: hidden;"
-        :style="{ backgroundColor: secondaryBackgroundColor, minHeight: 0, height: !collapsed ? '70px' : '100vh' }"
+        :style="{
+            backgroundColor: secondaryBackgroundColor,
+            minHeight: 0,
+            height: !collapsed ? '70px' : '100vh',
+            transition: enableAnimations ? 'min-height 40ms, height 400ms' : 'none',
+        }"
     >
         <div class="uk-width-1-1 uk-flex uk-flex-middle" style="margin-bottom: 100px; padding: 0 14px; gap: 32px;">
             <div
-                style="transition: padding 500ms, transform 500ms;"
+                :style="{
-                :style="collapsed ? 'transform: rotate(90deg)' : {}"
+                    transform: collapsed ? 'rotate(90deg)' : 'none',
+                    transition: enableAnimations ? 'padding 500ms, transform 500ms' : 'none',
+                }"
             >
                 <font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
             </div>
@@ -57,7 +64,7 @@
             class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
             :style="{ backgroundColor: backgroundColor }"
             style="border-radius: 9999px; border: none; margin-top: 20px;"
-            @click="logout"
+            @click="logout()"
         >
             <span v-t="'actions.logout'" />
             <font-awesome-icon icon="sign-out-alt" />
@@ -69,32 +76,18 @@
 import { useMenuCollapsed } from "../store";
 
 export default {
-    data() {
-        return {
-            collapseText: false,
-            hideText: false,
-        };
-    },
-
     setup() {
         const { menuCollapsed, toggleCollapsed } = useMenuCollapsed();
         return { collapsed: menuCollapsed, toggleCollapsed };
     },
-    props: {
-        searchText: String,
-        onKeyUp: Function,
-        onInputFocus: Function,
-        onInputBlur: Function,
-        onSearchTextChange: Function,
-    },
     methods: {
         logout() {
             alert("logging out");
         },
     },
     computed: {
-        disableAnimations(_this) {
+        enableAnimations(_this) {
-            return _this.getPreferenceBoolean("disableAnimations", false);
+            return !_this.getPreferenceBoolean("disableAnimations", true);
         },
     },
 };
@@ -137,11 +130,11 @@ export default {
     }
 }
 
-#menu-mobile .piped-play {
+#menu-mobile.enable-animations .piped-play {
     animation: bump 300ms ease-in-out 500ms;
 }
 @media (prefers-reduced-motion) {
-    .piped-play {
+    #menu-mobile .piped-play {
         animation: none;
     }
 }
@@ -163,11 +156,11 @@ export default {
     padding: 10px 12px;
     border-radius: 12px;
 }
-#menu-mobile .sidebar-link.enable-animations {
+#menu-mobile.enable-animations .sidebar-link {
     transition: padding 400ms, gap 400ms;
 }
 
-#menu-mobile .sidebar-link span {
+#menu-mobile.enable-animations .sidebar-link span {
     transition: font-size 500ms, padding 500ms;
 }
 #menu-mobile.collapse-text .sidebar-link span {

src/components/Preferences.vue

@@ -283,7 +283,7 @@ export default {
             enabledCodecs: ["av1", "vp9", "avc"],
             disableLBRY: false,
             proxyLBRY: false,
-            disableAnimations: false,
+            disableAnimations: true,
         };
     },
     activated() {
@@ -372,7 +372,7 @@ export default {
             this.enabledCodecs = this.getPreferenceString("enabledCodecs", "av1,vp9,avc").split(",");
             this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
             this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
-            this.disableAnimations = this.getPreferenceBoolean("disableAnimations", false);
+            this.disableAnimations = this.getPreferenceBoolean("disableAnimations", true);
             if (this.selectedLanguage != "en") {
                 try {
                     this.CountryMap = await import("@/utils/CountryMaps/" + this.selectedLanguage + ".json").then(