Add Topics on mobile

Author: AtanasKrondev

src/assets/iconHashtag.svg

@@ -24,6 +24,7 @@ import WordBazaarCreateToken from './views/WordBazaarCreateToken.vue';
 import WordBazaarGetAe from './views/WordBazaarGetAe.vue';
 import WordBazaarHowItWorks from './views/WordBazaarHowItWorks.vue';
 import WordDetail from './views/WordDetail.vue';
+import Trending from './views/Trending.vue';
 
 const routes = [
   {
@@ -177,6 +178,11 @@ const routes = [
       else next();
     },
   },
+  {
+    path: '/trending',
+    name: 'trending',
+    component: Trending,
+  },
   {
     path: '*',
     redirect: '/',

src/router.js

@@ -30,6 +30,12 @@
             {{ $t('views.FeedList.posts') }}
           </span>
         </FilterButton>
+        <FilterButton
+          class="trending"
+          to="/trending"
+        >
+          <IconHashtag />
+        </FilterButton>
       </div>
       <div class="not-bootstrap-row">
         <ButtonPlain
@@ -84,6 +90,7 @@ import FilterButton from '../components/FilterButton.vue';
 import IconFeed from '../assets/iconFeed.svg?icon-component';
 import IconDiamond from '../assets/iconDiamond.svg?icon-component';
 import IconPosts from '../assets/iconPosts.svg?icon-component';
+import IconHashtag from '../assets/iconHashtag.svg?icon-component';
 
 export default {
   components: {
@@ -96,6 +103,7 @@ export default {
     IconFeed,
     IconDiamond,
     IconPosts,
+    IconHashtag,
   },
   props: {
     query: { type: String, default: '' },
@@ -146,6 +154,14 @@ export default {
       @include smallest {
         font-size: 14px;
       }
+
+      &.trending {
+        display: none;
+
+        @include mobile {
+          display: inline-block;
+        }
+      }
     }
   }
 

src/views/FeedList.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="trending">
+    <BackButtonRibbon>
+      <template #title>
+        {{ $t('Trending topics') }}
+      </template>
+    </BackButtonRibbon>
+    <TopicList />
+  </div>
+</template>
+
+<script>
+import BackButtonRibbon from '../components/BackButtonRibbon.vue';
+import TopicList from '../components/TopicList.vue';
+
+export default {
+  components: { BackButtonRibbon, TopicList },
+};
+</script>
+
+<style lang="scss" scoped>
+.trending {
+  .actions-ribbon {
+    display: flex;
+
+    ::v-deep .title {
+      white-space: nowrap;
+    }
+  }
+
+  .topic-list {
+    padding: 0 8px;
+  }
+}
+</style>