feat(my-pages): Navigation - new mobile menu + tweaks

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: 'fixed',
+  position: 'relative',
   zIndex: zIndex.header,
   display: 'flex',
   alignItems: 'center',
@@ -18,6 +18,7 @@ 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,6 +21,12 @@ 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,16 +1,12 @@
 import { ReactNode } from 'react'
-import {
-  Box,
-  Navigation,
-  NavigationItem,
-  Icon,
-} from '@island.is/island-ui/core'
+import { Box, 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'
@@ -101,11 +97,10 @@ 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>
@@ -122,7 +117,7 @@ export const NarrowLayout = ({
       >
         <ContentBreadcrumbs />
         {isMobile && subNavItems && subNavItems.length > 0 && (
-          <Box paddingBottom={3} width="full">
+          <Box paddingBottom={3} width="full" className={styles.mobileNav}>
             <Navigation
               renderLink={(link, item) => {
                 return item?.href ? (
@@ -132,7 +127,7 @@ export const NarrowLayout = ({
                 )
               }}
               asSpan
-              baseId={'service-portal-mobile-navigation'}
+              baseId="service-portal-mobile-navigation"
               title={
                 activeParent?.name
                   ? formatMessage(activeParent?.name)

libs/portals/my-pages/core/src/components/Navigation/Navigation.css.ts

@@ -0,0 +1,212 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css'
+import { theme } from '@island.is/island-ui/theme'
+
+export const divider = style({
+  width: '100%',
+  height: 1,
+})
+
+export const largerClickableArea = style({
+  ':after': {
+    position: 'absolute',
+    display: 'inline-block',
+    cursor: 'pointer',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+    content: '""',
+    margin: -10,
+  },
+})
+
+export const root = style({
+  transition: 'background-color 150ms',
+})
+
+export const ul = style({
+  borderLeftWidth: 1,
+  borderLeftStyle: 'solid',
+  borderLeftColor: theme.color.transparent,
+})
+
+export const colorScheme = styleVariants({
+  blue: {},
+  purple: {},
+  darkBlue: {},
+})
+
+export const text = style({
+  position: 'relative',
+})
+
+export const textNarrower = style({
+  width: 'calc(100% - 34px)',
+})
+
+export const link = style({
+  position: 'relative',
+  ':hover': {
+    textDecoration: 'none',
+    cursor: 'pointer',
+  },
+})
+
+export const level = styleVariants({
+  1: {
+    padding: 0,
+  },
+  2: {
+    marginTop: theme.spacing[1],
+    marginBottom: theme.spacing[1],
+    marginLeft: theme.spacing[3],
+    marginRight: theme.spacing[3],
+  },
+})
+
+export const menuBtn = style({
+  width: '100%',
+  cursor: 'pointer',
+  outline: 'none',
+  borderRadius: 8,
+  padding: `${theme.spacing['p2']}px ${theme.spacing[2]}px`,
+  transition: 'box-shadow .25s, color .25s, background-color .25s',
+})
+
+export const listItem = style({
+  position: 'relative',
+})
+
+const translate = 'translateX(-50%) translateY(-50%)'
+
+export const icon = style({
+  position: 'absolute',
+  left: '50%',
+  top: '50%',
+  opacity: 1,
+  transform: `${translate} rotateZ(0deg)`,
+  transition: 'opacity 150ms ease, transform 300ms ease',
+})
+
+export const iconRemoveHidden = style({
+  opacity: 0,
+  transform: `${translate} rotateZ(-90deg)`,
+})
+
+export const iconRemoveVisible = style({
+  opacity: 1,
+  transform: `${translate} rotateZ(0deg)`,
+})
+
+export const iconAddHidden = style({
+  opacity: 0,
+  transform: `${translate} rotateZ(0deg)`,
+})
+
+export const iconAddVisible = style({
+  opacity: 1,
+  transform: `${translate} rotateZ(-0deg)`,
+})
+
+export const rotated = style({
+  transition: 'transform 300ms ease',
+})
+
+export const accordionIcon = style({
+  position: 'absolute',
+  display: 'inline-block',
+  lineHeight: 0,
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '50%',
+  top: 10,
+  right: 0,
+  width: 24,
+  height: 24,
+  outline: 0,
+})
+
+export const dropdownIcon = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 40,
+  width: 40,
+  borderRadius: '50%',
+})
+
+export const menuShadow = styleVariants({
+  blue: {
+    boxShadow: ' 0px 4px 30px rgba(0, 97, 255, 0.25)',
+  },
+  purple: {
+    boxShadow: ' 0px 4px 30px rgba(106, 46, 160, 0.25)',
+  },
+  darkBlue: {
+    boxShadow: ' 0px 4px 30px rgba(0, 0, 60, 0.25)',
+  },
+})
+
+export const transition = style({
+  opacity: 0,
+  transition: 'opacity 150ms ease-in-out',
+  selectors: {
+    '&[data-enter]': {
+      opacity: 1,
+    },
+  },
+})
+const stretchKeyframe = keyframes({
+  '0%': {
+    transform: 'scaleX(0)',
+  },
+  '100%': {
+    transform: 'scaleX(1)',
+  },
+})
+export const menuDialog = style({
+  '::before': {
+    content: '',
+    position: 'absolute',
+    top: 0,
+    bottom: -1,
+    zIndex: -1,
+    left: `-${theme.spacing[2]}px`,
+    right: `-${theme.spacing[2]}px`,
+    background: theme.color.blue100,
+    borderBottom: `1px solid ${theme.color.blue200}`,
+    animation: `${stretchKeyframe} 0.35s ease-in-out`,
+  },
+})
+
+export const mobileNav = style({
+  zIndex: 1500,
+  opacity: 1,
+  backgroundColor: theme.color.blue100,
+  height: '100%',
+})
+
+export const shakeKeyframe = keyframes({
+  from: {
+    transform: 'translateX(0)',
+  },
+  '25%': {
+    transform: 'translateX(-1px)',
+  },
+  '45%': {
+    transform: 'translateX(1px)',
+  },
+  '55%': {
+    transform: 'translateX(-1px)',
+  },
+  '75%': {
+    transform: 'translateX(1px)',
+  },
+  to: {
+    transform: 'translateX(0)',
+  },
+})
+
+export const shake = style({
+  animation: `${shakeKeyframe} 0.5s`,
+})