Fix/main menu (#216)

* Subnavigation fixes
* pass randomTopics as prop to header
---------

Co-authored-by: kvakazyambra <kvakazyambra@gmail.com>
Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>

src/components/Nav/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
+import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
 import { getPagePath, redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
 
@@ -9,6 +9,7 @@ import { ConfirmModal } from '../ConfirmModal'
 import { getShareUrl, SharePopup } from '../../Article/SharePopup'
 import { Snackbar } from '../Snackbar'
 import { Icon } from '../../_shared/Icon'
+import type { Topic } from '../../../graphql/types.gen'
 
 import { useModalStore } from '../../../stores/ui'
 import { router, useRouter } from '../../../stores/router'
@@ -17,6 +18,7 @@ import { getDescription } from '../../../utils/meta'
 
 import { useLocalize } from '../../../context/localize'
 import { useSession } from '../../../context/session'
+import { useTopicsStore } from '../../../stores/zine/topics'
 
 import styles from './Header.module.scss'
 
@@ -27,6 +29,7 @@ type Props = {
   articleBody?: string
   cover?: string
   scrollToComments?: (value: boolean) => void
+  randomTopics?: Topic[]
 }
 
 type HeaderSearchParams = {
@@ -34,7 +37,7 @@ type HeaderSearchParams = {
 }
 
 export const Header = (props: Props) => {
-  const { t } = useLocalize()
+  const { t, lang } = useLocalize()
 
   const { modal } = useModalStore()
 
@@ -56,6 +59,9 @@ export const Header = (props: Props) => {
 
   const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
 
+  const tag = (topic: Topic) =>
+    /[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
+
   let windowScrollTop = 0
 
   createEffect(() => {
@@ -296,34 +302,25 @@ export const Header = (props: Props) => {
           >
             <ul class="nodash">
               <li>
-                <a href="/expo/image">Искусство</a>
+                <a href="/topic/interview">#Интервью</a>
               </li>
               <li>
-                <a href="">Подкасты</a>
+                <a href="/topic/reportage">#Репортажи</a>
               </li>
               <li>
-                <a href="">Спецпроекты</a>
+                <a href="/topic/empiric">#Личный опыт</a>
               </li>
               <li>
-                <a href="">#Интервью</a>
+                <a href="/topic/society">#Общество</a>
               </li>
               <li>
-                <a href="">#Репортажи</a>
+                <a href="/topic/culture">#Культура</a>
               </li>
               <li>
-                <a href="">#Личный опыт</a>
+                <a href="/topic/theory">#Теории</a>
               </li>
               <li>
-                <a href="">#Общество</a>
+                <a href="/topic/poetry">#Поэзия</a>
-              </li>
-              <li>
-                <a href="">#Культура</a>
-              </li>
-              <li>
-                <a href="">#Теории</a>
-              </li>
-              <li>
-                <a href="">#Поэзия</a>
               </li>
               <li class={styles.rightItem}>
                 <a href="/topics">
@@ -341,36 +338,23 @@ export const Header = (props: Props) => {
             onMouseOut={hideSubnavigation}
           >
             <ul class="nodash">
-              <li>
+              <Show when={props.randomTopics && props.randomTopics.length > 0}>
-                <a href="">#Интервью</a>
+                <For each={props.randomTopics}>
-              </li>
+                  {(topic) => (
-              <li>
+                    <li class="item">
-                <a href="">#Репортажи</a>
+                      <a href={`/topic/${topic.slug}`}>
-              </li>
+                        <span>#{tag(topic)}</span>
-              <li>
+                      </a>
-                <a href="">#Личный опыт</a>
-              </li>
-              <li>
-                <a href="">#Общество</a>
-              </li>
-              <li>
-                <a href="">#Культура</a>
-              </li>
-              <li>
-                <a href="">#Теории</a>
-              </li>
-              <li>
-                <a href="">#Поэзия</a>
-              </li>
-              <li>
-                <a href="">#Теории</a>
                     </li>
+                  )}
+                </For>
                 <li class={styles.rightItem}>
                   <a href="/topics">
                     {t('All topics')}
                     <Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
                   </a>
                 </li>
+              </Show>
             </ul>
           </div>
 

src/components/Nav/Topics.scss

@@ -1,11 +1,11 @@
 .subnavigation {
   @include font-size(1.4rem);
-
   height: 6rem;
   line-height: 6rem;
   margin-bottom: 5rem !important;
   overflow: hidden;
   position: relative;
+  transform: translateY(-2px);
 
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
@@ -22,7 +22,7 @@
   }
 
   .item {
-    margin-right: 2rem;
+    margin-right: 2.4rem;
 
     &.right {
       margin-right: 0;

src/components/Nav/Topics.tsx

@@ -9,34 +9,25 @@ export const NavTopics = () => {
     <nav class="subnavigation wide-container text-2xl">
       <ul class="topics">
         <li class="item">
-          <a href="/expo/image">Искусство</a>
+          <a href="/topic/interview">#Интервью</a>
         </li>
         <li class="item">
-          <a href="">Подкасты</a>
+          <a href="/topic/reportage">#Репортажи</a>
         </li>
         <li class="item">
-          <a href="">Спецпроекты</a>
+          <a href="/topic/empiric">#Личный опыт</a>
         </li>
         <li class="item">
-          <a href="">#Интервью</a>
+          <a href="/topic/society">#Общество</a>
         </li>
         <li class="item">
-          <a href="">#Репортажи</a>
+          <a href="/topic/culture">#Культура</a>
         </li>
         <li class="item">
-          <a href="">#Личный опыт</a>
+          <a href="/topic/theory">#Теории</a>
         </li>
         <li class="item">
-          <a href="">#Общество</a>
+          <a href="/topic/poetry">#Поэзия</a>
-        </li>
-        <li class="item">
-          <a href="">#Культура</a>
-        </li>
-        <li class="item">
-          <a href="">#Теории</a>
-        </li>
-        <li class="item">
-          <a href="">#Поэзия</a>
         </li>
         <li class="item right">
           <a href={`/topics`}>

src/components/Views/Home.tsx

@@ -46,7 +46,8 @@ export const HomeView = (props: HomeProps) => {
   } = useArticlesStore({
     shouts: props.shouts
   })
-  const { randomTopics, topTopics } = useTopicsStore({
+
+  const { topTopics } = useTopicsStore({
     randomTopics: props.randomTopics
   })
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)

src/components/_shared/PageLayout.tsx

@@ -7,6 +7,7 @@ import { clsx } from 'clsx'
 import '../../styles/app.scss'
 import styles from './PageLayout.module.scss'
 import { Meta } from '@solidjs/meta'
+import { Topic } from '../../graphql/types.gen'
 
 type PageLayoutProps = {
   headerTitle?: string
@@ -19,6 +20,7 @@ type PageLayoutProps = {
   class?: string
   withPadding?: boolean
   scrollToComments?: (value: boolean) => void
+  randomTopics?: Topic[]
 }
 
 export const PageLayout = (props: PageLayoutProps) => {
@@ -30,7 +32,7 @@ export const PageLayout = (props: PageLayoutProps) => {
       props.scrollToComments(scrollToComments())
     }
   })
-
+  // const { randomTopics } = useTopicsStore()
   return (
     <>
       <Meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -41,6 +43,7 @@ export const PageLayout = (props: PageLayoutProps) => {
         cover={props.articleBody}
         isHeaderFixed={isHeaderFixed}
         scrollToComments={(value) => setScrollToComments(value)}
+        randomTopics={props.randomTopics}
       />
       <main
         class={clsx('main-content', {

src/pages/index.page.tsx

@@ -27,7 +27,7 @@ export const HomePage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <PageLayout withPadding={true}>
+    <PageLayout randomTopics={props.randomTopics} withPadding={true}>
       <ReactionsProvider>
         <Title>{t('Discours')}</Title>
         <Show when={isLoaded()} fallback={<Loading />}>

src/styles/app.scss

@@ -633,11 +633,6 @@ figure {
       border-bottom: 2px solid #000;
       color: #000;
       cursor: default;
-      pointer-events: none;
-
-      &:hover {
-        background: none;
-      }
     }
   }
 }