feat: menu for mobile and improvements

src/App.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="uk-flex">
-        <Sidebar style="flexShrink: 0" />
+        <Menu
+            style="flexShrink: 0"
+            :collapsed="menuCollapsed"
+            :toggleCollapsed="() => (menuCollapsed = !menuCollapsed)"
+        />
         <main
             class="uk-container uk-container-expand"
             style="height: 100vh; overflow: scroll;"
@@ -9,7 +13,7 @@
         >
             <router-view v-slot="{ Component }">
                 <keep-alive :max="5">
-                    <component :is="Component" :key="$route.fullPath" />
+                    <component :is="Component" :key="$route.fullPath" :menuCollapsed="menuCollapsed" />
                 </keep-alive>
             </router-view>
 
@@ -28,10 +32,13 @@
 </template>
 
 <script>
-import Sidebar from "@/components/Sidebar";
+import Menu from "@/components/Menu";
 export default {
     components: {
-        Sidebar,
+        Menu,
+    },
+    data() {
+        return { menuCollapsed: false };
     },
     mounted() {
         if (window.location.pathname === "/" || window.location.pathname.length == 0)

src/components/Menu.vue

@@ -0,0 +1,28 @@
+<template>
+    <MenuDesktop v-if="!isMobile" />
+    <MenuMobile v-else />
+</template>
+
+<script>
+import MenuDesktop from "./MenuDesktop.vue";
+import MenuMobile from "./MenuMobile.vue";
+
+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;
+        },
+    },
+};
+</script>

src/components/MenuDesktop.vue

@@ -1,62 +1,74 @@
 <template>
     <div
         class="uk-height-viewport uk-flex uk-flex-column uk-flex-middle"
-        :class="{ collapsed, 'narrow-sidebar': narrowSidebar }"
+        :class="{ 'collapse-text': collapseText }"
-        style="transition: width 0.5s; padding: 48px 24px; height: 100vh;"
+        style="transition: width 400ms; padding: 32px 24px; height: 100vh;"
         :style="{ width: collapsed ? '78px' : '291px', backgroundColor: secondaryBackgroundColor }"
     >
         <div
-            class="uk-width-1-1 uk-flex uk-flex-middle"
+            class="uk-width-1-1 uk-flex uk-flex-middle uk-flex-between"
-            style="margin-bottom: 100px; height: 50px;"
+            style="margin-bottom: 100px; height: 50px; transition: padding 400ms; padding: 0 14px;"
-            :style="{ padding: narrowSidebar ? '0' : '0 14px' }"
+            :style="collapseText ? 'padding: 0;' : {}"
             :class="{ 'uk-flex uk-flex-center': collapsed }"
         >
-            <div style="flex: 0.50 0 0%;">
+            <div style="transition: padding 400ms; flex: 1 0 30px;" :style="collapseText ? 'padding: 0 8px;' : {}">
-                <font-awesome-icon class="button highlight" @click="collapsed = !collapsed" icon="bars" />
+                <font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
             </div>
-            <div class="uk-flex uk-flex-middle" style="gap: 16px; flex: 1;" v-if="!narrowSidebar">
+            <div
-                <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !narrowSidebar }" />
+                class="uk-flex uk-flex-middle"
+                style="gap: 16px; transition: transform 300ms, gap 300ms;"
+                :style="collapseText ? 'transform: scale(0); gap: 0;' : 'transition-delay: 150ms'"
+                v-if="!hideText"
+            >
+                <img src="/img/pipedPlay.svg" :class="{ 'piped-play': !hideText }" />
 
                 <img src="/img/piped.svg" />
             </div>
         </div>
 
         <nav class="uk-nav uk-flex-1 uk-width-1-1">
-            <ul class="uk-flex uk-flex-column" :class="{ 'uk-flex-middle': narrowSidebar }" style="gap: 20px;">
+            <ul class="uk-flex uk-flex-column" style="gap: 20px;">
                 <li>
-                    <router-link to="/" class="highlight sidebar-link uk-flex">
+                    <router-link
+                        to="/"
+                        class="highlight sidebar-link uk-flex"
+                        :style="collapseText ? 'padding: 6px 8px;' : {}"
+                    >
                         <font-awesome-icon icon="fire" />
-                        <span v-if="!narrowSidebar">Trending</span>
+                        <span v-if="!hideText" v-t="'titles.trending'" />
                     </router-link>
                 </li>
                 <li>
                     <router-link to="/feed" class="highlight sidebar-link uk-flex">
                         <font-awesome-icon icon="rss" />
