diff --git a/components/containers/Screen.tsx b/components/containers/Screen.tsx index e11fb26..5861ee3 100644 --- a/components/containers/Screen.tsx +++ b/components/containers/Screen.tsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router'; import React from 'react'; import styled from 'styled-components'; +import { useEmbeddingState } from '../../hooks/useEmbeddingState'; import { Brand } from '../../utils/constants/app'; import AppFooter from '../navigation/AppFooter'; import AppHeader from '../navigation/AppHeader'; @@ -18,6 +19,7 @@ interface Props { export default function Screen({ children, description, ...props }: React.PropsWithChildren) { const { t } = useTranslation('common'); const { asPath } = useRouter(); + const { isEmbedded } = useEmbeddingState(); const basePath = process.env.NEXT_PUBLIC_URL || ''; const basePageTitle = t('pageTitle', { brand: Brand.name }); @@ -60,7 +62,7 @@ export default function Screen({ children, description, ...props }: React.PropsW {children} - + {!isEmbedded && } ); diff --git a/components/navigation/AppHeader/index.tsx b/components/navigation/AppHeader/index.tsx index 9b152ab..1279b06 100644 --- a/components/navigation/AppHeader/index.tsx +++ b/components/navigation/AppHeader/index.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import React from 'react'; import styled from 'styled-components'; +import { useEmbeddingState } from '../../../hooks/useEmbeddingState'; import { Brand } from '../../../utils/constants/app'; import SearchInput from './SearchInput'; @@ -13,13 +14,14 @@ interface Props { export default function AppHeader({ isCompact, isMinimal }: Props) { const { t } = useTranslation('common'); + const { isEmbedded } = useEmbeddingState(); return ( - + @@ -60,7 +62,9 @@ const NavigationBar = styled.div.attrs({ const SearchBar = styled.div.attrs({ className: 'space-y-2' })``; -const LogoLink = styled.a``; +const LogoLink = styled.a.attrs<{ hidden?: boolean }>(({ hidden }) => ({ + className: hidden ? 'invisible' : '', +}))``; const Logo = styled.img.attrs({ alt: Brand.name, @@ -69,7 +73,7 @@ const Logo = styled.img.attrs({ })``; const NavigationActions = styled.div.attrs({ - className: 'flex items-center text-sm space-x-4', + className: 'flex items-center text-sm ml-auto space-x-4', })``; const ExternalLink = styled.a.attrs({ diff --git a/hooks/useEmbeddingState.tsx b/hooks/useEmbeddingState.tsx new file mode 100644 index 0000000..c50e8a3 --- /dev/null +++ b/hooks/useEmbeddingState.tsx @@ -0,0 +1,31 @@ +import { useRouter } from 'next/router'; +import React, { createContext, useContext, useEffect, useState } from 'react'; + +const embeddingContext = createContext({ isEmbedded: false }); + +export function EmbeddingStateProvider({ children }: React.PropsWithChildren) { + const state = useProvideEmbeddingState(); + + return {children}; +} + +export const useEmbeddingState = () => { + return useContext(embeddingContext); +}; + +function useProvideEmbeddingState() { + const [isEmbedded, setIsEmbedded] = useState(false); + const { query } = useRouter(); + + const currentEmbeddingState = query.embedded; + + useEffect(() => { + if (currentEmbeddingState) { + setIsEmbedded(currentEmbeddingState == 'true'); + } + }, [currentEmbeddingState]); + + return { + isEmbedded, + }; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index a1aec95..e3ce1ce 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,13 +4,17 @@ import type { AppProps } from 'next/app'; import React from 'react'; import { QueryClient, QueryClientProvider } from 'react-query'; +import { EmbeddingStateProvider } from '../hooks/useEmbeddingState'; + const queryClient = new QueryClient(); function App({ Component, pageProps }: AppProps) { return ( - - - + + + + + ); }