feat: a bit of the search bar and improvements to the menu

src/App.vue

@@ -8,7 +8,7 @@
         <main
             class="uk-container uk-container-expand"
             style="height: 100vh; overflow: scroll;"
-            :style="[{ background: backgroundColor, colour: foregroundColor }]"
+            :style="{ background: backgroundColor, colour: foregroundColor, marginTop: isMobile ? '70px' : 0 }"
             :class="{ 'uk-light': darkMode }"
         >
             <router-view v-slot="{ Component }">
@@ -33,10 +33,17 @@
 
 <script>
 import Menu from "@/components/Menu";
+
+import { useIsMobile } from "./store";
+
 export default {
     components: {
         Menu,
     },
+    setup() {
+        const isMobile = useIsMobile();
+        return { isMobile };
+    },
     data() {
         return { menuCollapsed: false };
     },
@@ -85,7 +92,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style>
 h1,
 p,
 a,

src/components/Menu.vue

@@ -1,28 +1,26 @@
 <template>
-    <MenuDesktop v-if="!isMobile" />
-    <MenuMobile v-else />
+    <MenuDesktop :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-if="!isMobile" />
+    <MenuMobile :collapsed="collapsed" :toggleCollapsed="toggleCollapsed" v-else />
 </template>
 
 <script>
 import MenuDesktop from "./MenuDesktop.vue";
 import MenuMobile from "./MenuMobile.vue";
 
+import { useIsMobile } from "../store";
+
 export default {
     components: {
         MenuDesktop,
         MenuMobile,
     },
-    data() {
-        return { isMobile: false };
-    },
-    mounted() {
-        this.updateMenu();
-        window.addEventListener("resize", this.updateMenu);
-    },
-    methods: {
-        updateMenu() {
-            this.isMobile = window.matchMedia("screen and (max-width: 800px)").matches;
+    props: {
+        collapsed: Boolean,
+        toggleCollapse: Function,
     },
+    setup() {
+        const isMobile = useIsMobile();
+        return { isMobile };
     },
 };
 </script>

src/components/MenuDesktop.vue

@@ -17,7 +17,7 @@
             <div
                 class="uk-flex uk-flex-middle"
                 style="gap: 16px; transition: transform 300ms, gap 300ms;"
-                :style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 150ms'"
+                :style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 170ms'"
                 v-if="!hideText"
             >
                 <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
@@ -147,7 +147,8 @@ export default {
 }
 
 .piped-play {
-    animation: bump 300ms ease-in-out 600ms;
+    animation: bump 300ms ease-in-out;
+    animation-delay: 700ms !important;
 }
 @media (prefers-reduced-motion) {
     .piped-play {
@@ -191,6 +192,6 @@ export default {
     color: #fff;
 }
 .router-link-active {
-    background: linear-gradient(#da22ff, #9733ee);
+    background: linear-gradient(to right, #da22ff, #9733ee);
 }
 </style>

src/components/MenuMobile.vue

@@ -1,12 +1,15 @@
 <template>
     <div
         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 }"
         style="padding: 24px 12px; width: 100vw; box-sizing: border-box; z-index: 9999; transition: min-height 40ms, height 400ms; overflow: hidden;"
-        :style="{ backgroundColor: secondaryBackgroundColor, minHeight: 0, height: collapsed ? '70px' : '100vh' }"
+        :style="{ backgroundColor: secondaryBackgroundColor, minHeight: 0, height: !collapsed ? '70px' : '100vh' }"
     >
         <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;">
+            <div
+                style="transition: padding 500ms, transform 500ms;"
+                :style="collapsed ? 'transform: rotate(90deg)' : {}"
+            >
                 <font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
             </div>
             <div class="uk-flex uk-flex-middle" style="gap: 12px;" v-if="!hideText">
@@ -72,6 +75,12 @@ export default {
     props: {
         collapsed: Boolean,
         toggleCollapsed: Function,
+
+        searchText: String,
+        onKeyUp: Function,
+        onInputFocus: Function,
+        onInputBlur: Function,
+        onSearchTextChange: Function,
     },
     methods: {
         logout() {
@@ -158,6 +167,6 @@ export default {
     color: #fff;
 }
 .router-link-active {
-    background: linear-gradient(#da22ff, #9733ee);
+    background: linear-gradient(to right, #da22ff, #9733ee);
 }
 </style>

src/components/TrendingPage.vue

@@ -1,10 +1,22 @@
 <template>
+    <h1
+        v-if="isMobile"
+        v-t="'titles.trending'"
+        style="margin-bottom: 0; padding-top: 34px; font-weight: bold;"
+        class="uk-heading-small"
+    />
+
     <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
-        <form class="uk-search">
+        <form
+            class="uk-search"
+            :style="{
+                width: isMobile ? '100%' : '35ch',
+            }"
+        >
             <div class="uk-position-relative">
                 <input
                     class="uk-search-input"
-                    style="border-radius: 9999px; padding: 12px 18px 12px 40px; width: 35ch;"
+                    style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
                     :style="{ backgroundColor: secondaryBackgroundColor }"
                     type="search"
                     :placeholder="$t('actions.search')"
@@ -18,6 +30,7 @@
         </form>
 
         <div
+            v-if="!isMobile"
             class="uk-flex uk-flex-middle"
             style="gap: 16px; transition: transform 400ms; transform-origin: left;"
             :style="!menuCollapsed ? 'transform: scale(0);' : {}"
@@ -32,7 +45,7 @@
             v-for="video in videos"
             :key="video.url"
             :style="[{ background: backgroundColor }]"
-            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            class="uk-width-1-1 uk-width-1-2@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
         >
             <VideoItem :video="video" height="118" width="210" />
         </div>
@@ -42,6 +55,8 @@
 <script>
 import VideoItem from "@/components/VideoItem.vue";
 
+import { useIsMobile } from "../store";
+
 export default {
     components: {
         VideoItem,
@@ -49,6 +64,10 @@ export default {
     props: {
         menuCollapsed: Boolean,
     },
+    setup() {
+        const isMobile = useIsMobile();
+        return { isMobile };
+    },
     data() {
         return {
             videos: [],

src/main.js

@@ -232,6 +232,12 @@ const mixin = {
             }
             return "en";
         },
+        data() {
+            return { isMobile: false };
+        },
+        isMobile() {
+            return window.matchMedia("screen and (max-width: 800px)").matches;
+        },
     },
 };
 

src/store.js

@@ -0,0 +1,11 @@
+import { ref } from "vue";
+
+const isMobile = ref(false);
+export function useIsMobile() {
+    isMobile.value = window.matchMedia("screen and (max-width: 800px)").matches;
+    window.addEventListener("resize", () => {
+        isMobile.value = window.matchMedia("screen and (max-width: 800px)").matches;
+    });
+
+    return isMobile;
+}