diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx
index f7d29732e..da9c3ad4b 100644
--- a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx
+++ b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx
@@ -1,10 +1,11 @@
import styled from 'styled-components'
import { List, Menu } from '@components'
-import { Link } from '@core/Link'
-import { SimplePanel } from './SimplePanel'
+import { Link, ReadMoreLink } from '@core/Link'
import { SimpleHeader } from './SimpleHeader'
import type { SimpleGroupData } from '../../../../types/index'
+import { SubMenuGroupList } from '../SubMenuGroup'
+import { AccordionPanel } from '@chakra-ui/react'
const { SubMenu } = Menu
const { Item } = List
@@ -15,21 +16,6 @@ const SimpleSubMenu = styled(SubMenu)`
}
`
-const StyledSubMenuGroupLink = styled(Link)`
- display: flex;
- padding: calc(var(--space-small) + var(--space-xSmall)) var(--space-medium);
-
- :hover {
- background-color: var(--grey-10);
- }
-`
-const ReadMore = styled(Link)`
- padding: calc(var(--space-small) + var(--space-xSmall)) 0;
-`
-const PanelContentWrapper = styled.div`
- padding-bottom: var(--spacing-large);
-`
-
type MenuGroupType = {
item: SimpleGroupData
index: number
@@ -41,18 +27,19 @@ export const SimpleMenuItem = ({ item, index }: MenuGroupType) => {
return (
{label && {label}}
-
-
- {!!readMoreLink?.link?.slug && {readMoreLink.label}}
-
+
+
+
{!!readMoreLink?.link?.slug && {readMoreLink.label}}
+
+
{links?.map((link) => (
- -
- {link.label}
+
-
+ {link.label}
))}
-
-
-
+
+
+
)
}
diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleMenuWrapper.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleMenuWrapper.tsx
deleted file mode 100644
index 0c69775c3..000000000
--- a/web/pageComponents/shared/siteMenu/simple/SimpleMenuWrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from 'styled-components'
-import { Accordion, AccordionProps } from '@chakra-ui/react'
-
-export type MenuProps = AccordionProps
-
-const StyledAccordion = styled(Accordion)`
- margin: 0;
- padding: 0;
- list-style: none;
- @media (min-width: 700px) {
- margin: 0 auto;
- max-width: var(--layout-maxContent-narrow);
- }
-`
-
-export const SimpleMenuWrapper = ({ children, ...rest }: MenuProps) => {
- return (
-
- )
-}
diff --git a/web/pageComponents/shared/siteMenu/simple/SimplePanel.tsx b/web/pageComponents/shared/siteMenu/simple/SimplePanel.tsx
deleted file mode 100644
index 343f2f031..000000000
--- a/web/pageComponents/shared/siteMenu/simple/SimplePanel.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components'
-import { AccordionPanel, AccordionPanelProps as ChakraAccordionPanelProps } from '@chakra-ui/react'
-
-const StyledPanel = styled(AccordionPanel)`
- background-color: var(--background-color);
- @media (min-width: 1300px) {
- max-width: 1700px;
- margin: 0 auto;
- }
-`
-
-export type AccordionPanelProps = ChakraAccordionPanelProps
-
-export const SimplePanel = ({ children, ...rest }: AccordionPanelProps) => {
- return {children}
-}
diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
index 9bb46f892..6d882bf87 100644
--- a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
+++ b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
@@ -1,10 +1,8 @@
// The simple variant for the menu is used by the satellite sites
import { useEffect, useCallback, useState } from 'react'
-import styled from 'styled-components'
import { useRouter } from 'next/router'
import { FormattedMessage, useIntl } from 'react-intl'
-import { SimpleMenuWrapper } from './SimpleMenuWrapper'
import { MenuButton } from '@components'
import { Link } from '@core/Link'
import { SimpleMenuItem } from './SimpleMenuItem'
@@ -16,31 +14,7 @@ import { TopbarDropdown } from '../TopbarDropdown'
import { LogoLink } from '../../LogoLink'
import { NavTopbar } from '../NavTopbar'
import { FloatingFocusManager, FloatingOverlay, useDismiss, useFloating, useInteractions } from '@floating-ui/react'
-
-const MenuContainer = styled.div`
- font-size: var(--typeScale-1);
- background-color: transparent;
- padding: 0 var(--space-large);
-`
-
-// TODO: This needs to be looked at. Not optimal solution.
-const MenuLink = styled(Link)`
- font-size: var(--typeScale-1);
- padding: calc(var(--space-small) + var(--space-small)) 0;
- svg {
- display: none;
- }
- &:hover {
- background-color: var(--grey-10);
- }
-`
-const AllSitesLink = styled(Link)`
- text-decoration: none;
- padding: calc(var(--space-small) + var(--space-small)) 0;
- &:hover {
- text-decoration: underline;
- }
-`
+import { Accordion } from '@chakra-ui/react'
export type MenuProps = {
data?: SimpleMenuData
@@ -75,7 +49,7 @@ const SimpleSiteMenu = ({ data, ...rest }: MenuProps) => {
const allSitesURL = getAllSitesLink('external')
return (
- <>
+
{
setIsOpen(false)}>
-
-
- {menuItems?.map((item: SimpleGroupData, idx: number) => {
- if (item?.type === 'simpleMenuGroup') {
- return
- } else if (item?.type === 'simpleMenuLink') {
- // Is this really necessary?
- if (item.link && !item.link.slug) {
- console.warn('Missing slug for simple menu link')
+
+
+
)}
- >
+
)
}
export default SimpleSiteMenu