New navigation

src/codegen/Common.ts

@@ -692,15 +692,31 @@ const common = {
             'An attribute specifying when the application will save form data. onChangeFormData saves on every interaction with form elements. onChangePage saves on every page change.',
           ),
       ),
+      new CG.prop(
+        'taskNavigation',
+        new CG.arr(
+          new CG.union(
+            new CG.obj(
+              // TODO: Add tests checking that this gets added
+              new CG.prop('id', new CG.str()).omitInSchema(),
+              new CG.prop('name', new CG.str().optional()),
+              new CG.prop('taskId', new CG.str()),
+            ).exportAs('NavigationTask'),
+            new CG.obj(
+              // TODO: Add tests checking that this gets added
+              new CG.prop('id', new CG.str()).omitInSchema(),
+              new CG.prop('name', new CG.str().optional()),
+              new CG.prop('type', new CG.const('receipt')),
+            ).exportAs('NavigationReceipt'),
+          ).setUnionType('discriminated'),
+        )
+          .optional()
+          .setTitle('Task navigation settings')
+          .setDescription('Shows the listed tasks in the sidebar navigation menu'),
+      ),
     ),
   IPagesBaseSettings: () =>
     new CG.obj(
-      new CG.prop(
-        'order',
-        new CG.arr(new CG.str())
-          .setTitle('Page order')
-          .setDescription('List of pages in the order they should appear in the application'),
-      ),
       new CG.prop(
         'excludeFromPdf',
         new CG.arr(new CG.str())
@@ -718,7 +734,59 @@ const common = {
           ),
       ),
     ),
