feature/COR-1917_site-archive-compatible-gemeente-map (#4989)

* feat(COR-1917): Added new icons and prop drill for MenuItemLink * feat(COR-1917): Main functionality ready, abstraction and correction needed * feat(COR-1917): Added keys to the page and components * feat(COR-1917): Fixed bug with list button displayed on other pages * feat(COR-1917): Added omitted file * feat(COR-1917): Fixed compile issue
minvws · Mar 1, 2024 · 3e6f788 · 3e6f788
1 parent 6f06e07
commit 3e6f788
Show file tree

Hide file tree

Showing 13 changed files with 319 additions and 32 deletions.
diff --git a/packages/app/src/components/aside/menu.tsx b/packages/app/src/components/aside/menu.tsx
@@ -100,9 +100,10 @@ interface MenuItemLinkProps {
   icon?: ReactNode;
   href?: Url;
   showArrow?: boolean;
+  isLinkForMainMenu?: boolean;
 }
 
-export function MenuItemLink({ href, title }: MenuItemLinkProps) {
+export function MenuItemLink({ href, title, icon, isLinkForMainMenu = true }: MenuItemLinkProps) {
   const router = useRouter();
   const breakpoints = useBreakpoints(true);
 
@@ -121,8 +122,8 @@ export function MenuItemLink({ href, title }: MenuItemLinkProps) {
   return (
     <li>
       <Link href={href} passHref>
-        <StyledAnchor isActive={breakpoints.md && isActive} aria-current={isActive ? 'page' : undefined}>
-          <AsideTitle title={title} showArrow={!breakpoints.md || !isActive} />
+        <StyledAnchor isActive={breakpoints.md && isActive} isLinkForMainMenu={isLinkForMainMenu} aria-current={isActive ? 'page' : undefined}>
+          <AsideTitle icon={icon} title={title} showArrow={!breakpoints.md || !isActive} />
         </StyledAnchor>
       </Link>
     </li>
@@ -166,10 +167,10 @@ const Unavailable = styled.span(
   })
 );
 
-const StyledAnchor = styled(Anchor)<{ isActive: boolean }>((anchorProps) =>
+const StyledAnchor = styled(Anchor)<{ isActive: boolean; isLinkForMainMenu: boolean }>((anchorProps) =>
   css({
     padding: space[2],
-    paddingLeft: '3rem',
+    paddingLeft: anchorProps.isLinkForMainMenu ? '3rem' : '0.5rem',
     display: 'block',
     borderRight: '5px solid transparent',
     color: anchorProps.isActive ? colors.blue8 : 'black',

diff --git a/packages/app/src/components/aside/title.tsx b/packages/app/src/components/aside/title.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { space } from '~/style/theme';
 import { Box } from '../base';
 import { Text } from '../typography';
+import css from '@styled-system/css';
 
 type TitleProps = {
   title: string;
@@ -13,13 +14,17 @@ type TitleProps = {
   showArrow?: boolean;
 };
 
-export const AsideTitle = ({ title, subtitle, showArrow }: TitleProps) => {
+export const AsideTitle = ({ title, subtitle, showArrow, icon }: TitleProps) => {
   return (
     <Box width="100%" display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center">
       <Box width="100%">
         <Text>
           <Box as="span" display="flex" justifyContent="space-between" alignItems="center" width="100%">
-            {title}
+            <Box display="flex" alignItems="center">
+              {icon && <Icon>{icon}</Icon>}
+              {title}
+            </Box>
+
             {showArrow && <AsideArrow />}
           </Box>
         </Text>
@@ -36,3 +41,26 @@ const AsideArrow = styled(ChevronRight)`
   height: 20px;
   width: ${space[3]};
 `;
+
+const Icon = ({ children }: { children: ReactNode }) => {
+  return (
+    <Box
+      role="img"
+      aria-hidden="true"
+      flex="0 0 auto"
+      display="flex"
+      flexDirection="row"
+      flexWrap="nowrap"
+      css={css({
+        width: '2.5rem',
+        height: '2.5rem',
+        svg: {
+          height: '2.25rem',
+          fill: 'currentColor',
+        },
+      })}
+    >
+      {children}
+    </Box>
+  );
+};
diff --git a/packages/app/src/components/layout/app-content.tsx b/packages/app/src/components/layout/app-content.tsx
@@ -16,9 +16,10 @@ interface AppContentProps {
   sidebarComponent: React.ReactNode;
   searchComponent?: React.ReactNode;
   hideBackButton?: boolean;
+  displayAsFlex?: boolean;
 }
 
-export function AppContent({ children, sidebarComponent, searchComponent, hideBackButton }: AppContentProps) {
+export function AppContent({ children, sidebarComponent, searchComponent, hideBackButton, displayAsFlex = false }: AppContentProps) {
   const router = useRouter();
   const reverseRouter = useReverseRouter();
   const { commonTexts } = useIntl();
@@ -28,7 +29,6 @@ export function AppContent({ children, sidebarComponent, searchComponent, hideBa
   const currentCode = router.query.code as string | undefined;
   const backButtonConfig = { currentPageScope, currentCode, isMenuOpen, reverseRouter, commonTexts };
   const backButtonValues = getBackButtonValues(backButtonConfig);
-
   return (
     <MaxWidth paddingX={{ _: '0', lg: space[3] }}>
       <Box display={{ _: 'block', md: 'flex' }} flexDirection={{ _: 'column', md: 'row' }} margin={`0 auto ${space[4]} auto`} minHeight="50vh" paddingBottom={space[4]}>
@@ -47,12 +47,12 @@ export function AppContent({ children, sidebarComponent, searchComponent, hideBa
           flexShrink={0}
           minHeight={{ lg: '35em' }}
           width={{ md: '18rem', lg: '21rem' }}
+          display={displayAsFlex ? 'flex' : 'block'}
           zIndex={3}
+          justifyContent="center"
         >
-          <ResponsiveVisible isVisible={isMenuOpen}>
-            {searchComponent}
-            {sidebarComponent}
-          </ResponsiveVisible>
+          <ResponsiveVisibleAside isVisible={isMenuOpen}>{searchComponent}</ResponsiveVisibleAside>
+          <ResponsiveVisible isVisible={isMenuOpen}>{sidebarComponent}</ResponsiveVisible>
         </Box>
 
         {/* id is for hash navigation */}
@@ -114,3 +114,15 @@ 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
@@ -1,18 +1,24 @@
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { Menu, MenuRenderer } from '~/components/aside/menu';
+import { AppContent } from '~/components/layout/app-content';
 import { Box } from '~/components/base';
 import { ErrorBoundary } from '~/components/error-boundary';
-import { AppContent } from '~/components/layout/app-content';
+import { GmComboBox } from './components/gm-combo-box';
 import { Heading } from '~/components/typography';
-import { VisuallyHidden } from '~/components/visually-hidden';
-import { useIntl } from '~/intl';
+import { List } from '@corona-dashboard/icons';
+import { Menu, MenuItemLink, MenuRenderer } from '~/components/aside/menu';
 import { space } from '~/style/theme';
-import { GmComboBox } from './components/gm-combo-box';
+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';
+import Head from 'next/head';
+import React from 'react';
 
 type GmLayoutProps = {
   children?: React.ReactNode;
+  asideComponent?: React.ReactNode;
+  displayListButton?: React.ReactNode;
+  displayAsFlex?: boolean;
   getLink?: (code: string) => string;
 } & (
   | {
@@ -35,23 +41,50 @@ type GmLayoutProps = {
  * ## States
  *
  * ### Mobile
- * - /gemeente -> only show aside
+ * - /gemeente && /gemeente/lijstweergave-> only show aside
  * - /gemeente/[metric] -> only show content (children)
  *
  * ### Desktop
- * - /gemeente -> shows aside and content (children)
+ * - /gemeente && /gemeente/lijstweergave -> shows aside and content (children)
  * - /gemeente/[metric] -> shows aside and content (children)
  *
  * More info on persistent layouts:
  * https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
  */
 export function GmLayout(props: GmLayoutProps) {
-  const { children, municipalityName, code, getLink } = props;
-
+  const reverseRouter = useReverseRouter();
   const { commonTexts } = useIntl();
+
+  const {
+    children,
+    municipalityName,
+    code,
+    getLink,
+    displayListButton,
+    asideComponent = displayListButton ? (
+      <Box display="flex" flexDirection="column" justifyContent="space-between" width="100%">
+        <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();
 
-  const showMetricLinks = router.route !== '/gemeente';
+  const showMetricLinks = router.route !== '/gemeente' && router.route !== '/gemeente/lijstweergave';
 
   const isMainRoute = router.route === '/gemeente';
 
@@ -74,11 +107,7 @@ export function GmLayout(props: GmLayoutProps) {
 
       <AppContent
         hideBackButton={isMainRoute}
-        searchComponent={
-          <Box height="100%" maxWidth={{ _: '38rem', md: undefined }} marginX="auto">
-            <GmComboBox getLink={getLink} selectedGmCode={code} shouldFocusInput={false} />
-          </Box>
-        }
+        searchComponent={asideComponent}
         sidebarComponent={
           <>
             {showMetricLinks && (
@@ -107,6 +136,7 @@ export function GmLayout(props: GmLayoutProps) {
             )}
           </>
         }
+        displayAsFlex={displayAsFlex}
       >
         <ErrorBoundary>{children}</ErrorBoundary>
       </AppContent>

diff --git a/packages/app/src/next-config/rewrites.js b/packages/app/src/next-config/rewrites.js
@@ -19,7 +19,7 @@ async function rewrites() {
        * 3. /gemeente/gblah
        */
       {
-        source: '/gemeente/((?!gm|GM|gM|Gm).*):slug*',
+        source: '/gemeente/((?!gm|GM|gM|Gm|lijstweergave).*):slug*',
         destination: '/gemeente/code/404',
       },
       /**

diff --git a/packages/app/src/pages/gemeente/index.tsx b/packages/app/src/pages/gemeente/index.tsx
@@ -8,7 +8,9 @@ import { GmComboBox } from '~/domain/layout/components/gm-combo-box';
 import { GmLayout } from '~/domain/layout/gm-layout';
 import { Heading } from '~/components/typography';
 import { Layout } from '~/domain/layout/layout';
+import { List } from '@corona-dashboard/icons';
 import { Markdown } from '~/components/markdown';
+import { Menu, MenuItemLink } from '~/components/aside/menu';
 import { space } from '~/style/theme';
 import { TooltipContent } from '~/components/choropleth/tooltips';
 import { useBreakpoints } from '~/utils/use-breakpoints';
@@ -44,7 +46,7 @@ const Municipality = (props: StaticProps<typeof getStaticProps>) => {
 
   return (
     <Layout {...metadata} lastGenerated={lastGenerated}>
-      <GmLayout isLandingPage code={code}>
+      <GmLayout isLandingPage code={code} displayAsFlex displayListButton>
         {!breakpoints.md && (
           <Box bg="white">
             <GmComboBox selectedGmCode={code} />
@@ -84,6 +86,12 @@ const Municipality = (props: StaticProps<typeof getStaticProps>) => {
             </ErrorBoundary>
           </Box>
         </Box>
+
+        {!breakpoints.md && (
+          <Menu>
+            <MenuItemLink icon={<List />} title={commonTexts.gemeente_layout.list.go_to_list_label} href={reverseRouter.gm.lijstweergave()} showArrow isLinkForMainMenu={false} />
+          </Menu>
+        )}
       </GmLayout>
     </Layout>
   );