diff --git a/public/svg/symbio.svg b/public/svg/symbio.svg index 5aeae132..10989710 100644 --- a/public/svg/symbio.svg +++ b/public/svg/symbio.svg @@ -1,21 +1,13 @@ - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/organisms/Navbar/Navbar.module.scss b/src/components/organisms/Navbar/Navbar.module.scss index 6f3b3457..9a2dc3c7 100644 --- a/src/components/organisms/Navbar/Navbar.module.scss +++ b/src/components/organisms/Navbar/Navbar.module.scss @@ -19,6 +19,7 @@ height: var(--logo-height); width: var(--logo-width); align-self: center; + color: var(--logo-color); } .languageSelector { diff --git a/src/components/organisms/Navbar/Navbar.tsx b/src/components/organisms/Navbar/Navbar.tsx index a0eed6d7..ffb36b6a 100644 --- a/src/components/organisms/Navbar/Navbar.tsx +++ b/src/components/organisms/Navbar/Navbar.tsx @@ -1,24 +1,57 @@ import { useRouter } from 'next/router'; import React, { ReactElement, useContext, useState } from 'react'; import { AppContext } from '../../../contexts/app-context/AppContext'; -import { Image, ImageLayout } from '../../primitives/Image/Image'; +import { webSettingQueryResponse } from '../../../relay/__generated__/webSettingQuery.graphql'; +import { Image } from '../../primitives/Image/Image'; import styles from './Navbar.module.scss'; import { Link } from '../../primitives/Link/Link'; import { MainMenu } from '../MainMenu/MainMenu'; +const Logo = ({ + logo, + svg, + homepage, + className, +}: { + logo: NonNullable['logo'] | undefined; + svg?: string; + homepage?: { + readonly title: string | null; + readonly url: string | null; + } | null; + className?: string; +}): ReactElement | null => { + if (!logo) { + return null; + } + + let result = null; + if (svg) { + result = ; + } else if (logo.width && logo.height) { + result = ; + } + + if (homepage) { + return ( + + {result} + + ); + } + + return {result}; +}; + const Navbar = (): ReactElement | null => { - const { mainMenu, logo, homepage } = useContext(AppContext); + const { mainMenu, logo, homepage, svgLogo } = useContext(AppContext); const { locale, locales } = useRouter(); const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false); return (
- {logo && logo.width && logo.height && ( - - - - )} + {mainMenu && } {Array.isArray(locales) && locales.length > 1 ? (
diff --git a/src/components/primitives/Link/Link.module.scss b/src/components/primitives/Link/Link.module.scss index b23fdd16..91881273 100644 --- a/src/components/primitives/Link/Link.module.scss +++ b/src/components/primitives/Link/Link.module.scss @@ -1,5 +1,4 @@ .wrapper { - color: inherit; text-decoration: underline; &:hover { diff --git a/src/components/primitives/Link/Link.tsx b/src/components/primitives/Link/Link.tsx index 858b496e..cfbbddc7 100644 --- a/src/components/primitives/Link/Link.tsx +++ b/src/components/primitives/Link/Link.tsx @@ -37,7 +37,7 @@ const Link = ({ className, href, page, params, children, target, plain, ...rest } return ( - + {children} @@ -54,14 +54,25 @@ const Link = ({ className, href, page, params, children, target, plain, ...rest if (plain) { return ( - + {children || page.title} ); } return ( - - + + {children || page.title} diff --git a/src/pages/[[...slug]].tsx b/src/pages/[[...slug]].tsx index 7c437bda..2802baff 100644 --- a/src/pages/[[...slug]].tsx +++ b/src/pages/[[...slug]].tsx @@ -26,7 +26,7 @@ const PreviewToolbar = dynamic(() => ); const Page = (props: MyPageProps): ReactElement => { - const { hostname, site, page, webSetting, blocksProps, preview } = props; + const { hostname, site, page, webSetting, blocksProps, preview, svgLogo } = props; const router = useRouter(); const locale = router.locale || router.defaultLocale; const currentUrl = @@ -59,6 +59,7 @@ const Page = (props: MyPageProps): ReactElement => { page, site, absoluteLinks: false, + svgLogo, ...webSetting, }, }} diff --git a/src/providers/datocms/PageProvider.ts b/src/providers/datocms/PageProvider.ts index d79acee0..c2e2e64c 100644 --- a/src/providers/datocms/PageProvider.ts +++ b/src/providers/datocms/PageProvider.ts @@ -13,11 +13,9 @@ import { appQuery } from '../../relay/__generated__/appQuery.graphql'; import { AppQuery } from '../../relay/app'; import { getPagePattern } from '../../lib/routing/getPagePattern'; import { AppData } from '../../types/app'; -import { blocksContent } from '../../blocks/__generated__/blocksContent.graphql'; import { ParsedUrlQuery } from 'querystring'; import { getStaticParamsFromBlocks } from '../../lib/blocks/getStaticParamsFromBlocks'; import providers from '../../providers'; -import blocks from '../../blocks'; import { BlockType } from '../../types/block'; class PageProvider extends AbstractDatoCMSProvider< @@ -49,7 +47,13 @@ class PageProvider extends AbstractDatoCMSProvider< redirectPattern, }); - return data; + return { + ...data, + svgLogo: + data.webSetting?.logo?.format === 'svg' + ? await (await fetch(data.webSetting.logo.url)).text() + : undefined, + }; } async getStaticPaths(locale: string, blocks: Record): Promise { diff --git a/src/relay/webSetting.ts b/src/relay/webSetting.ts index 1cc7ffec..c41de7fd 100644 --- a/src/relay/webSetting.ts +++ b/src/relay/webSetting.ts @@ -3,6 +3,7 @@ import { graphql } from 'react-relay'; graphql` fragment webSettingFragment on WebSettingRecord { logo { + format ...appImageBaseFragment @relay(mask: false) responsiveImage(imgixParams: { w: 32 }) { ...appResponsiveImageFragment @relay(mask: false) diff --git a/src/styles/global.scss b/src/styles/global.scss index 6a8b1f0a..9e7dcafc 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -19,6 +19,7 @@ html, body { --navbar-height: 5rem; --logo-width: 3rem; --logo-height: 3rem; + --logo-color: #f60; --white: #fff; --black: #000; --red: #ff0000; diff --git a/src/types/app.ts b/src/types/app.ts index 7fc9bbc2..05d949a5 100644 --- a/src/types/app.ts +++ b/src/types/app.ts @@ -1,7 +1,9 @@ import { ResponsiveImageType } from 'react-datocms'; import { appQueryResponse } from '../relay/__generated__/appQuery.graphql'; -export type AppData = appQueryResponse; +export type AppData = appQueryResponse & { + svgLogo?: string; +}; export type BaseDatoCMSProps = | '_createdAt' diff --git a/src/types/appContext.ts b/src/types/appContext.ts index 23af5870..eb1e6937 100644 --- a/src/types/appContext.ts +++ b/src/types/appContext.ts @@ -9,4 +9,5 @@ export type AppContextProps = Partial & { currentUrl?: string; site?: AppData['site']; page?: AppData['page']; + svgLogo?: string; };