✏️ Rewrite simplemenu to tailwind and fix link styling #2553 (#2562)

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 (
     <SimpleSubMenu id={index}>
       {label && <SimpleHeader>{label}</SimpleHeader>}
-      <SimplePanel>
-        <PanelContentWrapper>
-          {!!readMoreLink?.link?.slug && <ReadMore href={readMoreLink.link?.slug}>{readMoreLink.label}</ReadMore>}
-          <List aria-label={label} unstyled>
+      <AccordionPanel className='md:max-w-screen-3xl mx-0 my-auto'>
+        <div className='pb-6'>
+          <div className="max-w-menuText xl:pr-lg pb-sm"> {!!readMoreLink?.link?.slug && <ReadMoreLink href={readMoreLink.link?.slug}>{readMoreLink.label}</ReadMoreLink>}
+          </div>
+          <SubMenuGroupList aria-label={label} unstyled>
             {links?.map((link) => (
-              <Item key={link.id}>
-                <StyledSubMenuGroupLink href={link?.link?.slug || '/'}>{link.label}</StyledSubMenuGroupLink>
+              <Item className='m-0' key={link.id}>
+                <Link className={`flex aria-current:bg-grey-10 hover:bg-grey-10 m-0 no-underline px-md py-xs+sm xl:ml-[calc(var(--space-medium)_*_(-1))]  aria-current:border-l-[3px] aria-current:border-moss-green-95`} href={link?.link?.slug || '/'}>{link.label}</Link>
               </Item>
             ))}
-          </List>
-        </PanelContentWrapper>
-      </SimplePanel>
+          </SubMenuGroupList>
+        </div>
+      </AccordionPanel>
     </SimpleSubMenu>
   )
 }

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 (
-    <>
+    <div>
       <MenuButton
         ref={refs.setReference}
         {...getReferenceProps()}
@@ -94,34 +68,34 @@ const SimpleSiteMenu = ({ data, ...rest }: MenuProps) => {
                   <LogoLink />
                   <MenuButton title={title} aria-expanded={true} expanded onClick={() => setIsOpen(false)}></MenuButton>
                 </NavTopbar>
-                <MenuContainer>
-                  <SimpleMenuWrapper>
-                    {menuItems?.map((item: SimpleGroupData, idx: number) => {
-                      if (item?.type === 'simpleMenuGroup') {
-                        return <SimpleMenuItem item={item} key={item.id} index={idx} />
-                      } else if (item?.type === 'simpleMenuLink') {
-                        // Is this really necessary?
-                        if (item.link && !item.link.slug) {
-                          console.warn('Missing slug for simple menu link')
+                <div className='px-6'>
+                <Accordion as="ul" className='max-w-screen-lg mx-auto' allowToggle id="menu-accordion">
+                  {menuItems?.map((item: SimpleGroupData, idx: number) => {
+                        if (item?.type === 'simpleMenuGroup') {
+                          return <SimpleMenuItem item={item} key={item.id} index={idx} />
+                        } else if (item?.type === 'simpleMenuLink') {
+                          // Is this really necessary?
+                          if (item.link && !item.link.slug) {
+                            console.warn('Missing slug for simple menu link')
+                          }
+                          return (
+                            <li key={item.id}>
+                              <Link className='list-none no-underline w-full mt-2 mx-0 mr-0 hover:bg-grey-10 py-xs+sm' href={(item.link && item.link.slug) || '/'}> {item.label} </Link>
+                              </li>
+                          )
                         }
-                        return (
-                          <li key={item.id}>
-                            <MenuLink href={(item.link && item.link.slug) || '/'}> {item.label} </MenuLink>
-                          </li>
-                        )
-                      }
-                    })}
-                    <AllSitesLink href={allSitesURL}>
+                      })}
+                    <Link className='list-none no-underline w-full mt-2 mx-0 mr-0 hover:bg-grey-10 py-xs+sm' href={allSitesURL}>
                       <FormattedMessage id="all_sites" defaultMessage="All sites" />
-                    </AllSitesLink>
-                  </SimpleMenuWrapper>
-                </MenuContainer>
+                    </Link>
+                  </Accordion>
+                </div>
               </nav>
             </TopbarDropdown>
           </FloatingOverlay>
         </FloatingFocusManager>
       )}
-    </>
+    </div>
   )
 }
 export default SimpleSiteMenu