Fixed sidebar style on the feed page

public/icons/hash.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M16.5 11.25C16.9141 11.25 17.25 11.5859 17.25 12C17.25 12.4141 16.9141 12.75 16.5 12.75H12.75V16.5C12.75 16.9141 12.4141 17.25 12 17.25C11.5859 17.25 11.25 16.9141 11.25 16.5V12.75H6.75V16.5C6.75 16.9141 6.41406 17.25 6 17.25C5.58594 17.25 5.25 16.9141 5.25 16.5V12.75H1.5C1.08594 12.75 0.75 12.4141 0.75 12C0.75 11.5859 1.08594 11.25 1.5 11.25H5.25V6.75H1.5C1.08594 6.75 0.75 6.41406 0.75 6C0.75 5.58594 1.08594 5.25 1.5 5.25H5.25V1.5C5.25 1.08594 5.58594 0.75 6 0.75C6.41406 0.75 6.75 1.08594 6.75 1.5V5.25H11.25V1.5C11.25 1.08594 11.5859 0.75 12 0.75C12.4141 0.75 12.75 1.08594 12.75 1.5V5.25H16.5C16.9141 5.25 17.25 5.58594 17.25 6C17.25 6.41406 16.9141 6.75 16.5 6.75H12.75V11.25H16.5ZM6.75 11.25H11.25V6.75H6.75V11.25Z" fill="currentColor"/>
+</svg>

public/locales/en/translation.json

@@ -290,7 +290,7 @@
   "community": "community",
   "delimiter": "delimiter",
   "discussion": "discourse",
-  "discussions": "discussions",
+  "Discussions": "Discussions",
   "drafts": "drafts",
   "email not confirmed": "email not confirmed",
   "enter": "enter",
@@ -307,7 +307,7 @@
   "marker list": "marker list",
   "music": "music",
   "my feed": "my ribbon",
-  "notifications": "notifications",
+  "Notifications": "Notifications",
   "number list": "number list",
   "personal data usage and email notifications": "to process personal data and receive email notifications",
   "post": "post",

public/locales/ru/translation.json

@@ -289,7 +289,7 @@
   "You've reached a non-existed page": "Вы попали на несуществующую страницу",
   "You've successfully logged out": "Вы успешно вышли из аккаунта",
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
-  "accomplices": "соучастники",
+  "Accomplices": "Соучастники",
   "actions": "действия",
   "add link": "добавить ссылку",
   "all topics": "все темы",
@@ -308,13 +308,13 @@
   "delimiter": "разделитель",
   "discourse_theme": "Тема дискурса",
   "discussion": "дискурс",
-  "discussions": "дискуссии",
+  "Discussions": "Дискуссии",
   "drafts": "черновики",
   "email not confirmed": "email не подтвержден",
   "enter": "войдите",
   "feed": "лента",
   "follower": "подписчик",
-  "general feed": "общая лента",
+  "general feed": "Общая лента",
   "header 1": "заголовок 1",
   "header 2": "заголовок 2",
   "header 3": "заголовок 3",
@@ -325,7 +325,7 @@
   "marker list": "маркир. список",
   "music": "музыка",
   "my feed": "моя лента",
-  "notifications": "уведомления",
+  "Notifications": "Уведомления",
   "number list": "нумер. список",
   "or": "или",
   "personal data usage and email notifications": "на обработку персональных данных и на получение почтовых уведомлений",

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

