fix(my-pages): REVERT "feat(my-pages): Navigation - new mobile menu +…

… tweaks (#17242)" (#17483)

This reverts commit 87e2c7b.

apps/portals/my-pages/src/components/Header/Header.css.ts

@@ -7,7 +7,7 @@ import {
 import { theme, themeUtils } from '@island.is/island-ui/theme'
 
 export const header = style({
-  position: 'relative',
+  position: 'fixed',
   zIndex: zIndex.header,
   display: 'flex',
   alignItems: 'center',
@@ -18,7 +18,6 @@ export const header = style({
   '@media': {
     [`screen and (min-width: ${theme.breakpoints.lg}px)`]: {
       height: SERVICE_PORTAL_HEADER_HEIGHT_LG,
-      position: 'fixed',
     },
   },
   transition: 'all 250ms ease-in-out',

apps/portals/my-pages/src/components/Layout/Layout.css.ts

@@ -21,12 +21,6 @@ export const lock = style({
 
 export const btn = style({})
 
-export const mobileNav = style({
-  position: 'sticky',
-  top: 0,
-  zIndex: 99,
-})
-
 globalStyle(`${btn} > span`, {
   boxShadow: 'none',
 })

apps/portals/my-pages/src/components/Layout/NarrowLayout.tsx

@@ -1,12 +1,16 @@
 import { ReactNode } from 'react'
-import { Box, NavigationItem, Icon } from '@island.is/island-ui/core'
+import {
+  Box,
+  Navigation,
+  NavigationItem,
+  Icon,
+} from '@island.is/island-ui/core'
 import ContentBreadcrumbs from '../../components/ContentBreadcrumbs/ContentBreadcrumbs'
 import {
   m,
   ServicePortalNavigationItem,
   ModuleAlertBannerSection,
   GoBack,
-  Navigation,
 } from '@island.is/portals/my-pages/core'
 import { useLocale } from '@island.is/localization'
 import { useWindowSize } from 'react-use'
@@ -97,10 +101,11 @@ export const NarrowLayout = ({
                     )
                   }}
                   asSpan
-                  baseId="service-portal-navigation"
+                  baseId={'service-portal-navigation'}
                   title={formatMessage(activeParent?.name ?? m.tableOfContents)}
                   items={subNavItems ?? []}
                   expand
+                  expandOnActivation
                   titleIcon={activeParent?.icon}
                 />
               </Box>
@@ -117,7 +122,7 @@ export const NarrowLayout = ({
       >
         <ContentBreadcrumbs />
         {isMobile && subNavItems && subNavItems.length > 0 && (
-          <Box paddingBottom={3} width="full" className={styles.mobileNav}>
+          <Box paddingBottom={3} width="full">
             <Navigation
               renderLink={(link, item) => {
                 return item?.href ? (
@@ -127,7 +132,7 @@ export const NarrowLayout = ({
                 )
               }}
               asSpan
-              baseId="service-portal-mobile-navigation"
+              baseId={'service-portal-mobile-navigation'}
               title={
                 activeParent?.name
                   ? formatMessage(activeParent?.name)