Create a unique header

[mlqn]

Description

We currently use two different components for the header (Header.tsx and AltinnHeader.tsx) which leads to visual inconsistencies (e.g different heights, padding, shadow, logo size, menu components, etc).

I suggest merging these two headers into a single, customizable header. This header should be responsive and should work on small screens. We should also consider making it work for unauthenticated users.

We should also replace the <div> tag with the right semantic tag <header>.

Dashboard

dashboard and resourceadm uses Header.tsx

Editor

editor (app-development) and preview uses AltinnHeader.tsx

Additional Information

No response

Tasks

No response

Acceptance Criterias

No response

[nkylstad]

Agreed. The header used on dashboard is the old header, we should implement the new one for dashboard (and anywhere else it is not being used), and make any necessary adjustments.

[nkylstad]

Fixing this should also close https://github.com/Altinn/altinn-studio/issues/12122

Can we move the new header component from app-shared to @studio/components? Check if there are any MUI components/references that can be removed, can we remove the MUI reference entirely some places?

[wrt95]

Make header like this when screen is small:

The Hamburger menu looks like this when clicked:

[wrt95]

The newest picture of how it should look when expanded:

[mlqn]

Will the new header also fix these issues?

• https://github.com/Altinn/altinn-studio/issues/7704
• https://github.com/Altinn/altinn-studio/issues/11334
• https://github.com/Altinn/altinn-studio/issues/11798

[wrt95]

Will the new header also fix these issues?

• Responsive dashboard with long org-names #7704
• dropdown-menus go over header #11334
• Making headers responsive #11798

7704 - Yes 😄

11334 - Yes 😄

https://github.com/user-attachments/assets/cb591c9a-20ee-4804-98db-8beea251948c

11798 - Yes 😄