From a95a0757554593a3ca69a96b8a26ec2861bd0fe0 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 15 Sep 2023 00:29:17 +0300
Subject: [PATCH] Feed menu horizontal scroll for mobile

---
 .../Feed/Sidebar/Sidebar.module.scss          | 51 +++++++++++++++----
 src/components/Feed/Sidebar/Sidebar.tsx       |  2 +-
 src/components/Views/Feed.module.scss         |  4 ++
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss
index 7e155ea3..ce8ab12d 100644
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@@ -4,18 +4,23 @@
   position: sticky;
   top: 120px;
 
-  ul > li {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  @include media-breakpoint-up(md) {
+    ul > li {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .sidebarItemName {
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    align-items: baseline;
     display: flex;
-    align-items: center;
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .selected {
@@ -83,9 +88,9 @@
     height: 2.4rem;
     margin-bottom: 0.2rem;
     margin-right: 0.8rem;
+    min-width: 2.4rem;
     text-align: center;
     vertical-align: middle;
-    width: 2.4rem;
 
     img {
       height: 100%;
@@ -127,7 +132,35 @@
   }
 }
 
+.feedFilters {
+  @include media-breakpoint-down(md) {
+    display: flex;
+    overflow: auto;
+
+    li {
+      margin-right: 3rem !important;
+
+      &:last-child {
+        margin-right: 0 !important;
+      }
+    }
+  }
+
+  .sidebarItemName {
+    align-items: center;
+  }
+}
+
 .subscriptions {
+  @include media-breakpoint-down(md) {
+    display: flex;
+    overflow: auto;
+
+    li {
+      margin-right: 3rem !important;
+    }
+  }
+
   .icon {
     text-align: center;
 
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index f9f2c5f1..f4d41287 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -37,7 +37,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
 
   return (
     <div class={styles.sidebar}>
-      <ul>
+      <ul class={styles.feedFilters}>
         <li>
           <a
             href={getPagePath(router, 'feed')}
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index 96d2dc22..6a920648 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -8,6 +8,10 @@
 
   h4 {
     margin-bottom: 0.8em;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
   }
 
   ul,