-                        <span v-if="!narrowSidebar">My feed</span>
+                        <span v-if="!hideText" v-t="'titles.feed'" />
                     </router-link>
                 </li>
                 <li>
                     <router-link to="/subscriptions" class="highlight sidebar-link uk-flex">
                         <font-awesome-icon icon="heart" />
-                        <span v-if="!narrowSidebar">Subscriptions</span>
+                        <span v-if="!hideText" v-t="'titles.subscriptions'" />
                     </router-link>
                 </li>
             </ul>
         </nav>
 
-        <router-link to="/preferences" class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle">
+        <router-link
+            to="/preferences"
+            class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
+            style="text-decoration: none;"
+        >
             <font-awesome-icon icon="cog" />
-            <span v-if="!narrowSidebar">Settings</span>
+            <span v-if="!hideText" v-t="'titles.preferences'" />
         </router-link>
 
         <button
             class="highlight logout-button button sidebar-link uk-width-1-1 uk-flex uk-flex-center uk-flex-middle"
-            :class="{ 'uk-flex-center': collapsed }"
             :style="{ backgroundColor: backgroundColor }"
             style="border-radius: 9999px; border: none; margin-top: 20px;"
             @click="logout"
         >
-            <span v-if="!narrowSidebar">Log out</span>
+            <span v-if="!hideText">Log out</span>
             <font-awesome-icon icon="sign-out-alt" />
         </button>
     </div>
@@ -66,10 +78,14 @@
 export default {
     data() {
         return {
-            collapsed: false,
+            collapseText: this.collapsed,
-            narrowSidebar: false,
+            hideText: this.collapsed,
         };
     },
+    props: {
+        collapsed: Boolean,
+        toggleCollapsed: Function,
+    },
     methods: {
         logout() {
             alert("logging out");
@@ -77,11 +93,17 @@ export default {
     },
     watch: {
         collapsed(collapsed) {
-            if (collapsed)
+            if (collapsed) {
+                this.collapseText = true;
                 setTimeout(() => {
-                    this.narrowSidebar = collapsed;
+                    this.hideText = true;
-                }, 350);
+                }, 450);
-            else this.narrowSidebar = collapsed;
+            } else {
+                this.hideText = false;
+                setTimeout(() => {
+                    this.collapseText = false;
+                }, 0);
+            }
         },
     },
 };