-  IPagesSettings: () => new CG.obj().extends(CG.common('GlobalPageSettings')).extends(CG.common('IPagesBaseSettings')),
+  INavigationBasePageGroup: () =>
+    new CG.obj(
+      // TODO: Add tests checking that this gets added
+      new CG.prop('id', new CG.str()).omitInSchema(),
+      new CG.prop('type', new CG.enum('default', 'info').optional({ default: 'default' })),
+      new CG.prop(
+        'markAsCompleted',
+        new CG.bool()
+          .optional({ default: false })
+          .setDescription('Whether this group should mark pages as completed when the user finishes'),
+      ),
+    ),
+  IPagesSettingsWithGroups: () =>
+    new CG.obj(
+      new CG.prop(
+        'groups',
+        new CG.arr(
+          new CG.union(
+            new CG.obj(
+              new CG.prop('name', new CG.str()),
+              new CG.prop('single', new CG.const(false).optional({ default: false })),
+              new CG.prop('order', new CG.arr(new CG.str()).setMinItems(1)),
+            )
+              .extends(CG.common('INavigationBasePageGroup'))
+              .exportAs('NavigationPageGroupMultiple'),
+            new CG.obj(
+              new CG.prop('single', new CG.const(true)),
+              new CG.prop('order', new CG.arr(new CG.str()).setMinItems(1).setMaxItems(1)),
+            )
+              .extends(CG.common('INavigationBasePageGroup'))
+              .exportAs('NavigationPageGroupSingle'),
+          )
+            .setUnionType('discriminated')
+            .exportAs('NavigationPageGroup'),
+        )
+          .setTitle('Page groups')
+          .setDescription('List of page groups in the order they should appear in the application'),
+      ),
+    ).extends(CG.common('GlobalPageSettings'), CG.common('IPagesBaseSettings')),
+
+  IPagesSettingsWithOrder: () =>
+    new CG.obj(
+      new CG.prop(
+        'order',
+        new CG.arr(new CG.str())
+          .setTitle('Page order')
+          .setDescription('List of pages in the order they should appear in the application'),
+      ),
+    ).extends(CG.common('GlobalPageSettings'), CG.common('IPagesBaseSettings')),
+  IPagesSettings: () =>
+    new CG.union(CG.common('IPagesSettingsWithOrder'), CG.common('IPagesSettingsWithGroups')).setUnionType(
+      'discriminated',
+    ),
   ILayoutSettings: () =>
     new CG.obj(
       new CG.prop('$schema', new CG.str().optional()),

src/components/AltinnAppHeader.module.css

@@ -1,16 +1,22 @@
-.appBarWrapper {
+.app-bar-wrapper {
   flex-grow: 1;
 }
 
-.appBarWrapper header {
-  box-shadow: none;
-}
-
-.default {
+.app-bar {
   background-color: transparent;
+  padding-top: 1.875rem;
+  margin-bottom: 2.25rem;
+  padding-left: 0;
+  padding-right: 0;
+  box-sizing: border-box;
+  min-height: 64px;
+  display: flex;
+  position: relative;
+  align-items: center;
 }
 
-.headerLink {
+.header-link {
+  display: inline;
   color: var(--fds-semantic-surface-action-default);
   font-size: 1.25rem;
   line-height: 1.5;
@@ -36,51 +42,18 @@
   }
 }
 
-.headerLinkList {
+.header-link-list {
   flex-grow: 1;
   list-style: none;
   margin: 0;
   padding: 0;
   float: left;
 }
 
-.headerLinkList li {
-  display: inline;
-}
-
-.headerProfile {
-  float: right;
-}
-
-.languageDropdown {
-  font-size: 0.875rem;
-}
-
 .logo {
   margin-right: 0.75rem;
 }
 
-.partyIcon {
+.party-icon {
   margin-left: 5px;
 }
-
-.toolbarContainer {
-  padding-top: 1.875rem;
-  margin-bottom: 2.25rem;
-  padding-left: 0;
-  padding-right: 0;
-  box-sizing: border-box;
-}
-
-.toolbarContainer .a-personSwitcher {
-  margin-top: 0;
-  margin-left: 1.5rem;
-}
-
-.gridStyle {
-  flex-grow: 1;
-}
-
-.spanStyle {
-  margin-bottom: 10px;
-}

src/components/altinnAppHeader.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { AppBar, Toolbar } from '@material-ui/core';
 import { Buildings3Icon, PersonIcon } from '@navikt/aksel-icons';
 
 import { Flex } from 'src/app-components/Flex/Flex';
@@ -10,7 +9,7 @@ import { LandmarkShortcuts } from 'src/components/LandmarkShortcuts';
 import { AltinnLogo, LogoColor } from 'src/components/logo/AltinnLogo';
 import { Lang } from 'src/features/language/Lang';
 import { renderParty } from 'src/utils/party';
-import { returnUrlToAllSchemas, returnUrlToMessagebox, returnUrlToProfile } from 'src/utils/urls/urlHelper';
+import { returnUrlToAllForms, returnUrlToMessagebox, returnUrlToProfile } from 'src/utils/urls/urlHelper';
 import type { IProfile } from 'src/types/shared';
 
 export interface IHeaderProps {
@@ -33,66 +32,61 @@ export const AltinnAppHeader = ({ profile }: IHeaderProps) => {
           },
         ]}
       />
-      <AppBar
-        position='static'
-        className={classes.default}
-      >
-        <Toolbar className={classes.toolbarContainer}>
-          <Flex
-            item
-            className={classes.logo}
+      <header className={classes.appBar}>
+        <Flex
+          item
+          className={classes.logo}
+        >
+          <AltinnLogo color={LogoColor.blueDark} />
+        </Flex>
+        {party && (
+          <ul className={classes.headerLinkList}>
+            <li className={classes.headerLink}>
+              <a
+                className='altinnLink'
+                href={returnUrlToMessagebox(window.location.host, party?.partyId)}
+              >
+                <Lang id='instantiate.inbox' />
+              </a>
+            </li>
+            <li className={classes.headerLink}>
+              <a
+                className='altinnLink'
+                href={returnUrlToAllForms(window.location.host)}
+              >
+                <Lang id='instantiate.all_forms' />
+              </a>
+            </li>
+            <li className={classes.headerLink}>
+              <a
+                className='altinnLink'
+                href={returnUrlToProfile(window.location.host, party?.partyId)}
+              >
+                <Lang id='instantiate.profile' />
+              </a>
+            </li>
+          </ul>
+        )}
+        {party && (
+          <CircleIcon
+            size='1.5rem'
+            className={classes.partyIcon}
+            title={renderParty(profile) || ''}
           >
-            <AltinnLogo color={LogoColor.blueDark} />
-          </Flex>
-          {party && (
-            <ul className={classes.headerLinkList}>
-              <li className={classes.headerLink}>
-                <a
-                  className='altinnLink'
-                  href={returnUrlToMessagebox(window.location.origin, party?.partyId) || '#'}
-                >
-                  <Lang id='instantiate.inbox' />
-                </a>
-              </li>
-              <li className={classes.headerLink}>
-                <a
-                  className='altinnLink'
-                  href={returnUrlToAllSchemas(window.location.origin) || '#'}
-                >
-                  <Lang id='instantiate.all_forms' />
-                </a>
-              </li>
-              <li className={classes.headerLink}>
-                <a
-                  className='altinnLink'
-                  href={returnUrlToProfile(window.location.origin, party?.partyId) || '#'}
-                >
-                  <Lang id='instantiate.profile' />
-                </a>
-              </li>
-            </ul>
-          )}
-          {party && (
-            <CircleIcon
-              size='1.5rem'
-              className={classes.partyIcon}
-              title={renderParty(profile) || ''}
-            >
-              {party.orgNumber ? (
-                <Buildings3Icon
-                  color='white'
-                  aria-hidden='true'
-                />
-              ) : (
-                <PersonIcon
-                  color='white'
-                  aria-hidden='true'
-                />
-              )}
-            </CircleIcon>
-          )}
-        </Toolbar>
-      </AppBar>
+            {party.orgNumber ? (
+              <Buildings3Icon
+                color='white'
+                aria-hidden='true'
+              />
+            ) : (
+              <PersonIcon
+                color='white'
+                aria-hidden='true'
+              />
+            )}
+          </CircleIcon>
+        )}
+      </header>
     </div>
   );
 };

src/components/organisms/AltinnAppHeader.module.css

@@ -1,13 +1,3 @@
-.appBar {
-  box-shadow: none;
-  z-index: 800;
-}
-
-.appBarText {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
 .container {
   width: 100%;
   display: flex;
@@ -34,3 +24,14 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+.partyName {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .partyName {
+    display: none;
+  }
+}