From 454709b444d628c892614151cc32edcad00c61ec Mon Sep 17 00:00:00 2001
From: Atanas Krondev <krondev@gmail.com>
Date: Fri, 11 Jun 2021 11:08:41 +0300
Subject: [PATCH] Add Topics on mobile

---
 src/assets/iconHashtag.svg |  6 ++++++
 src/router.js              |  6 ++++++
 src/views/FeedList.vue     | 16 ++++++++++++++++
 src/views/Trending.vue     | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 63 insertions(+)
 create mode 100644 src/assets/iconHashtag.svg
 create mode 100644 src/views/Trending.vue

diff --git a/src/assets/iconHashtag.svg b/src/assets/iconHashtag.svg
new file mode 100644
index 000000000..ee1f5116a
--- /dev/null
+++ b/src/assets/iconHashtag.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 490 490">
+<path fill="currentColor" d="M64.333,490h58.401l33.878-137.69h122.259L245.39,490h58.401l33.878-137.69h119.92v-48.162h-108.24l29.2-117.324h79.04
+	v-48.162H390.23L424.108,0H365.31l-33.878,138.661H208.79L242.668,0h-58.415l-33.864,138.661H32.411v48.162h106.298l-28.818,117.324
+	h-77.48v48.162h65.8L64.333,490z M197.11,186.824h122.642l-29.2,117.324H168.292L197.11,186.824z"/>
+</svg>
diff --git a/src/router.js b/src/router.js
index f44d8114a..070dc7f3c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -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: '/',
diff --git a/src/views/FeedList.vue b/src/views/FeedList.vue
index ed9c4a3a8..481cb274f 100644
--- a/src/views/FeedList.vue
+++ b/src/views/FeedList.vue
@@ -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;
+        }
+      }
     }
   }
 
diff --git a/src/views/Trending.vue b/src/views/Trending.vue
new file mode 100644
index 000000000..c4bbb112b
--- /dev/null
+++ b/src/views/Trending.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>