embedded mode link to CC home

Author: Veikkosuhonen

src/client/App.tsx

@@ -9,7 +9,7 @@ import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom'
 import { initShibbolethPinger } from 'unfuck-spa-shibboleth-session'
 import { PUBLIC_URL } from '../config'
 import { Feedback } from './components/Feedback'
-import NavBar from './components/NavBar'
+import NavBar, { EmbeddedNavBar } from './components/NavBar'
 import { AppContext } from './contexts/AppContext'
 import { EmbeddedProvider, useIsEmbedded } from './contexts/EmbeddedContext'
 import useCurrentUser from './hooks/useCurrentUser'
@@ -111,7 +111,7 @@ const Layout = () => {
         }}
         ref={appRef}
       >
-        {!isEmbedded && <NavBar />}
+        {isEmbedded ? <EmbeddedNavBar /> : <NavBar />}
         <Box sx={{ flex: 1, mt: '4rem' }}>
           <Content />
         </Box>

src/client/components/NavBar/index.tsx

@@ -21,14 +21,33 @@ import {
   useMediaQuery,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { Language, AdminPanelSettingsOutlined, BookmarksOutlined, GradeOutlined } from '@mui/icons-material'
+import { Language, AdminPanelSettingsOutlined, BookmarksOutlined, GradeOutlined, OpenInNew } from '@mui/icons-material'
 import { useTranslation } from 'react-i18next'
 import MenuIcon from '@mui/icons-material/Menu'
 
 import useCurrentUser from '../../hooks/useCurrentUser'
 import hyLogo from '../../assets/hy_logo.svg'
 import styles from './styles'
 
+export const EmbeddedNavBar = () => {
+  const { t } = useTranslation()
+
+  return (
+    <MuiLink
+      to="/"
+      sx={{ display: 'flex', alignItems: 'center', color: 'inherit', textDecoration: 'none', position: 'fixed', top: 0, left: 0, p: 1, zIndex: 1000 }}
+      component={Link}
+      target="_blank"
+    >
+      <img src={hyLogo} alt="University of Helsinki" width="18" />
+      <Box mx="1rem">
+        <Typography sx={{ ...styles.appName, fontSize: '1.1rem' }}>{t('appName')}</Typography>
+      </Box>
+      <OpenInNew sx={{ fontSize: '1.1rem' }} />
+    </MuiLink>
+  )
+}
+
 const NavBar = () => {
   const { t, i18n } = useTranslation()