From e4390d83e6241c2852290440914af308571ef56a Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Mon, 1 Jul 2024 18:30:45 +0300
Subject: [PATCH] header-links-fix

---
 src/components/Nav/Header/Header.tsx          | 103 +++++++++---------
 .../Views/AllAuthors/AllAuthors.tsx           |  22 ++--
 src/routes/topics.tsx                         |   2 +-
 3 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 9c88d968..7a686bdb 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@@ -17,7 +17,6 @@ import { HeaderAuth } from '../HeaderAuth'
 import { Modal } from '../Modal'
 import { SearchModal } from '../SearchModal/SearchModal'
 import { Snackbar } from '../Snackbar'
-import { Link } from './Link'
 
 import { A, useLocation, useNavigate, useSearchParams } from '@solidjs/router'
 import styles from './Header.module.scss'
@@ -209,58 +208,64 @@ export const Header = (props: Props) => {
             </Show>
             <div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
               <ul class="view-switcher">
-                <Link
+                <A
                   onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
                   onMouseOut={() => hideSubnavigation()}
-                  routeName="home"
-                  active={isZineVisible()}
-                  body={t('journal')}
+                  href="/"
+                  hidden={!isZineVisible()}
                   onClick={(event) => handleToggleMenuByLink(event, '/')}
-                />
-                <Link
+                >
+                  {t('journal')}
+                </A>
+                <A
                   onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
                   onMouseOut={() => hideSubnavigation()}
-                  routeName="feed"
-                  active={isFeedVisible()}
-                  body={t('feed')}
+                  href="/feed"
+                  hidden={!isFeedVisible()}
                   onClick={(event) => handleToggleMenuByLink(event, '/feed')}
-                />
-                <Link
+                >
+                  {t('feed')}
+                </A>
+
+                <A
                   onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
                   onMouseOut={() => hideSubnavigation}
-                  routeName="topics"
-                  active={isTopicsVisible()}
-                  body={t('topics')}
+                  href="/topics"
+                  hidden={!isTopicsVisible()}
                   onClick={(event) => handleToggleMenuByLink(event, '/topics')}
-                />
-                <Link
+                >
+                  {t('topics')}
+                </A>
+                <A
                   onMouseOver={() => hideSubnavigation(0)}
                   onMouseOut={() => hideSubnavigation(0)}
-                  routeName="authors"
-                  body={t('authors')}
+                  href="/authors"
                   onClick={(event) => handleToggleMenuByLink(event, '/authors')}
-                />
-                <Link
+                >
+                  {t('authors')}
+                </A>
+                <A
                   onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
                   onMouseOut={() => hideSubnavigation()}
-                  routeName="guide"
-                  body={t('Knowledge base')}
-                  active={isKnowledgeBaseVisible()}
+                  href="/guide"
+                  hidden={!isKnowledgeBaseVisible()}
                   onClick={(event) => handleToggleMenuByLink(event, '/guide')}
-                />
+                >
+                  {t('Knowledge base')}
+                </A>
               </ul>
 
               <div class={styles.mainNavigationMobile}>
                 <h4>{t('Participating')}</h4>
                 <ul class="view-switcher">
                   <li>
-                    <a href="/create">{t('Create post')}</a>
+                    <A href="/create">{t('Create post')}</A>
                   </li>
                   <li>
-                    <a href="/connect">{t('Suggest an idea')}</a>
+                    <A href="/connect">{t('Suggest an idea')}</A>
                   </li>
                   <li>
-                    <a href="/about/help">{t('Support the project')}</a>
+                    <A href="/about/help">{t('Support the project')}</A>
                   </li>
                 </ul>
 
@@ -318,9 +323,9 @@ export const Header = (props: Props) => {
                 </select>
 
                 <div class={styles.mainNavigationAdditionalLinks}>
-                  <a href="/about/dogma">{t('Dogma')}</a>
-                  <a href="/about/discussion-rules" innerHTML={t('Discussion rules')} />
-                  <a href="/about/principles">{t('Principles')}</a>
+                  <A href="/about/dogma">{t('Dogma')}</A>
+                  <A href="/about/discussion-rules">{t('Discussion rules')}</A>
+                  <A href="/about/principles">{t('Principles')}</A>
                 </div>
 
                 <p
@@ -399,10 +404,10 @@ export const Header = (props: Props) => {
                 <a href="/about/help">{t('How to help')}</a>
               </li>
               <li class={styles.rightItem}>
-                <a href="/connect">
+                <A href="/connect">
                   {t('Suggest an idea')}
                   <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
-                </a>
+                </A>
               </li>
             </ul>
           </div>
@@ -415,40 +420,40 @@ export const Header = (props: Props) => {
           >
             <ul class="nodash">
               <li class="item">
-                <a href="/expo">{t('Art')}</a>
+                <A href="/expo">{t('Art')}</A>
               </li>
               <li class="item">
-                <a href="/podcasts">{t('Podcasts')}</a>
+                <A href="/podcasts">{t('Podcasts')}</A>
               </li>
               <li class="item">
-                <a href="/about/projects">{t('Special Projects')}</a>
+                <A href="/about/projects">{t('Special Projects')}</A>
               </li>
               <li>
-                <a href="/topic/interview">#{t('Interview')}</a>
+                <A href="/topic/interview">#{t('Interview')}</A>
               </li>
               <li>
-                <a href="/topic/reportage">#{t('Reports')}</a>
+                <A href="/topic/reportage">#{t('Reports')}</A>
               </li>
               <li>
-                <a href="/topic/empiric">#{t('Experience')}</a>
+                <A href="/topic/empiric">#{t('Experience')}</A>
               </li>
               <li>
-                <a href="/topic/society">#{t('Society')}</a>
+                <A href="/topic/society">#{t('Society')}</A>
               </li>
               <li>
-                <a href="/topic/culture">#{t('Culture')}</a>
+                <A href="/topic/culture">#{t('Culture')}</A>
               </li>
               <li>
-                <a href="/topic/theory">#{t('Theory')}</a>
+                <A href="/topic/theory">#{t('Theory')}</A>
               </li>
               <li>
-                <a href="/topic/poetry">#{t('Poetry')}</a>
+                <A href="/topic/poetry">#{t('Poetry')}</A>
               </li>
               <li class={styles.rightItem}>
-                <a href="/topics">
+                <A href="/topics">
                   {t('All topics')}
                   <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
-                </a>
+                </A>
               </li>
             </ul>
           </div>
@@ -464,17 +469,17 @@ export const Header = (props: Props) => {
                 <For each={randomTopics()}>
                   {(topic: Topic) => (
                     <li class="item">
-                      <a href={`/topic/${topic.slug}`}>
+                      <A href={`/topic/${topic.slug}`}>
                         <span>#{tag(topic)}</span>
-                      </a>
+                      </A>
                     </li>
                   )}
                 </For>
                 <li class={styles.rightItem}>
-                  <a href="/topics">
+                  <A href="/topics">
                     {t('All topics')}
                     <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
-                  </a>
+                  </A>
                 </li>
               </Show>
             </ul>
diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx
index d064572b..b8fa3e0a 100644
--- a/src/components/Views/AllAuthors/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors/AllAuthors.tsx
@@ -41,7 +41,7 @@ export const AllAuthors = (props: Props) => {
   })
   const filteredAuthors = createMemo(() => {
     const query = searchQuery().toLowerCase()
-    return authorsSorted().filter((author: Author) => {
+    return authorsSorted?.().filter((author: Author) => {
       // Предполагаем, что у автора есть свойство name
       return author?.name?.toLowerCase().includes(query)
     })
@@ -62,22 +62,22 @@ export const AllAuthors = (props: Props) => {
     return keys
   })
 
-  const ogImage = getImageUrl('production/image/logo_image.png')
-  const ogTitle = t('Authors')
-  const description = t('List of authors of the open editorial community')
+  const ogImage = createMemo(() => getImageUrl('production/image/logo_image.png'))
+  const ogTitle = createMemo(() => t('Authors'))
+  const description = createMemo(() => t('List of authors of the open editorial community'))
 
   return (
     <div class={clsx(styles.allAuthorsPage, 'wide-container')}>
-      <Meta name="descprition" content={description} />
+      <Meta name="descprition" content={description()} />
       <Meta name="keywords" content={t('keywords')} />
       <Meta name="og:type" content="article" />
-      <Meta name="og:title" content={ogTitle} />
-      <Meta name="og:image" content={ogImage} />
-      <Meta name="twitter:image" content={ogImage} />
-      <Meta name="og:description" content={description} />
+      <Meta name="og:title" content={ogTitle()} />
+      <Meta name="og:image" content={ogImage()} />
+      <Meta name="twitter:image" content={ogImage()} />
+      <Meta name="og:description" content={description()} />
       <Meta name="twitter:card" content="summary_large_image" />
-      <Meta name="twitter:title" content={ogTitle} />
-      <Meta name="twitter:description" content={description} />
+      <Meta name="twitter:title" content={ogTitle()} />
+      <Meta name="twitter:description" content={description()} />
       <Show when={props.isLoaded} fallback={<Loading />}>
         <div class="offset-md-5">
           <div class="row">
diff --git a/src/routes/topics.tsx b/src/routes/topics.tsx
index 2796d911..0a2a588f 100644
--- a/src/routes/topics.tsx
+++ b/src/routes/topics.tsx
@@ -25,7 +25,7 @@ export default function AllTopicsPage(props: RouteSectionProps<{ topics: Topic[]
     <PageLayout withPadding={true} title={`${t('Discours')}:${t('All topics')}`}>
       <ReactionsProvider>
         <Suspense fallback={<Loading />}>
-          <AllTopics topics={topics() || []} />
+          <AllTopics topics={topics() as Topic[]} />
         </Suspense>
       </ReactionsProvider>
     </PageLayout>