island-is · kodiakhq · Jan 7, 2022 · Nov 18, 2021 · Nov 18, 2021 · Nov 18, 2021
@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
 export const page = style({
+  position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   minHeight: '100vh',

@@ -3,7 +3,10 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import { Authenticator } from '@island.is/auth/react'
 import { ApolloProvider } from '@apollo/client'
 import { client } from '@island.is/service-portal/graphql'
-import { ServicePortalPath } from '@island.is/service-portal/core'
+import {
+  BadgeProvider,
+  ServicePortalPath,
+} from '@island.is/service-portal/core'
 import { LocaleProvider } from '@island.is/localization'
 import { defaultLanguage } from '@island.is/shared/constants'
 import { FeatureFlagProvider } from '@island.is/react/feature-flags'
@@ -33,17 +36,19 @@ export const App = () => {
                 <Authenticator>
                   <FeatureFlagProvider sdkKey={environment.featureFlagSdkKey}>
                     <UserProfileLocale />
-                    <Layout>
-                      <Switch>
-                        <Route exact path={ServicePortalPath.MinarSidurRoot}>
-                          <Dashboard />
-                        </Route>
-                        <Route>
-                          <Modules />
-                        </Route>
-                      </Switch>
-                      <GlobalModules />
-                    </Layout>
+                    <BadgeProvider>
+                      <Layout>
+                        <Switch>
+                          <Route exact path={ServicePortalPath.MinarSidurRoot}>
+                            <Dashboard />
+                          </Route>
+                          <Route>
+                            <Modules />
+                          </Route>
+                        </Switch>
+                        <GlobalModules />
+                      </Layout>
+                    </BadgeProvider>
                   </FeatureFlagProvider>
                 </Authenticator>
               </Router>

@@ -13,8 +13,6 @@ import { useQuery, gql } from '@apollo/client'
 import { Query } from '@island.is/api/schema'
 import { m } from '@island.is/service-portal/core'
 
-import * as styles from './Greeting.css'
-
 const NationalRegistryUserQuery = gql`
   query NationalRegistryUserQuery {
     nationalRegistryUser {
@@ -74,16 +72,31 @@ const Greeting: FC<{}> = () => {
           </Text>
           <Text marginBottom={2}>{formatMessage(m.greetingIntro)}</Text>
           <div>
-            <a href={LEGACY_MY_PAGES_URL} target="_blank">
-              <Button variant="text" icon="open" iconType="outline">
+            <a
+              href={LEGACY_MY_PAGES_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="text"
+                icon="open"
+                iconType="outline"
+                size="small"
+              >
                 {formatMessage(m.olderVersion)}
               </Button>
             </a>
           </div>
         </Box>
       </GridColumn>
       <GridColumn span={['12/12', '5/12']}>
-        <Box className={styles.figure} />
+        <img
+          src="./assets/images/school.svg"
+          alt={`${formatMessage(m.altText)} ${formatMessage({
+            defaultMessage: 'upphafssíðu',
+            id: 'service.portal:start-page',
+          })}`}
+        />
       </GridColumn>
     </GridRow>
   )

@@ -1,9 +1,7 @@
 import React, { FC } from 'react'
-import { Link } from 'react-router-dom'
 import {
   Box,
   Hidden,
-  ContentBlock,
   Button,
   Logo,
   FocusableBox,
@@ -16,6 +14,7 @@ import { useStore } from '../../store/stateProvider'
 import { ActionType } from '../../store/actions'
 import { BetaTag } from '../Logo/BetaTag'
 import { m } from '@island.is/service-portal/core'
+import { Link } from 'react-router-dom'
 
 export const Header: FC<{}> = () => {
   const { formatMessage } = useLocale()
@@ -32,42 +31,43 @@ export const Header: FC<{}> = () => {
       <div className={styles.placeholder} />
       <header className={styles.header}>
         <Box width="full">
-          <ContentBlock>
-            <Box
-              display="flex"
-              justifyContent="spaceBetween"
-              alignItems="center"
-              height="full"
-              background="white"
-              paddingX={[2, 2, 4, 4, 6]}
-            >
+          <Box
+            display="flex"
+            justifyContent={[
+              'spaceBetween',
+              'spaceBetween',
+              'spaceBetween',
+              'flexEnd',
+              'flexEnd',
+            ]}
+            alignItems="center"
+            width="full"
+            background="white"
+            paddingX={[3, 3, 3, 3, 6]}
+          >
+            <Hidden above="md">
               <Link to={ServicePortalPath.MinarSidurRoot}>
                 <FocusableBox component="div">
-                  <Hidden above="md">
-                    <Logo width={40} iconOnly />
-                  </Hidden>
-                  <Hidden below="lg">
-                    <Logo width={160} />
-                  </Hidden>
+                  <Logo width={40} iconOnly />
                   <BetaTag />
                 </FocusableBox>
               </Link>
-              <Box display="flex" alignItems="center" flexWrap="nowrap">
-                <UserMenu />
-                <Hidden above="md">
-                  <Box marginLeft={2}>
-                    <Button
-                      variant="utility"
-                      icon={mobileMenuState === 'open' ? 'close' : 'menu'}
-                      onClick={handleMobileMenuTriggerClick}
-                    >
-                      {formatMessage(m.menu)}
-                    </Button>
-                  </Box>
-                </Hidden>
-              </Box>
+            </Hidden>
+            <Box display="flex" alignItems="center" flexWrap="nowrap">
+              <UserMenu fullscreen />
+              <Hidden above="md">
+                <Box marginLeft={1}>
+                  <Button
+                    variant="utility"
+                    icon={mobileMenuState === 'open' ? 'close' : 'menu'}
+                    onClick={handleMobileMenuTriggerClick}
+                  >
+                    {formatMessage(m.menu)}
+                  </Button>
+                </Box>
+              </Hidden>
             </Box>
-          </ContentBlock>
+          </Box>
         </Box>
       </header>
     </>

@@ -6,6 +6,10 @@ export const layoutWrapper = style({
   minHeight: `calc(100vh - ${SERVICE_PORTAL_HEADER_HEIGHT_LG}px)`,
 })
 
+export const layoutGrid = style({
+  transition: 'margin 150ms ease-in-out, flex-basis 150ms ease-in-out',
+  willChange: 'margin, flex-basis',
+})
 export const mainWrapper = style({
   width: '100%',
   maxWidth: theme.contentWidth.large,

@@ -1,39 +1,34 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import Header from '../Header/Header'
 import Sidebar from '../Sidebar/Sidebar'
 import {
   Box,
-  Columns,
-  Column,
   Hidden,
-  Footer,
-  ContentBlock,
   ToastContainer,
+  GridContainer,
+  GridColumn,
+  GridRow,
 } from '@island.is/island-ui/core'
 import ContentBreadcrumbs from '../../components/ContentBreadcrumbs/ContentBreadcrumbs'
 import * as styles from './Layout.css'
 import AuthOverlay from '../Loaders/AuthOverlay/AuthOverlay'
 import useRoutes from '../../hooks/useRoutes/useRoutes'
 import { useModules } from '../../hooks/useModules/useModules'
-import { getFooterProps } from './footerProps'
 import { useScrollTopOnUpdate } from '@island.is/service-portal/core'
 import { useLocation } from 'react-router-dom'
 import MobileMenu from '../MobileMenu/MobileMenu'
-import { useFooterContent } from '@island.is/service-portal/graphql'
-import { useLocale, useNamespaces } from '@island.is/localization'
+import { useNamespaces } from '@island.is/localization'
 import { useStore } from '../../store/stateProvider'
 import { RemoveScroll } from 'react-remove-scroll'
+import { getLayout } from './helpers'
 
 const Layout: FC = ({ children }) => {
   useRoutes()
   useModules()
-  const { locale, formatMessage } = useLocale()
   useNamespaces('service.portal')
-  const data = useFooterContent(locale)
   const { pathname } = useLocation()
   useScrollTopOnUpdate([pathname])
-  const footerProps = getFooterProps(data, formatMessage)
-  const [{ mobileMenuState }] = useStore()
+  const [{ mobileMenuState, sidebarState }] = useStore()
 
   return (
     <>
@@ -46,27 +41,24 @@ const Layout: FC = ({ children }) => {
           <MobileMenu />
         </Hidden>
       </RemoveScroll>
-      <Box overflow="hidden" className={styles.layoutWrapper}>
-        <ContentBlock>
-          <Box paddingX={[2, 2, 4, 4, 6]} paddingY={[2, 2, 2, 7]}>
-            <Columns space={[0, 0, 0, 3, 5]} collapseBelow="lg">
-              <Column width="content">
-                <Hidden below="lg">
-                  <Sidebar />
-                </Hidden>
-              </Column>
-              <Column>
-                <Box as="main">
-                  <ContentBreadcrumbs />
-                  <div>{children}</div>
-                </Box>
-              </Column>
-            </Columns>
-          </Box>
-        </ContentBlock>
-        <Hidden print={true}>
-          <Footer {...footerProps} />
-        </Hidden>
+      <Hidden below="lg">
+        <Sidebar />
+      </Hidden>
+      <Box overflow="hidden" className={styles.layoutWrapper} paddingBottom={7}>
+        <Box as="main">
+          <GridContainer>
+            <GridRow>
+              <GridColumn
+                span={getLayout(pathname, sidebarState).span}
+                offset={getLayout(pathname, sidebarState).offset}
+                className={styles.layoutGrid}
+              >
+                <ContentBreadcrumbs />
+                <div>{children}</div>
+              </GridColumn>
+            </GridRow>
+          </GridContainer>
+        </Box>
       </Box>
     </>
   )

@@ -0,0 +1,66 @@
+import { GridColumns, ResponsiveProp } from '@island.is/island-ui/core/types'
+import { ServicePortalPath } from '@island.is/service-portal/core'
+import { MenuState } from '../../store/actions'
+
+type ColumnState = 'default' | 'wide' | 'defaultClosed' | 'wideClosed'
+type responsiveGridColumns = Record<
+  ColumnState,
+  {
+    span: ResponsiveProp<GridColumns>
+    offset: ResponsiveProp<GridColumns>
+  }
+>
+
+export const gridlayout: responsiveGridColumns = {
+  default: {
+    span: ['12/12', '12/12', '12/12', '8/12', '8/12'],
+    offset: ['0', '0', '0', '3/12', '3/12'],
+  },
+  wide: {
+    span: ['12/12', '12/12', '12/12', '8/12', '9/12'],
+    offset: ['0', '0', '0', '3/12', '2/12'],
+  },
+  defaultClosed: {
+    span: ['12/12', '12/12', '12/12', '9/12', '9/12'],
+    offset: ['0', '0', '0', '2/12', '2/12'],
+  },
+  wideClosed: {
+    span: ['12/12', '12/12', '12/12', '9/12', '10/12'],
+    offset: ['0', '0', '0', '2/12', '1/12'],
+  },
+}
+
+export const wideScreens = [
+  ServicePortalPath.FinanceRoot,
+  ServicePortalPath.FinanceStatus,
+  ServicePortalPath.FinanceTransactions,
+  ServicePortalPath.FinanceVehicles,
+  ServicePortalPath.FinanceBills,
+  ServicePortalPath.FinanceEmployeeClaims,
+  ServicePortalPath.FinanceExternal,
+  ServicePortalPath.FinanceLocalTax,
+  ServicePortalPath.FinancePayments,
+]
+
+export type GridLayout = {
+  span: ResponsiveProp<GridColumns>
+  offset: ResponsiveProp<GridColumns>
+}
+
+export const getLayout = (
+  pathname: string,
+  sidebarState: MenuState,
+): GridLayout => {
+  const hasWideLayout = wideScreens.includes(pathname as ServicePortalPath)
+  const sidebarCollapsed = sidebarState === 'closed'
+  type LayoutType = keyof typeof gridlayout
+  let layoutType: LayoutType
+
+  if (sidebarCollapsed) {
+    layoutType = hasWideLayout ? 'wideClosed' : 'defaultClosed'
+  } else {
+    layoutType = hasWideLayout ? 'wide' : 'default'
+  }
+
+  return gridlayout[layoutType]
+}