feature/COR-1899-archived-pages-accordion (#4974)

* feat(COR-1899): First round of visual styling

* feat(COR-1899): Fixed overlay issue

* refactor(COR-1899): Refactor into modern styled-components css syntax

* feat(COR-1899): Size dropdown relevantly for mobile

* feat(COR-1899): Fix outlining of arrow icons on mobile

* feat(COR-1899): Add condition and reformat

* refactor(COR-1899): Refactor useCollapsible destructuring

* feat(COR-1899): Apply feedback from codereview.

* feat(COR-1899): Leave text black on hover over

packages/app/src/components/aside/components/CategoryDropdown.tsx

@@ -0,0 +1,84 @@
+import { Box } from '~/components/base';
+import { colors } from '@corona-dashboard/common';
+import { mediaQueries, radii, space } from '~/style/theme';
+import styled from 'styled-components';
+
+export const CategoryDropdownRoot = styled(Box)`
+  @media ${mediaQueries.xl} {
+    margin: 0;
+  }
+  position: relative;
+  box-shadow: ${space[1]} 0 0 ${space[4]} ${colors.white};
+  margin: 0 ${space[2]};
+`;
+
+export const CategoryDropdown = styled(Box)`
+  @media ${mediaQueries.xl} {  
+    padding: ${space[2]} ${space[3]} ${space[2]} ${space[2]};
+    margin: 0;
+  }
+  &:hover {
+    cursor: pointer;
+    border-color: ${colors.blue8};
+  },
+  &:focus {
+    background: ${colors.white};
+    color: ${colors.black};
+  }
+  &:hover, &:focus {
+      background: ${colors.gray1};
+  },
+  cursor: default;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: ${space[2]};
+  padding: ${space[2]} ${space[1]} ${space[2]} ${space[1]};
+  border-color: ${colors.gray3};
+  border-style: solid;
+  border-width: 1px;
+  border-radius: ${radii[1]}px;
+  user-select: none;
+  transition: 0.1s background-color;
+  &[aria-expanded=true] {
+    background: ${colors.white};
+    color: ${colors.black};
+    border-radius: ${radii[1]}px ${radii[1]}px 0 0;
+    border-color: ${colors.blue8};
+    border-bottom-color: ${colors.white};
+    &:hover, &:focus {
+      border-bottom-color: ${colors.white};
+    },
+  }
+`;
+
+export const CategorySelectBox = styled(Box)`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+export const CategoryListBox = styled(Box)`
+  background: white;
+  width: 100%;
+  overflow-y: clip;
+  border-color: ${colors.blue8};
+  border-style: solid;
+  border-width: 1px;
+  border-top-width: 0;
+  display: none;
+  ${CategoryDropdown}[aria-expanded=true] + & {
+    display: block;
+    border-radius: 0 0 ${radii[1]}px ${radii[1]}px;
+  }
+`;
+
+export const CategoryListBoxOption = styled(Box)`
+  cursor: default;
+  a {
+    @media ${mediaQueries.xl} {
+      padding: ${space[2]} ${space[2]} ${space[2]} 3rem;
+    }
+    padding: ${space[2]} 0 ${space[2]} ${space[4]};
+  }
+`;

packages/app/src/components/aside/menu.tsx

@@ -1,21 +1,22 @@
 import { Anchor, Heading } from '~/components/typography';
+import { ArchivedPath, useArchivedPaths } from '~/utils/use-archived-paths';
 import { AsideTitle } from './title';
 import { asResponsiveArray } from '~/style/utils';
 import { Box } from '~/components/base';
+import chevronUrl from '~/assets/chevron.svg';
+import css from '@styled-system/css';
+import { CategoryDropdown, CategoryDropdownRoot, CategoryListBox, CategoryListBoxOption, CategorySelectBox } from '~/components/aside/components/CategoryDropdown';
 import { colors } from '@corona-dashboard/common';
 import { ExpandedSidebarMap, Layout } from '~/domain/layout/logic/types';
 import { Link } from '~/utils/link';
 import { NextRouter, useRouter } from 'next/router';
 import { ReactNode } from 'react';
 import { resolveHref } from 'next/dist/shared/lib/router/router';
 import { space, SpaceValue } from '~/style/theme';
+import styled from 'styled-components';
 import { UrlObject } from 'url';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { useCollapsible } from '~/utils/use-collapsible';
-import chevronUrl from '~/assets/chevron.svg';
-import css from '@styled-system/css';
-import styled from 'styled-components';
-import { ArchivedPath, useArchivedPaths } from '~/utils/use-archived-paths';
 
 type Url = UrlObject | string;
 
@@ -58,25 +59,24 @@ export function Menu({ children, spacing }: { children: ReactNode; spacing?: Spa
 export function CollapsibleCategoryMenu({ title, children, icon }: { children: ReactNode; title?: string; icon: ReactNode; key: string }) {
   const router = useRouter();
   const archivedPaths = useArchivedPaths();
-  const collapsible = useCollapsible({ isOpen: isCurrentRouteArchivedPage(router, archivedPaths) });
+  const { button: collapsibleButton, content: collapsibleContent, chevron: collapseChevron } = useCollapsible({ isOpen: isCurrentRouteArchivedPage(router, archivedPaths) });
+
   return (
-    <Box as="li" spacing={2} borderTop={`1px solid ${colors.gray2}`}>
-      {title && icon && (
-        <>
-          <Box display="flex" flexDirection="row" flexWrap="nowrap" alignItems="center">
-            <Box width="100%">
-              <Box paddingX={space[2]} paddingTop={space[3]} display="flex" justifyContent="space-between" alignItems="center">
-                <Box display="flex" alignItems="center">
-                  <Icon>{icon}</Icon>
-                  <Heading level={5}>{title}</Heading>
-                </Box>
-                <Box pr={space[1]}>{collapsible.button()}</Box>
-              </Box>
-            </Box>
-          </Box>
-          {collapsible.content(<Menu>{children}</Menu>)}
-        </>
-      )}
+    <Box as="li" mt={space[4]} mb={space[4]}>
+      <CategoryDropdownRoot>
+        {title &&
+          icon &&
+          collapsibleButton(
+            <CategoryDropdown>
+              <CategorySelectBox>
+                <Icon>{icon}</Icon>
+                <Heading level={5}>{title}</Heading>
+              </CategorySelectBox>
+              {collapseChevron}
+            </CategoryDropdown>
+          )}
+        <CategoryListBox as="ul">{collapsibleContent(<CategoryListBoxOption>{children}</CategoryListBoxOption>)}</CategoryListBox>
+      </CategoryDropdownRoot>
     </Box>
   );
 }