diff --git a/src/components/Feed/ArticleCard.module.scss b/src/components/Feed/ArticleCard.module.scss
index 91c0020f..9526c7fc 100644
--- a/src/components/Feed/ArticleCard.module.scss
+++ b/src/components/Feed/ArticleCard.module.scss
@@ -28,6 +28,7 @@
.feedControlIcon {
max-width: 2em;
+ vertical-align: text-bottom;
}
}
diff --git a/src/components/Feed/Sidebar/Sidebar.module.scss b/src/components/Feed/Sidebar/Sidebar.module.scss
index fd654010..fd66ff3e 100644
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@@ -53,7 +53,7 @@
.settings {
display: flex;
justify-content: space-between;
- margin-bottom: 2em;
+ margin: 2em 0;
}
a {
@@ -87,4 +87,34 @@
width: 100%;
}
}
+
+ h4 {
+ color: #9fa1a7;
+ cursor: pointer;
+ @include font-size(1.2rem);
+ letter-spacing: 0.05em;
+ text-transform: uppercase;
+ position: relative;
+
+ &:after {
+ content: '+';
+ font-size: 1.6em;
+ line-height: 1;
+ position: absolute;
+ right: 2.5rem;
+ top: -0.2em;
+ transition: transform 0.3s;
+ }
+
+ &.opened {
+ &:after {
+ right: 0.9rem;
+ transform: rotate(45deg);
+ }
+ }
+ }
+
+ .hidden {
+ display: none;
+ }
}
diff --git a/src/components/Feed/Sidebar/Sidebar.tsx b/src/components/Feed/Sidebar/Sidebar.tsx
index bf76695e..354f218b 100644
--- a/src/components/Feed/Sidebar/Sidebar.tsx
+++ b/src/components/Feed/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { For } from 'solid-js'
+import { createSignal, For } from 'solid-js'
import type { Author } from '../../../graphql/types.gen'
import { useAuthorsStore } from '../../../stores/zine/authors'
import { Icon } from '../../_shared/Icon'
@@ -28,6 +28,7 @@ export const Sidebar = (props: FeedSidebarProps) => {
const { authorEntities } = useAuthorsStore({ authors: props.authors })
const { articlesByTopic } = useArticlesStore()
const { topicEntities } = useTopicsStore()
+ const [isSubscriptionsVisible, setSubscriptionsVisible] = createSignal(false)
const checkTopicIsSeen = (topicSlug: string) => {
return articlesByTopic()[topicSlug]?.every((article) => Boolean(seen()[article.slug]))
@@ -68,11 +69,6 @@ export const Sidebar = (props: FeedSidebarProps) => {
{
icon: 'feed-notifications',
title: t('notifications')
- },
- {
- href: '/feed?by=subscribed',
- title: t('My subscriptions'),
- isBold: true
}
]
@@ -92,29 +88,46 @@ export const Sidebar = (props: FeedSidebarProps) => {
)}
- {
+ setSubscriptionsVisible(!isSubscriptionsVisible())
+ }}
+ >
+ {t('My subscriptions')}
+
+
+
+