Feed menu horizontal scroll for mobile

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -4,18 +4,23 @@
   position: sticky;
   top: 120px;
 
-  ul > li {
+  @include media-breakpoint-up(md) {
-    white-space: nowrap;
+    ul > li {
-    overflow: hidden;
+      white-space: nowrap;
-    text-overflow: ellipsis;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .sidebarItemName {
-    position: relative;
+    align-items: baseline;
-    overflow: hidden;
-    text-overflow: ellipsis;
     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;
 

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')}

src/components/Views/Feed.module.scss

@@ -8,6 +8,10 @@
 
   h4 {
     margin-bottom: 0.8em;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
   }
 
   ul,