@@ -147,22 +169,20 @@ export default {
 
 .sidebar-link {
     gap: 14px !important;
-    padding: 10px 14px;
+    padding: 10px 12px;
     border-radius: 12px;
-    transition: padding 0.5s;
+    transition: padding 400ms, gap 400ms;
 }
 
-.collapsed .sidebar-link {
+.collapse-text .sidebar-link {
     padding: 6px;
-}
+    gap: 0px !important;
-.narrow-sidebar .sidebar-link {
-    width: fit-content;
 }
 
 .sidebar-link span {
-    transition: font-size 500ms;
+    transition: font-size 400ms, padding 400ms;
 }
-.collapsed .sidebar-link span {
+.collapse-text .sidebar-link span {
     font-size: 0;
 }
 

src/components/MenuMobile.vue

@@ -0,0 +1,163 @@
+<template>
+    <div
+        class="uk-flex uk-flex-column uk-flex-middle uk-position-fixed uk-position-top"
+        :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' }"
+    >
+        <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;">
+                <font-awesome-icon class="button highlight" @click="toggleCollapsed()" icon="bars" />
+            </div>
+            <div class="uk-flex uk-flex-middle" style="gap: 12px;" v-if="!hideText">
+                <img src="/img/pipedPlay.svg" style="height: 26px;" />
+
+                <img src="/img/piped.svg" style="height: 22px;" />
+            </div>
+        </div>
+
+        <nav class="uk-nav uk-flex-1 uk-width-1-1">
+            <ul class="uk-flex uk-flex-column" style="gap: 20px;">
+                <li>
+                    <router-link to="/" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="fire" />
+                        <span v-t="'titles.trending'" />
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/feed" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="rss" />
+                        <span v-t="'titles.feed'" />
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/subscriptions" @click="toggleCollapsed()" class="highlight sidebar-link uk-flex">
+                        <font-awesome-icon icon="heart" />
+                        <span v-t="'titles.subscriptions'" />
+                    </router-link>
+                </li>
+            </ul>
+        </nav>
+
+        <router-link
+            to="/preferences"
+            @click="toggleCollapsed()"
+            class="highlight sidebar-link uk-width-1-1 uk-flex uk-flex-middle"
+            style="text-decoration: none;"
+        >
+            <font-awesome-icon icon="cog" />
+            <span v-t="'titles.preferences'" />
+        </router-link>
+
+        <button
+            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"
+        >
+            <span v-t="'actions.logout'">Log out</span>
+            <font-awesome-icon icon="sign-out-alt" />
+        </button>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            collapseText: false,
+            hideText: false,
+        };
+    },
+    props: {
+        collapsed: Boolean,
+        toggleCollapsed: Function,
+    },
+    methods: {
+        logout() {
+            alert("logging out");
+        },
+    },
+};
+</script>
+
+<style>
+@keyframes bump {
+    /* heartbeat */
+    /* 0% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.25);
+    }
+    40% {
+        transform: scale(1);
+    }
+    60% {
+        transform: scale(1.25);
+    }
+    70% {
+        transform: scale(1.25);
+    }
+    90% {
+        transform: scale(1);
+    } */
+
+    /* right bump */
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+    45% {
+        transform: translate3d(8px, 0, 0);
+    }
+    55% {
+        transform: translate3d(8px, 0, 0);
+    }
+    100% {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.piped-play {
+    animation: bump 300ms ease-in-out 500ms;
+}
+@media (prefers-reduced-motion) {
+    .piped-play {
+        animation: none;
+    }
+}
+
+.logout-button {
+    white-space: nowrap;
+}
+
+.button:hover {
+    cursor: pointer;
+}
+
+.highlight {
+    color: #abb2c6;
+}
+
+.sidebar-link {
+    gap: 14px !important;
+    padding: 10px 12px;
+    border-radius: 12px;
+    transition: padding 500ms, gap 500ms;
+}
+
+.sidebar-link span {
+    transition: font-size 500ms, padding 500ms;
+}
+.collapse-text .sidebar-link span {
+    font-size: 0;
+}
+
+.highlight:hover,
+.router-link-active {
+    color: #fff;
+}
+.router-link-active {
+    background: linear-gradient(#da22ff, #9733ee);
+}
+</style>

src/components/TrendingPage.vue

@@ -1,7 +1,31 @@
 <template>
-    <h1 v-t="'titles.trending'" class="uk-text-bold uk-text-center" />
+    <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
+        <form class="uk-search">
+            <div class="uk-position-relative">
+                <input
+                    class="uk-search-input"
+                    style="border-radius: 9999px; padding: 12px 18px 12px 40px; width: 35ch;"
+                    :style="{ backgroundColor: secondaryBackgroundColor }"
+                    type="search"
+                    :placeholder="$t('actions.search')"
+                />
+                <font-awesome-icon
+                    icon="search"
+                    style="position: absolute; x: 0px; y: 0px;"
+                    class="uk-position-center-left uk-position-small"
+                />
+            </div>
+        </form>
 
-    <hr />
+        <div
+            class="uk-flex uk-flex-middle"
+            style="gap: 16px; transition: transform 400ms; transform-origin: left;"
+            :style="!menuCollapsed ? 'transform: scale(0);' : {}"
+        >
+            <img src="/img/pipedPlay.svg" style="height: 36px;" />
+            <img src="/img/piped.svg" />
+        </div>
+    </div>
 
     <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
@@ -22,6 +46,9 @@ export default {
     components: {
         VideoItem,
     },
+    props: {
+        menuCollapsed: Boolean,
+    },
     data() {
         return {
             videos: [],

src/locales/en.json

@@ -12,6 +12,7 @@
         "watch_on": "Watch on"
     },
     "actions": {
+        "logout": "Log out",
         "subscribe": "Subscribe",
         "unsubscribe": "Unsubscribe",
         "view_subscriptions": "View Subscriptions",
@@ -70,14 +71,14 @@
         "pinned_by": "Pinned by"
     },
     "preferences": {
-        "instance_name":"Instance Name",
+        "instance_name": "Instance Name",
-        "instance_locations":"Instance Locations",
+        "instance_locations": "Instance Locations",
-        "has_cdn":"Has CDN?",
+        "has_cdn": "Has CDN?",
-        "ssl_score":"SSL Score"
+        "ssl_score": "SSL Score"
     },
     "login": {
-        "username":"Username",
+        "username": "Username",
-        "password":"Password"
+        "password": "Password"
     },
     "video": {
         "videos": "Videos",

src/main.js

@@ -14,6 +14,7 @@ import {
     faFire,
     faCog,
     faSignOutAlt,
+    faSearch,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -34,6 +35,7 @@ library.add(
     faFire,
     faCog,
     faSignOutAlt,
+    faSearch,
 );
 
 import("uikit/dist/css/uikit-core.css");