Conditional render header links (#231)

src/components/Author/Userpic/Userpic.module.scss

@@ -98,7 +98,3 @@
     max-width: 16px;
   }
 }
-
-.cursorPointer {
-  cursor: pointer;
-}

src/components/Author/Userpic/Userpic.tsx

@@ -32,7 +32,7 @@ export const Userpic = (props: Props) => {
         [styles.big]: props.isBig,
         [styles.authorsList]: props.isAuthorsList,
         [styles.feedMode]: props.isFeedMode,
-        [styles.cursorPointer]: props.onClick
+        ['cursorPointer']: props.onClick
       })}
       onClick={props.onClick}
     >

src/components/Nav/Header/Header.tsx

@@ -22,6 +22,7 @@ import { useSession } from '../../../context/session'
 import styles from './Header.module.scss'
 import { apiClient } from '../../../utils/apiClient'
 import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
+import { Link } from './Link'
 
 type Props = {
   title?: string
@@ -135,7 +136,7 @@ export const Header = (props: Props) => {
     clearTimeout(timer)
   }
 
-  const hideSubnavigation = (ev, time = 500) => {
+  const hideSubnavigation = (event, time = 500) => {
     timer = setTimeout(() => {
       toggleSubnavigation(false)
     }, time)
@@ -193,44 +194,32 @@ export const Header = (props: Props) => {
                     {t('zine')}
                   </a>
                 </li>
-                <li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
+                <Link
-                  <a
-                    classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
-                    onMouseOut={hideSubnavigation}
+                  onMouseOut={() => hideSubnavigation}
-                    href={getPagePath(router, 'feed')}
+                  routeName="feed"
-                  >
+                  active={isFeedVisible()}
-                    {t('feed')}
+                  body={t('feed')}
-                  </a>
+                />
-                </li>
+                <Link
-                <li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
-                  <a
-                    classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
-                    onMouseOut={hideSubnavigation}
+                  onMouseOut={() => hideSubnavigation}
-                    href={getPagePath(router, 'topics')}
+                  routeName="topics"
-                  >
+                  active={isFeedVisible()}
-                    {t('topics')}
+                  body={t('topics')}
-                  </a>
+                />
-                </li>
+                <Link
-                <li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
+                  onMouseOver={(event) => hideSubnavigation(event, 0)}
-                  <a
+                  onMouseOut={(event) => hideSubnavigation(event, 0)}
-                    onMouseOver={(ev) => hideSubnavigation(ev, 0)}
+                  routeName="authors"
-                    onMouseOut={(ev) => hideSubnavigation(ev, 0)}
+                  body={t('authors')}
-                    href={getPagePath(router, 'authors')}
+                />
-                  >
+                <Link
-                    {t('community')}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
                   onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
-                    onMouseOut={hideSubnavigation}
+                  onMouseOut={() => hideSubnavigation}
-                  >
+                  body={t('Knowledge base')}
-                    {t('Knowledge base')}
+                  active={isKnowledgeBaseVisible()}
-                  </a>
+                />
-                </li>
               </ul>
 
               <div class={styles.mainNavigationMobile}>

src/components/Nav/Header/Link.tsx

@@ -0,0 +1,34 @@
+import styles from './Header.module.scss'
+import { router, ROUTES, useRouter } from '../../../stores/router'
+import { clsx } from 'clsx'
+import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
+import { getPagePath } from '@nanostores/router'
+
+type Props = {
+  onMouseOver: (event?: MouseEvent, time?: number) => void
+  onMouseOut: (event?: MouseEvent, time?: number) => void
+  routeName?: keyof typeof ROUTES
+  body: string
+  active?: boolean
+}
+
+export const Link = (props: Props) => {
+  const { page } = useRouter()
+  const isSelected = page().route === props.routeName
+  return (
+    <li classList={{ 'view-switcher__item--selected': isSelected }}>
+      <ConditionalWrapper
+        condition={!isSelected && Boolean(props.routeName)}
+        wrapper={(children) => <a href={getPagePath(router, props.routeName)}>{children}</a>}
+      >
+        <span
+          class={clsx('cursorPointer', { [styles.mainNavigationItemActive]: props.active })}
+          onMouseOver={props.onMouseOver}
+          onMouseOut={props.onMouseOut}
+        >
+          {props.body}
+        </span>
+      </ConditionalWrapper>
+    </li>
+  )
+}

src/styles/app.scss

@@ -987,3 +987,7 @@ iframe {
   font-weight: bold;
   line-height: 1.5;
 }
+
+.cursorPointer {
+  cursor: pointer;
+}