@@ -11,7 +11,6 @@
   }
 
   .sidebarItemName {
-    margin-right: 0.5em;
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -19,7 +18,6 @@
 
   .counter {
     @include font-size(1.2rem);
-
     align-items: center;
     align-self: flex-start;
     background: #f6f6f6;
@@ -78,6 +76,7 @@
     height: 2rem;
     margin-right: 0.5em;
     vertical-align: middle;
+    text-align: center;
     width: 2.2rem;
 
     img {
@@ -90,7 +89,7 @@
 
   h4 {
     @include font-size(1.2rem);
-
+    font-weight: bold;
     color: #9fa1a7;
     cursor: pointer;
     letter-spacing: 0.05em;
@@ -119,3 +118,16 @@
     display: none;
   }
 }
+
+.subscriptions {
+  .icon {
+    text-align: center;
+
+    img {
+      display: inline-block;
+      height: 1.6rem;
+      vertical-align: middle;
+      width: 1.6rem;
+    }
+  }
+}

src/components/Feed/Sidebar/Sidebar.tsx

@@ -8,6 +8,7 @@ import { useSeenStore } from '../../../stores/zine/seen'
 import { useSession } from '../../../context/session'
 import { useLocalize } from '../../../context/localize'
 import styles from './Sidebar.module.scss'
+import { clsx } from 'clsx'
 
 type FeedSidebarProps = {
   authors: Author[]
@@ -28,7 +29,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
   const { authorEntities } = useAuthorsStore({ authors: props.authors })
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()
-  const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(false)
+  const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(true)
 
   const checkTopicIsSeen = (topicSlug: string) => {
     return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
@@ -45,30 +46,30 @@ export const Sidebar = (props: FeedSidebarProps) => {
     },
     {
       icon: 'feed-my',
-      title: t('my feed')
+      title: t('My feed')
     },
     {
       icon: 'feed-collaborate',
-      title: t('accomplices')
+      title: t('Accomplices')
     },
     {
       icon: 'feed-discussion',
-      title: t('discussions'),
+      title: t('Discussions'),
       counter: 4
     },
     {
       icon: 'feed-drafts',
-      title: t('drafts'),
+      title: t('Drafts'),
       counter: 14
     },
     {
       icon: 'bookmark',
-      title: t('bookmarks'),
+      title: t('Bookmarks'),
       counter: 6
     },
     {
       icon: 'feed-notifications',
-      title: t('notifications')
+      title: t('Notifications')
     }
   ]
 
@@ -82,8 +83,8 @@ export const Sidebar = (props: FeedSidebarProps) => {
                 <span class={styles.sidebarItemName}>
                   {item.icon && <Icon name={item.icon} class={styles.icon} />}
                   <strong>{item.title}</strong>
-                  {item.counter && <span class={styles.counter}>18</span>}
                 </span>
+                {item.counter && <span class={styles.counter}>18</span>}
               </a>
             </li>
           )}
@@ -99,7 +100,8 @@ export const Sidebar = (props: FeedSidebarProps) => {
         >
           {t('My subscriptions')}
         </h4>
-        <ul classList={{ [styles.hidden]: !isSubscriptionsVisible() }}>
+
+        <ul class={clsx(styles.subscriptions, { [styles.hidden]: !isSubscriptionsVisible() })}>
           <For each={session()?.news?.authors}>
             {(authorSlug: string) => (
               <li>
@@ -107,8 +109,11 @@ export const Sidebar = (props: FeedSidebarProps) => {
                   href={`/author/${authorSlug}`}
                   classList={{ [styles.unread]: checkAuthorIsSeen(authorSlug) }}
                 >
-                  <small>@{authorSlug}</small>
-                  {authorEntities()[authorSlug]?.name}
+                  <div class={styles.sidebarItemName}>
+                    <Icon name="hash" class={styles.icon} />
+                    {authorSlug}
+                    {authorEntities()[authorSlug]?.name}
+                  </div>
                 </a>
               </li>
             )}
@@ -120,7 +125,10 @@ export const Sidebar = (props: FeedSidebarProps) => {
                   href={`/topic/${topicSlug}`}
                   classList={{ [styles.unread]: checkTopicIsSeen(topicSlug) }}
                 >
-                  {topicEntities()[topicSlug]?.title ?? topicSlug}
+                  <div class={styles.sidebarItemName}>
+                    <Icon name="hash" class={styles.icon} />
+                    {topicEntities()[topicSlug]?.title ?? topicSlug}
+                  </div>
                 </a>
               </li>
             )}

src/components/Views/Feed.module.scss

@@ -3,8 +3,7 @@
 }
 
 .feedNavigation {
-  @include font-size(1.5rem);
-
+  @include font-size(1.6rem);
   font-weight: 500;
 
   h4 {
@@ -67,7 +66,7 @@
     background: #2638d9;
   }
 
-  a {
+  a:link {
     position: static;
 
     &::before {
@@ -129,7 +128,6 @@
 
 .commentArticleTitle {
   @include font-size(1.2rem);
-
   line-clamp: 1;
   -webkit-line-clamp: 1;
 }