fix(COR-1917): Fixed flex issue with new layout components (#4993)

minvws · Mar 4, 2024 · 36a1cb9 · 36a1cb9
1 parent 4770469
commit 36a1cb9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 47 deletions.
diff --git a/packages/app/src/components/layout/app-content.tsx b/packages/app/src/components/layout/app-content.tsx
@@ -1,25 +1,28 @@
-import { colors } from '@corona-dashboard/common';
-import { useRouter } from 'next/router';
-import styled from 'styled-components';
 import { ArrowIconLeft } from '~/components/arrow-icon';
 import { Box } from '~/components/base';
+import { colors } from '@corona-dashboard/common';
+import { getBackButtonValues } from './logic/get-back-button-values';
+import { getCurrentPageScope } from '~/utils/get-current-page-scope';
+import { LinkWithIcon } from '../link-with-icon';
+import { List } from '@corona-dashboard/icons';
 import { MaxWidth } from '~/components/max-width';
-import { useIntl } from '~/intl';
 import { mediaQueries, space } from '~/style/theme';
-import { getCurrentPageScope } from '~/utils/get-current-page-scope';
+import { Menu, MenuItemLink } from '~/components/aside/menu';
+import { useIntl } from '~/intl';
 import { useReverseRouter } from '~/utils/use-reverse-router';
-import { LinkWithIcon } from '../link-with-icon';
-import { getBackButtonValues } from './logic/get-back-button-values';
+import { useRouter } from 'next/router';
+import React from 'react';
+import styled from 'styled-components';
 
 interface AppContentProps {
   children: React.ReactNode;
   sidebarComponent: React.ReactNode;
-  searchComponent?: React.ReactNode;
+  mainComponent?: React.ReactNode;
   hideBackButton?: boolean;
-  displayAsFlex?: boolean;
+  displayListButton?: boolean;
 }
 
-export function AppContent({ children, sidebarComponent, searchComponent, hideBackButton, displayAsFlex = false }: AppContentProps) {
+export function AppContent({ children, sidebarComponent, mainComponent, hideBackButton, displayListButton = false }: AppContentProps) {
   const router = useRouter();
   const reverseRouter = useReverseRouter();
   const { commonTexts } = useIntl();
@@ -47,11 +50,29 @@ export function AppContent({ children, sidebarComponent, searchComponent, hideBa
           flexShrink={0}
           minHeight={{ lg: '35em' }}
           width={{ md: '18rem', lg: '21rem' }}
-          display={displayAsFlex ? 'flex' : 'block'}
+          display={'block'}
           zIndex={3}
           justifyContent="center"
         >
-          <ResponsiveVisibleAside isVisible={isMenuOpen}>{searchComponent}</ResponsiveVisibleAside>
+          <Box display={displayListButton ? 'flex' : 'block'} flexDirection="column" justifyContent="space-between" height={displayListButton ? '100%' : undefined}>
+            <ResponsiveVisible isVisible={isMenuOpen}>{mainComponent}</ResponsiveVisible>
+
+            {displayListButton && (
+              <ResponsiveVisible isVisible={isMenuOpen}>
+                <Box maxWidth={{ _: '38rem', md: undefined }}>
+                  <Menu>
+                    <MenuItemLink
+                      icon={<List />}
+                      title={commonTexts.gemeente_layout.list.go_to_list_label}
+                      href={reverseRouter.gm.lijstweergave()}
+                      showArrow
+                      isLinkForMainMenu={false}
+                    />
+                  </Menu>
+                </Box>
+              </ResponsiveVisible>
+            )}
+          </Box>
           <ResponsiveVisible isVisible={isMenuOpen}>{sidebarComponent}</ResponsiveVisible>
         </Box>
 
@@ -114,15 +135,3 @@ const ResponsiveVisible = styled.div<ResponsiveVisibleProps>`
     display: block;
   }
 `;
-
-const ResponsiveVisibleAside = styled.div<ResponsiveVisibleProps>`
-  display: ${({ isVisible }) => (isVisible ? 'flex' : 'none')};
-
-  @media ${mediaQueries.md} {
-    display: ${({ isVisible }) => (!isVisible ? 'flex' : undefined)};
-  }
-
-  .has-no-js & {
-    display: block;
-  }
-`;
diff --git a/packages/app/src/domain/layout/gm-layout.tsx b/packages/app/src/domain/layout/gm-layout.tsx
@@ -3,11 +3,9 @@ import { Box } from '~/components/base';
 import { ErrorBoundary } from '~/components/error-boundary';
 import { GmComboBox } from './components/gm-combo-box';
 import { Heading } from '~/components/typography';
-import { List } from '@corona-dashboard/icons';
-import { Menu, MenuItemLink, MenuRenderer } from '~/components/aside/menu';
+import { Menu, MenuRenderer } from '~/components/aside/menu';
 import { space } from '~/style/theme';
 import { useIntl } from '~/intl';
-import { useReverseRouter } from '~/utils';
 import { useRouter } from 'next/router';
 import { useSidebar } from './logic/use-sidebar';
 import { VisuallyHidden } from '~/components/visually-hidden';
@@ -17,7 +15,7 @@ import React from 'react';
 type GmLayoutProps = {
   children?: React.ReactNode;
   asideComponent?: React.ReactNode;
-  displayListButton?: React.ReactNode;
+  displayListButton?: boolean;
   displayAsFlex?: boolean;
   getLink?: (code: string) => string;
 } & (
@@ -52,34 +50,21 @@ type GmLayoutProps = {
  * https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
  */
 export function GmLayout(props: GmLayoutProps) {
-  const reverseRouter = useReverseRouter();
   const { commonTexts } = useIntl();
 
   const {
     children,
     municipalityName,
     code,
     getLink,
-    displayListButton,
-    asideComponent = displayListButton ? (
-      <Box display="flex" flexDirection="column" justifyContent="space-between" width="100%">
+    displayListButton = false,
+    asideComponent = (
+      <>
         <Box maxWidth={{ _: '38rem', md: undefined }}>
           <GmComboBox getLink={getLink} selectedGmCode={code} shouldFocusInput={false} />
         </Box>
-        <Box maxWidth={{ _: '38rem', md: undefined }}>
-          <Menu>
-            <MenuItemLink icon={<List />} title={commonTexts.gemeente_layout.list.go_to_list_label} href={reverseRouter.gm.lijstweergave()} showArrow isLinkForMainMenu={false} />
-          </Menu>
-        </Box>
-      </Box>
-    ) : (
-      <Box display="flex" flexDirection="column" justifyContent="space-between" width="100%">
-        <Box maxWidth={{ _: '38rem', md: undefined }}>
-          <GmComboBox getLink={getLink} selectedGmCode={code} shouldFocusInput={false} />
-        </Box>
-      </Box>
+      </>
     ),
-    displayAsFlex = false,
   } = props;
 
   const router = useRouter();
@@ -107,7 +92,7 @@ export function GmLayout(props: GmLayoutProps) {
 
       <AppContent
         hideBackButton={isMainRoute}
-        searchComponent={asideComponent}
+        mainComponent={asideComponent}
         sidebarComponent={
           <>
             {showMetricLinks && (
@@ -136,7 +121,7 @@ export function GmLayout(props: GmLayoutProps) {
             )}
           </>
         }
-        displayAsFlex={displayAsFlex}
+        displayListButton={displayListButton}
       >
         <ErrorBoundary>{children}</ErrorBoundary>
       </AppContent>