diff --git a/src/components/board-header/board-header.module.css b/src/components/board-header/board-header.module.css index b6c7366a..7cb8caeb 100644 --- a/src/components/board-header/board-header.module.css +++ b/src/components/board-header/board-header.module.css @@ -24,6 +24,14 @@ color: var(--board-address-text-color); } +.clickableSubtitle { + cursor: pointer; +} + +.clickableSubtitle:hover { + text-decoration: underline; +} + .content hr { width: 90%; } diff --git a/src/components/board-header/board-header.tsx b/src/components/board-header/board-header.tsx index 53a202fd..bbf5fdcb 100644 --- a/src/components/board-header/board-header.tsx +++ b/src/components/board-header/board-header.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useLocation, useParams } from 'react-router-dom'; +import { useLocation, useParams, useNavigate } from 'react-router-dom'; import { useAccount, useAccountComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js'; import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits'; @@ -25,6 +25,7 @@ const BoardHeader = () => { const { t } = useTranslation(); const location = useLocation(); const params = useParams(); + const navigate = useNavigate(); const isInAllView = isAllView(location.pathname); const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams()); const isInModView = isModView(location.pathname); @@ -79,7 +80,12 @@ const BoardHeader = () => { )} -
{subtitle}
+
navigate('/subs/settings#subscriptions-settings') : undefined} + > + {subtitle} +

);