menu from api

pages/[...slug].tsx

@@ -8,10 +8,10 @@ import { Meta } from 'src/components/Meta'
 import { MetaBuilder } from 'src/lib/meta'
 import { apiGet } from '@/next-lib'
 import { GetStaticProps, NextPage } from 'next'
-import { IBreadcumbsPart, IMeta, ITag, Sign, Token } from '@/types'
+import { IBreadcumbsPart, IMenu, IMeta, ITag, Sign, Token } from '@/types'
 import { Html } from 'src/components/Html'
 import { Youtube } from '@/components/Youtube'
-import { createPage, createPageUrls } from '@/remote/factory'
+import { createMenu, createPage, createPageUrls } from '@/remote/factory'
 import { paramsToSlug } from '@/remote/lib'
 import { PageGrid } from '@/components/PageGrid'
 import { useRouter } from 'next/router'
@@ -42,6 +42,7 @@ type Props = {
     date: string
     breadcrumb: IBreadcumbsPart[]
     meta?: IMeta
+    menu: IMenu[],
     tokens: Token[]
     documentSignature: Sign
 }
@@ -62,6 +63,7 @@ const Index: NextPage<Props> = props => {
                 marginTop: 'var(--size-l)',
                 marginBottom: 'var(--size-xl)',
             }}
+            menu={props.menu}
             breadcrumbs={props.breadcrumb}
         >
             <Head>
@@ -165,6 +167,8 @@ export const getStaticProps: GetStaticProps<Props> = async ctx => {
         }
     }
 
+    const menu = await apiGet(createMenu)('https://hudozka.tmshv.com/menu', [])
+
     const description = page.description ?? undefined
     const breadcrumbSize = page?.breadcrumb?.length ?? 0
     const breadcrumb = breadcrumbSize < 2 ? null : page.breadcrumb
@@ -183,6 +187,7 @@ export const getStaticProps: GetStaticProps<Props> = async ctx => {
             tags: page.tags,
             date: page.date,
             meta,
+            menu,
             breadcrumb,
             documentSignature: {
                 date: '20.01.2021г.',

pages/index.tsx

@@ -5,13 +5,14 @@ import { PageGrid } from 'src/components/PageGrid'
 import { HudozkaTitle } from 'src/components/HudozkaTitle'
 import { MetaBuilder } from 'src/lib/meta'
 import { NextPage } from 'next'
-import { IMeta, PageCardDto } from 'src/types'
+import { IMenu, IMeta, PageCardDto } from 'src/types'
 import { apiGet } from '@/next-lib'
-import { createHomeCards } from '@/remote/factory'
+import { createHomeCards, createMenu } from '@/remote/factory'
 
 type Props = {
     title: string
     meta: IMeta
+    menu: IMenu[]
     items: PageCardDto[]
 }
 
@@ -19,6 +20,7 @@ const Index: NextPage<Props> = props => (
     <App
         showAuthor={true}
         wide={false}
+        menu={props.menu}
     >
         <Head>
             <title>{props.title}</title>
@@ -41,6 +43,7 @@ const Index: NextPage<Props> = props => (
 export const getStaticProps = async () => {
     const url = 'https://hudozka.tmshv.com/home'
     const items = await apiGet(createHomeCards)(url, [])
+    const menu = await apiGet(createMenu)('https://hudozka.tmshv.com/menu', [])
 
     const title = 'Шлиссельбургская ДХШ'
     const meta = (new MetaBuilder())
@@ -55,6 +58,7 @@ export const getStaticProps = async () => {
             items,
             title,
             meta,
+            menu,
         }
     }
 }

src/components/App/index.tsx

@@ -6,7 +6,7 @@ import { Footer } from '../Footer'
 import { Content } from '../Content'
 import { Block } from '../Block'
 import { Breadcrumbs } from '../Breadcrumbs'
-import { IBreadcumbsPart } from 'src/types'
+import { IBreadcumbsPart, IMenu } from 'src/types'
 import { useRouter } from 'next/router'
 import { useMobile } from 'src/hooks/useMobile'
 
@@ -19,9 +19,10 @@ export interface IAppProps {
     wide?: boolean
     contentStyle?: React.CSSProperties
     breadcrumbs?: IBreadcumbsPart[]
+    menu: IMenu[]
 }
 
-export const App: React.FC<IAppProps> = ({ showAuthor = false, wide = false, ...props }) => {
+export const App: React.FC<IAppProps> = ({ showAuthor = false, wide = false, menu, ...props }) => {
     const hideBreadcrumbs = useMobile()
     const router = useRouter()
     const blockStyle = {
@@ -29,7 +30,10 @@ export const App: React.FC<IAppProps> = ({ showAuthor = false, wide = false, ...
     }
 
     return (
-        <ConfigContext.Provider value={config}>
+        <ConfigContext.Provider value={{
+            ...config,
+            menu,
+        }}>
             <Wrapper
                 header={(
                     <header>

src/remote/factory.ts

@@ -1,6 +1,6 @@
-import { ImageDefinition, IPage, ITag, PageCardDto, Token } from "@/types";
+import { ImageDefinition, IMenu, IPage, ITag, PageCardDto, Token } from "@/types";
 import { asItem } from "./lib";
-import { StrapiComponentEmbed, StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard, StrapiTag, StrapiMedia } from "./types";
+import { StrapiComponentEmbed, StrapiComponent, StrapiHome, StrapiPage, StrapiPageCard, StrapiTag, StrapiMedia, StrapiMenu } from "./types";
 
 export function createPageUrls(pages: StrapiPage[]) {
     return {
@@ -102,7 +102,19 @@ export function createPageTokens(components: StrapiComponent[]): Token[] {
     })
 }
 
-export function createPage(res: StrapiPage | StrapiPage[]): IPage {
+export function createMenu(res: StrapiMenu): IMenu[] {
+    const items: IMenu[] = res.menu.items.map(x => ({
+        href: x.page.slug,
+        name: x.page.title,
+    }))
+
+    return [{
+        href: '/',
+        name: res.homeLabel,
+    }, ...items]
+}
+
+export function createPage(res: StrapiPage | StrapiPage[]): IPage | null {
     const item = asItem(res)
     if (!item) {
         return null

src/remote/types.ts

@@ -90,7 +90,7 @@ export type StrapiTag = {
     id: number,
     slug: string,
     name: string,
-    // "page": 114,
+    page: StrapiPage,
     // "created_at": "2021-01-31T20:38:39.373Z",
     // "updated_at": "2021-02-17T07:37:54.749Z"
 }
@@ -119,9 +119,17 @@ export type StrapiHome = {
     // "updated_at": "2021-02-04T16:28:30.961Z",
 }
 
+export type StrapiMenu = {
+    id: number,
+    homeLabel: string
+    menu: StrapiComponentCardGrid
+    // "created_at": "2021-02-04T04:12:38.291Z",
+    // "updated_at": "2021-02-04T16:28:30.961Z",
+}
+
 export type StrapiPageCard = {
     __component: 'hudozka.page-card',
     id: number,
     page: StrapiPage,
     layout: 'small' | 'medium' | 'big',
-}
+}