Support different behavior when embedded

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<Props>) {
   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
       <AppWrapper>
         <AppHeader isCompact={props.isCompact} isMinimal={props.isMinimal} />
         <AppContentWrapper>{children}</AppContentWrapper>
-        <AppFooter />
+        {!isEmbedded && <AppFooter />}
       </AppWrapper>
     </>
   );

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 (
     <Wrapper>
       <Container>
         <NavigationBar>
           <Link href="/" passHref>
-            <LogoLink>
+            <LogoLink hidden={isEmbedded}>
               <Logo />
             </LogoLink>
           </Link>
@@ -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({

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<unknown>) {
+  const state = useProvideEmbeddingState();
+
+  return <embeddingContext.Provider value={state}>{children}</embeddingContext.Provider>;
+}
+
+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,
+  };
+}

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 (
-    <QueryClientProvider client={queryClient}>
-      <Component {...pageProps} />
-    </QueryClientProvider>
+    <EmbeddingStateProvider>
+      <QueryClientProvider client={queryClient}>
+        <Component {...pageProps} />
+      </QueryClientProvider>
+    </EmbeddingStateProvider>
   );
 }