Feed styles fixes

src/components/Feed/Sidebar.module.scss

@@ -1,3 +1,11 @@
+.sidebar {
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+  padding-right: 1rem;
+  position: sticky;
+  top: 120px;
+}
+
 .counter {
   align-items: center;
   align-self: flex-start;
@@ -29,6 +37,7 @@
 .settings {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2em;
 }
 
 a {

src/components/Feed/Sidebar.tsx

@@ -29,7 +29,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
   }
 
   return (
-    <>
+    <div class={styles.sidebar}>
       <ul>
         <li>
           <a href="#">
@@ -78,6 +78,7 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
             <Icon name="feed-notifications" class={styles.icon} />
             уведомления
           </a>
+          <span class={styles.counter}>283</span>
         </li>
       </ul>
 
@@ -119,6 +120,6 @@ export const FeedSidebar = (props: FeedSidebarProps) => {
           {t('Feed settings')}
         </a>
       </div>
-    </>
+    </div>
   )
 }

src/components/Nav/Header.module.scss

@@ -117,6 +117,10 @@
 
     &:hover {
       background: none;
+
+      img {
+        filter: none;
+      }
     }
   }
 }

src/components/Views/Feed.module.scss

@@ -14,16 +14,21 @@
   }
 
   ul {
-    margin-bottom: 3rem;
+    margin: 0 0 3rem;
   }
 
   li {
     display: flex;
     justify-content: space-between;
     margin: 0 0 1rem;
+    white-space: nowrap;
+    width: 100%;
 
     a {
       margin-right: 0.5em;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 

src/components/Views/Feed.tsx

@@ -78,12 +78,13 @@ export const FeedView = () => {
   return (
     <>
       <div class="wide-container feed">
-        <div class="row">
+        <div class="shift-content">
-          <div class={clsx('col-md-3', styles.feedNavigation)}>
+          <div class={clsx('left-col', styles.feedNavigation)}>
             <FeedSidebar authors={sortedAuthors()} />
           </div>
 
-          <div class="col-md-6">
+          <div class="row">
+            <div class="col-md-8">
               <ul class="feed-filter">
                 <Show when={!!session()?.user?.slug}>
                   <li class="selected">
@@ -130,7 +131,7 @@ export const FeedView = () => {
               </Show>
             </div>
 
-          <aside class={clsx('col-md-3', styles.feedAside)}>
+            <aside class={clsx('col-md-4', styles.feedAside)}>
               <section class={styles.asideSection}>
                 <h4>{t('Comments')}</h4>
                 <ul class={stylesArticle.comments}>
@@ -187,6 +188,8 @@ export const FeedView = () => {
               </section>
             </aside>
           </div>
+        </div>
+
         <Show when={isLoadMoreButtonVisible()}>
           <p class="load-more-container">
             <button class="button" onClick={loadMore}>

src/styles/Feed.scss

@@ -57,8 +57,8 @@
 
 .feed-filter {
   display: flex;
+  flex-wrap: wrap;
   @include font-size(1.7rem);
-
   font-weight: 500;
   list-style: none;
   margin: 0 0 1.6rem;
@@ -66,7 +66,7 @@
 
   li {
     border-bottom: 4px solid transparent;
-    margin: 0 1.4em 1em 0;
+    margin: 0 1.4em 0.5em 0;
 
     &:last-child {
       margin-right: 0;

src/styles/app.scss

@@ -691,11 +691,11 @@ astro-island {
   .left-col {
     height: 100%;
     padding-right: 2rem;
-    position: absolute;
     right: 100%;
     top: 0;
 
     @include media-breakpoint-up(md) {
+      position: absolute;
       width: 161px;
     }