💄 Menu styling #2148 (#2175)

* 💄 Menu styling #2148 * 💄 Open menu with currentpage #2148 * 🐛 Handle error #2148 * 🎨 Self close #2148
equinor · Mar 11, 2024 · aba22f2 · aba22f2
1 parent 6a73cfb
commit aba22f2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 6 deletions.
diff --git a/sanityv3/schemas/documents/subMenu.tsx b/sanityv3/schemas/documents/subMenu.tsx
@@ -108,7 +108,7 @@ export default {
       description: 'A short and catchy introduction text for this menu item (max. 215 chars)',
       type: 'array',
       of: [introBlockContentType],
-      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 215)),
+      validation: (Rule: Rule) => Rule.custom((value: any) => validateCharCounterEditor(value, 215, true)),
     },
   ],
   preview: {

diff --git a/web/components/src/Menu/Menu.tsx b/web/components/src/Menu/Menu.tsx
@@ -22,9 +22,9 @@ const StyledAccordion = styled(Accordion)`
   }
 `
 
-export const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu({ children }, ref) {
+export const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu({ children, defaultIndex }, ref) {
   return (
-    <StyledAccordion forwardedAs="ul" allowToggle ref={ref} id="menu-accordion">
+    <StyledAccordion forwardedAs="ul" allowToggle ref={ref} id="menu-accordion" defaultIndex={defaultIndex}>
       {children}
     </StyledAccordion>
   )

diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
@@ -168,7 +168,7 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
               {hasSearch && (
                 <ControlChild>
                   <Button
-                    variant="ghost_icon"
+                    variant="ghost"
                     aria-expanded="true"
                     aria-label="Search"
                     forwardedAs={NextLink}
@@ -180,12 +180,14 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
                     }}
                     style={
                       {
+                        '--eds_button__padding_x': 'var(--space-small)',
                         color: 'var(--default-text)',
                         fill: 'var(--default-text)',
                       } as CSSProperties
                     }
                   >
                     <Icon size={24} data={search} />
+                    <FormattedMessage id="search" />
                   </Button>
                 </ControlChild>
               )}

diff --git a/web/pageComponents/shared/siteMenu/MenuGroup.tsx b/web/pageComponents/shared/siteMenu/MenuGroup.tsx
@@ -5,6 +5,7 @@ import { Link, List, Menu } from '@components'
 import type { MenuLinkData, SubMenuData, SubMenuGroupData } from '../../../types/types'
 import { SubMenuGroupHeading, SubMenuGroupList } from './SubMenuGroup'
 import FeaturedContent from './FeaturedContent'
+import { useRouter } from 'next/router'
 
 const { SubMenu, SubMenuHeader, SubMenuPanel, SubMenuGroups } = Menu
 const { Item } = List
@@ -31,6 +32,10 @@ const StyledSubMenuGroupLink = styled(Link)`
   :hover {
     background-color: var(--grey-10);
   }
+  &[aria-current]:not([aria-current='false']) {
+    border-left: var(--moss-green-95) solid 3px;
+    background-color: var(--grey-10);
+  }
 `
 
 const ReadMore = styled(Link)`
@@ -80,6 +85,7 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => {
   const { topLevelLink, groups, intro, featuredContent } = topLevelItem
 
   const topLevelHref = getLink(topLevelLink)
+  const router = useRouter()
 
   return (
     <SubMenu id={index}>
@@ -110,7 +116,11 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => {
                       <SubMenuGroupList aria-label={groupItem.label || topLevelLink?.label} unstyled>
                         {groupItem.links?.map((link: MenuLinkData) => (
                           <StyledItem key={link.id}>
-                            <StyledSubMenuGroupLink underline={false} href={getLink(link)}>
+                            <StyledSubMenuGroupLink
+                              underline={false}
+                              href={getLink(link)}
+                              aria-current={router.asPath == link?.link?.slug ? 'page' : 'false'}
+                            >
                               {link.label}
                             </StyledSubMenuGroupLink>
                           </StyledItem>

diff --git a/web/pageComponents/shared/siteMenu/SiteMenu.tsx b/web/pageComponents/shared/siteMenu/SiteMenu.tsx
@@ -66,6 +66,12 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
   const title = intl.formatMessage({ id: 'menu', defaultMessage: 'Menu' })
   const allSitesURL = getAllSitesLink('internal', router?.locale || 'en')
 
+  const getCurrentMenuItemIndex = (menuItems: SubMenuData[]) => {
+    return menuItems.findIndex((menuItem) =>
+      menuItem.groups?.some((group) => group.links.some((link) => link.link?.slug === router.asPath)),
+    )
+  }
+
   return (
     <>
       <MenuButton
@@ -93,11 +99,12 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
                   ></MenuButton>
                 </NavTopbar>
                 <MenuContainer>
-                  <Menu>
+                  <Menu defaultIndex={getCurrentMenuItemIndex(menuItems)}>
                     {menuItems.map((topLevelItem: SubMenuData, idx) => {
                       return <MenuGroup key={topLevelItem.id} index={idx} topLevelItem={topLevelItem} />
                     })}
                   </Menu>
+
                   <AllSitesLink href={allSitesURL}>
                     <FormattedMessage id="all_sites" defaultMessage="All sites" />
                   </AllSitesLink>

diff --git a/web/pageComponents/shared/siteMenu/SubMenuGroup.tsx b/web/pageComponents/shared/siteMenu/SubMenuGroup.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { List, Heading, HeadingProps, ListProps } from '@components'
 
 const StyledSubMenuGroupHeading = styled(Heading)`
+  color: var(--moss-green-95);
   font-weight: 650;
   letter-spacing: 0.15em;
   font-size: var(--typeScale-05) !important; // TODO: Eliminate the need for !important