feat(service-portal): Tablet UI (#6184)

* feat: add sidebar menu state

* feat: sidebar fixed to left and
hover/active state for nav items

* refactor: heading and font sizes

* refactor: make button smaller on greeting link

* refactor: white background on mobile menu

* feat: add xs size to datePicker, Input and Select CORE

* feat: add sidebar as a variant option

* refactor: rearrange finance data

* refactor: add keywords to messages

* refactor: remove image from screens

* refactor: move school tag

* refactor: family screens

* refactor: use xs input in settings

* refactor: make headings smaller in settings

* refactor: put search input in grid

* refactor: move title for student assessment tables

* refactor: sidebar positioned absolute instead of fixed

* fix: undo removing image from access control

* feat: add fullScreen prop to UserDropdown

* fix: add logo back when on mobile

* refactor: toggle animation

* refactor: add transition to layout grid

* refactor: speed up layoutgrid transition time

* feat: new userMenu design

* refactor: add close on userMenu click

* fix: rollback changes on shared userMenu
add service portal userMenu instead

* feat: design changes to mobilemenu

* feat: add new general error screen

* refactor: more space for main content

* refactor: cleanup

* feat: add lock icon to disabled nav items

* feat: add graphql function to get unreadDocumentsCount WIP

* feat: badge for unread mail + lock screen

* refactor: make unread mail bold + smaller font

* fix: lint warnings

* refactor: cleanup

* fix: hide text on smaller screens on finance row

* refactor: more cleanup

* fix: build error on styleVariants

* fix: default value for unread documents

* fix: default value for unread documents counter

* fix: remove sidebar variant from text ui core lib

* refactor: image on greeting screen

* fix: bug after removing sidebar variant from text

* fix: add back button "back to my pages"

* fix: sidebar stopping on scroll

* fix: userMenu should not be part of grid

* fix: small logo disappearing when sidebar collapses

* feat: headingVariant prop added to island-ui core ActionCard

* refactor: assets overview

* fix: add bottom spacing to main content

* fix: remove header from assetsDetail

* refactor: smaller font for assetDisclaimer

* refactor: refactoring unused stuff

* refactor: cleanup grid in Layout

* fix: revert fixing lint warnings

* fix: remove activeIcon from masterNavigation

* fix: userMenu active state WIP

* fix: larger font on tables

* fix: smaller heading + intro text on petitions

* fix: hide family relation tags until fixed

* fix: broken test on UserMenu

* refactor: finance status screen

* refactor: move data fetch for userDelegations to parent

* fix: font weight on user info content

* refactor: make headings h3 and add xs size variant for input

* fix: build errors

* fix: undefined error on e2e test

* fix: temp removal of e2e test

* fix: removal of kennitala function

* fix: spacing on sidebar + removal of unused text

* refactor: sidebar nav items

* fix: uncomment e2e test bug

* fix: removal of company icon in user dropdown

* feat: add change lang button next to user menu

* fix: add max-content to arrow Link to prevent breaking

* fix: switch profile and actor names on user dropdown

* refactor: make font color darker in sidebar

* fix: wrong tag color on access denied

* feat: new collapsed sidebar

* feat: add lock icon to subnav + hide if parent is disabled

* fix: position of lock icons

* Minor fixes

* fix: subitems +1 pixel ....

* refactor: xs for Datepicker components

* refactor: xs for Input & InputController components

* refactor: xs for Select component

* refactor: add text medium and force styling on table

* feat: add missing tag variant mint

* feat: add stories for Action Card using small heading

* feat: add stories for input

* feat: add stories to Select

* feat: add stories for DatePicker

* refactor: cleanup

* refactor: test for switching languages

* fix: add scroll on userDelegations

* feat: add darkBlue color option for UserAvatar

* feat: add or edit alt on images

* refactor: remove {} wrapping when using string values

* refactor: grid layout in SP layout

* fix: hopefully fixing buggy hover on sidebar

* refactor: classnames usage

* fix: dry pattern on Layout helpers

* fix: remove unec classname use

* fix: wrong path for hourglass svg

* refactor: remove dry pattern in select return

* fix: subitems not closing menu on click

* fix: avatar color when delegation

* feat: add medium variant as button text option

* refactor: smaller font on search results

* fix: remove settings from sidebar

* feat: add path header to accessDenied

* refactor: temp change to make button smaller

* refactor: smaller text on access table

* fix: forgot to commit checkox changes

* refactor: input sizes on documents datepicker

* refactor: text changes

* refactor: smaller padding on mobile logo

* fix: delete endorsments like on main

* fix: back to SM input for access detail table

* fix: link not working outside service portal

* fix: remove table styling on access items

* fix: revert changes on grant access component

* fix: userMenu not responsive + other comments

* fix: base url for settings

* fix: remove temp data

* fix: layout

* fix: remove text on plus button for finance tables

* fix: put grid container back

* fix: sidebar animation

* fix: revert changes for small input

* fix: relative links on userDropdown

* feat: fixes after comment + dropdown lang for mobile

* refactor: cleanup on Layout helpers

* feat: add breadcrumbs for settings

* feat: ui changes on menu + userMenu on mobile

* fix: finance content going under on smaller screens

* fix: spacing on mobile menu

* fix: dont display collapsed state on mobilemenu

* fix: revert padding changes

* fix: fixing userMenu test

* fix: display heading as heading

* fix: revert adding mint variant on Tag

* fix: fixing menu bug

* refactor: layout

* fix: revert pushing mock data!

* fix: spacing should use theme

* fix: use translations for alt text

* fix: wrong usage of willChange

* fix: casing issue

* feat: changes on menu

* fix: wrong color on collapsed active item

* feat: add tablet layout changes

* fix: spacing on submenu

* fix: missing pixel

Co-authored-by: Ólafur Sverrir Kjartansson <[email protected]>
Co-authored-by: Þórður Hafliðason <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/service-portal/src/components/Header/Header.tsx

@@ -33,19 +33,13 @@ export const Header: FC<{}> = () => {
         <Box width="full">
           <Box
             display="flex"
-            justifyContent={[
-              'spaceBetween',
-              'spaceBetween',
-              'spaceBetween',
-              'flexEnd',
-              'flexEnd',
-            ]}
+            justifyContent={['spaceBetween', 'spaceBetween', 'flexEnd']}
             alignItems="center"
             width="full"
             background="white"
             paddingX={[3, 3, 3, 3, 6]}
           >
-            <Hidden above="md">
+            <Hidden above="sm">
               <Link to={ServicePortalPath.MinarSidurRoot}>
                 <FocusableBox component="div">
                   <Logo width={40} iconOnly />
@@ -55,7 +49,7 @@ export const Header: FC<{}> = () => {
             </Hidden>
             <Box display="flex" alignItems="center" flexWrap="nowrap">
               <UserMenu fullscreen />
-              <Hidden above="md">
+              <Hidden above="sm">
                 <Box marginLeft={1}>
                   <Button
                     variant="utility"

apps/service-portal/src/components/Layout/Layout.tsx

@@ -37,11 +37,11 @@ const Layout: FC = ({ children }) => {
       <Header />
       {/* // counter intuitive, the scroll blocks all scrolling aside from the component that is wrapped */}
       <RemoveScroll enabled={mobileMenuState === 'open'}>
-        <Hidden above="md">
+        <Hidden above="sm">
           <MobileMenu />
         </Hidden>
       </RemoveScroll>
-      <Hidden below="lg">
+      <Hidden below="md">
         <Sidebar />
       </Hidden>
       <Box overflow="hidden" className={styles.layoutWrapper} paddingBottom={7}>

apps/service-portal/src/components/Layout/helpers.ts

@@ -13,20 +13,20 @@ type responsiveGridColumns = Record<
 
 export const gridlayout: responsiveGridColumns = {
   default: {
-    span: ['12/12', '12/12', '12/12', '8/12', '8/12'],
-    offset: ['0', '0', '0', '3/12', '3/12'],
+    span: ['12/12', '12/12', '10/12', '8/12', '8/12'],
+    offset: ['0', '0', '2/12', '3/12', '3/12'],
   },
   wide: {
-    span: ['12/12', '12/12', '12/12', '8/12', '9/12'],
-    offset: ['0', '0', '0', '3/12', '2/12'],
+    span: ['12/12', '12/12', '10/12', '8/12', '9/12'],
+    offset: ['0', '0', '2/12', '3/12', '2/12'],
   },
   defaultClosed: {
-    span: ['12/12', '12/12', '12/12', '9/12', '9/12'],
-    offset: ['0', '0', '0', '2/12', '2/12'],
+    span: ['12/12', '12/12', '10/12', '9/12', '9/12'],
+    offset: ['0', '0', '2/12', '2/12', '2/12'],
   },
   wideClosed: {
-    span: ['12/12', '12/12', '12/12', '9/12', '10/12'],
-    offset: ['0', '0', '0', '2/12', '1/12'],
+    span: ['12/12', '12/12', '10/12', '9/12', '10/12'],
+    offset: ['0', '0', '2/12', '2/12', '1/12'],
   },
 }
 

apps/service-portal/src/components/Sidebar/NavItem/NavItem.css.ts

@@ -16,8 +16,13 @@ export const navItemActive = styleVariants({
     borderLeft: `4px solid ${theme.color.blue400}`,
     color: theme.color.blue400,
     ...themeUtils.responsiveStyle({
-      lg: {
+      md: {
         paddingLeft: theme.spacing[3],
+        ':hover': {
+          color: theme.color.blue400,
+          borderColor: theme.color.blue100,
+          textDecoration: 'none',
+        },
       },
     }),
   },
@@ -26,8 +31,14 @@ export const navItemActive = styleVariants({
     marginLeft: 4,
     color: theme.color.blue600,
     ...themeUtils.responsiveStyle({
-      lg: {
+      md: {
         paddingLeft: theme.spacing[3],
+        ':hover': {
+          backgroundColor: theme.color.blue100,
+          color: theme.color.blue400,
+          border: 'unset',
+          marginLeft: 4,
+        },
       },
     }),
   },
@@ -36,7 +47,7 @@ export const navItemActive = styleVariants({
     border: `1px solid ${theme.color.blue100}`,
     borderRadius: '8px',
     ...themeUtils.responsiveStyle({
-      lg: {
+      md: {
         color: theme.color.blue400,
         border: 'unset',
         paddingLeft: theme.spacing[1],
@@ -45,7 +56,7 @@ export const navItemActive = styleVariants({
   },
   inactiveCollapsed: {
     ...themeUtils.responsiveStyle({
-      lg: {
+      md: {
         color: theme.color.blue600,
         paddingLeft: theme.spacing[1],
       },

apps/service-portal/src/components/Sidebar/NavItem/NavItem.tsx

@@ -37,7 +37,7 @@ const NavItemContent: FC<Props> = ({
 }) => {
   const [{ sidebarState }] = useStore()
   const { width } = useWindowSize()
-  const isMobile = width < theme.breakpoints.lg
+  const isMobile = width < theme.breakpoints.md
   const collapsed = sidebarState === 'closed' && !isMobile
   const chevron = active ? 'chevronUp' : 'chevronDown'
   const showLock = enabled === false
@@ -84,7 +84,7 @@ const NavItemContent: FC<Props> = ({
         height="full"
         alignItems="center"
         overflow="hidden"
-        paddingX={[3, 3, 3, 0]}
+        paddingX={[3, 3, 0]}
       >
         {icon ? (
           <Box

apps/service-portal/src/components/Sidebar/Sidebar.css.ts

@@ -9,6 +9,7 @@ export const sidebar = style({
   height: '100%',
   marginBottom: theme.spacing['10'],
   borderRight: `1px solid ${theme.color.blue200}`,
+  background: theme.color.white,
   transition: 'all 250ms ease-in-out',
   width: 252,
 })
@@ -23,10 +24,8 @@ export const logoCollapsed = style({
 })
 
 export const subnav = style({
-  paddingTop: theme.spacing[2],
-  paddingBottom: theme.spacing[2],
   paddingLeft: theme.spacing[3],
-  marginLeft: theme.spacing[8],
+  marginLeft: theme.spacing[7],
   borderLeft: `1px solid ${theme.color.blue200}`,
   ...themeUtils.responsiveStyle({
     md: {

apps/service-portal/src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { Box, Stack, Logo, FocusableBox, Icon } from '@island.is/island-ui/core'
 import { BetaTag } from '../Logo/BetaTag'
 import { ActionType } from '../../store/actions'
@@ -10,13 +10,38 @@ import useNavigation from '../../hooks/useNavigation/useNavigation'
 import { useUpdateUnreadDocuments } from '@island.is/service-portal/core'
 import * as styles from './Sidebar.css'
 import cn from 'classnames'
+import { useWindowSize } from 'react-use'
+import { theme } from '@island.is/island-ui/theme'
 
 export const Sidebar: FC<{}> = () => {
   const navigation = useNavigation()
   const [{ sidebarState }, dispatch] = useStore()
   const [collapsed, setCollapsed] = useState(sidebarState === 'closed')
+  const { width } = useWindowSize()
+  const isTablet = width < theme.breakpoints.lg && width >= theme.breakpoints.md
+  const isMobile = width < theme.breakpoints.md
   const badgeContext = useUpdateUnreadDocuments()
 
+  useEffect(() => {
+    if (isTablet) {
+      dispatch({
+        type: ActionType.SetSidebarMenuState,
+        payload: 'closed',
+      })
+      setCollapsed(true)
+    }
+  }, [isTablet])
+
+  useEffect(() => {
+    if (isMobile) {
+      dispatch({
+        type: ActionType.SetSidebarMenuState,
+        payload: 'open',
+      })
+      setCollapsed(false)
+    }
+  }, [isMobile])
+
   return (
     <aside className={cn(styles.sidebar, collapsed && styles.collapsed)}>
       <Box