oacore · Joozty · Sep 7, 2020 · Aug 17, 2020
diff --git a/components/application/index.jsx b/components/application/index.jsx
@@ -12,37 +12,40 @@ const Application = ({
   children,
   dataProvider,
   pathname,
+  variant = 'public', // 'public' or 'internal'
   isAuthenticated = false,
   ...restProps
 }) => (
   <>
     <Head />
-    <Container {...restProps}>
+    <Container variant={variant} {...restProps}>
       <LoadingBar fixed />
-      <AppBar variant={isAuthenticated ? 'internal' : 'public'}>
+      <AppBar>
         {isAuthenticated ? (
           <>
             {dataProvider && <RepositorySelect value={dataProvider} />}
             <Logout />
           </>
         ) : null}
       </AppBar>
-      <SideBar tag="nav">
-        <h2 className="sr-only">Navigate your data</h2>
-        {dataProvider && (
-          <ActivitySelect>
-            {activities.routes
-              .filter((activity) => activity.parent == null)
-              .map(({ path, test }) => (
-                <ActivitySelect.Option
-                  key={path}
-                  value={path}
-                  selected={test(pathname)}
-                />
-              ))}
-          </ActivitySelect>
-        )}
-      </SideBar>
+      {variant === 'internal' && (
+        <SideBar tag="nav">
+          <h2 className="sr-only">Navigate your data</h2>
+          {dataProvider && (
+            <ActivitySelect>
+              {activities.routes
+                .filter((activity) => activity.parent == null)
+                .map(({ path, test }) => (
+                  <ActivitySelect.Option
+                    key={path}
+                    value={path}
+                    selected={test(pathname)}
+                  />
+                ))}
+            </ActivitySelect>
+          )}
+        </SideBar>
+      )}
       {children && <Main>{children}</Main>}
     </Container>
   </>

diff --git a/components/forms/iframe-form.jsx b/components/forms/iframe-form.jsx
@@ -7,20 +7,27 @@ import { Card } from 'design'
 
 const IframeForm = ({ className, title, ...passProps }) => {
   const ref = useRef(null)
-  const observer = useRef(null)
 
   const resize = useCallback(() => {
     ref.current.style.height = `${ref.current.contentWindow.document.body.offsetHeight}px`
   }, [])
 
-  useEffect(() => {
-    observer.current = new ResizeObserver(resize)
-    return () => observer.current.disconnect()
-  }, [])
+  const observer = useRef(new ResizeObserver(resize))
 
   const handleOnLoad = useCallback(() => {
-    observer.current.observe(ref.current.contentWindow.document.body)
-    resize()
+    if (ref.current.contentWindow.document.body) {
+      observer.current.unobserve(ref.current.contentWindow.document.body)
+      observer.current.observe(ref.current.contentWindow.document.body)
+      resize()
+    }
+  }, [])
+
+  useEffect(() => {
+    // onLoad event may be fired before the JS is completely loaded
+    // ensure the element gets observed
+    // https://github.com/facebook/react/issues/15446
+    handleOnLoad()
+    return () => observer.current.disconnect()
   }, [])
 
   return (

diff --git a/components/layout/container.jsx b/components/layout/container.jsx
@@ -4,7 +4,13 @@ import { classNames } from '@oacore/design/lib/utils'
 import { Provider as LayoutContext } from './context'
 import styles from './styles.module.css'
 
-const Container = ({ children, className, tag: Tag = 'div', ...restProps }) => {
+const Container = ({
+  children,
+  className,
+  variant,
+  tag: Tag = 'div',
+  ...restProps
+}) => {
   const [state, update] = useState({
     sidebarId: 'sidebar',
     sidebarExpanded: false,
@@ -13,7 +19,8 @@ const Container = ({ children, className, tag: Tag = 'div', ...restProps }) => {
   return (
     <Tag
       className={classNames
-        .use(styles.container, state.sidebarExpanded && styles.overlay)
+        .use('container', variant, state.sidebarExpanded)
+        .from(styles)
         .join(className)}
       {...restProps}
     >

diff --git a/components/layout/main.jsx b/components/layout/main.jsx
@@ -7,7 +7,7 @@ const Main = ({ children }) => {
   const child = React.Children.only(children)
   const { className, tag } = child.props
   return React.cloneElement(child, {
-    className: classNames.use(styles.main).join(className),
+    className: classNames.use(styles.main).join(className).toString(),
     tag: tag || 'main',
   })
 }

diff --git a/components/layout/styles.module.css b/components/layout/styles.module.css
@@ -10,8 +10,10 @@
   min-height: 100%;
   padding-top: var(--app-bar-skip);
   background: var(--gray-200);
+}
 
-  @media (--screen-at-least-desktop) {
+@media (--screen-at-least-desktop) {
+  .internal.container {
     padding-left: var(--side-bar-width);
   }
 }

diff --git a/pages/_app/index.jsx b/pages/_app/index.jsx
@@ -23,7 +23,7 @@ process.on('uncaughtException', (err) => {
 const ROUTES_WITHOUT_STORE = ['/login', '/reset', '/invitation']
 
 const isRouteWithoutStore = (pathname) =>
-  ROUTES_WITHOUT_STORE.find((prefix) => pathname.startsWith(prefix))
+  ROUTES_WITHOUT_STORE.some((prefix) => pathname.startsWith(prefix))
 
 export async function getStaticProps({ res }) {
   res.setHeader(
@@ -170,23 +170,27 @@ class App extends NextApp {
     const { store } = this
     const { Component, pageProps, router } = this.props
     const { isAuthorized } = this.state
-    const pathname = this.props.router.asPath
+    const pathname = router.asPath
+    const variant =
+      isAuthorized && !isRouteWithoutStore(pathname) ? 'internal' : 'public'
 
     if (!isAuthorized) {
       return (
-        <>
-          <Application dataProvider={undefined} pathname={pathname} />
-          {isRouteWithoutStore(router.asPath) ? (
-            <Component {...pageProps} />
-          ) : null}
-        </>
+        <Application
+          dataProvider={undefined}
+          pathname={pathname}
+          variant={variant}
+        >
+          {isRouteWithoutStore(pathname) ? <Component {...pageProps} /> : null}
+        </Application>
       )
     }
 
     return (
       <Application
         dataProvider={store.dataProvider}
         pathname={pathname}
+        variant={variant}
         isAuthenticated
       >
         <Component {...pageProps} />

diff --git a/pages/invitation.jsx b/pages/invitation.jsx
@@ -10,7 +10,7 @@ import { InvitationRegister } from 'components/forms'
 
 const Invitation = ({ className, router, ...restProps }) => (
   <Card
-    className={classNames.use(styles.invitationContainer, className)}
+    className={classNames.use(styles.invitationContainer, className).toString()}
     {...restProps}
   >
     <Title hidden>Register</Title>