From b8a7a8e376265dc5b47031647440ab77b34e497e Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 6 Feb 2025 14:49:08 +0100
Subject: [PATCH 01/23] Add submenu

---
 src/components/Common/HeaderNav.tsx | 60 ++++++++++++++++++++++++++++-
 src/styles/_Header.scss             | 10 +++++
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index 88ee72ae7..f95b0757d 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -10,6 +10,7 @@ import { NavLink } from "react-router-dom";
 
 // export for use in tests
 export const activeClassName = "active";
+type ButtonKey = "identity" | "security" | "account";
 
 export interface HeaderNavProps {
   handleLogout: () => void;
@@ -67,8 +68,20 @@ function useCloseMenuClickOutside(ref: React.RefObject<HTMLElement>, handler: ()
 
 export function HeaderNav(props: HeaderNavProps): JSX.Element {
   const [openMenu, setOpenMenu] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<{ [key in ButtonKey]: boolean }>({
+    identity: false,
+    security: false,
+    account: false,
+  });
   const wrapperRef = useRef(null);
 
+  const toggleOpen = (button: ButtonKey) => {
+    setIsOpen((prevState) => ({
+      ...prevState,
+      [button]: !prevState[button],
+    }));
+  };
+
   useCloseMenuClickOutside(wrapperRef, () => setOpenMenu(false));
   return (
     <nav className="header-nav" ref={wrapperRef}>
@@ -92,7 +105,19 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           >
             <FormattedMessage defaultMessage="Identity" description="Dashboard nav tab name" />
           </NavLink>
-
+          <button onClick={() => toggleOpen("identity")}>
+            {isOpen.identity ? (
+              <FontAwesomeIcon icon={faChevronUp as IconProp} />
+            ) : (
+              <FontAwesomeIcon icon={faChevronDown as IconProp} />
+            )}
+          </button>
+          <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
+            <ul>
+              <li> Verify Identity</li>
+              <li>Names & Display Name</li>
+            </ul>
+          </div>
           <NavLink
             onClick={() => setOpenMenu(false)}
             className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -101,6 +126,20 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
             <FormattedMessage defaultMessage="Security" description="Dashboard nav tab name" />
           </NavLink>
 
+          <button onClick={() => toggleOpen("security")}>
+            {isOpen.security ? (
+              <FontAwesomeIcon icon={faChevronUp as IconProp} />
+            ) : (
+              <FontAwesomeIcon icon={faChevronDown as IconProp} />
+            )}
+          </button>
+          <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
+            <ul>
+              <li>Two-factor Authentication (2FA)</li>
+              <li>Manage your security keys</li>
+            </ul>
+          </div>
+
           <NavLink
             onClick={() => setOpenMenu(false)}
             className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -108,7 +147,24 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           >
             <FormattedMessage defaultMessage="Account" description="Dashboard nav tab name" />
           </NavLink>
-
+          <button onClick={() => toggleOpen("account")}>
+            {isOpen.account ? (
+              <FontAwesomeIcon icon={faChevronUp as IconProp} />
+            ) : (
+              <FontAwesomeIcon icon={faChevronDown as IconProp} />
+            )}
+          </button>
+          <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
+            <ul>
+              <li>Unique ID</li>
+              <li>Email addresses</li>
+              <li>Language</li>
+              <li>Change password</li>
+              <li>ORCID account</li>
+              <li>ESI information</li>
+              <li>Delete eduID</li>
+            </ul>
+          </div>
           <EduIDButton
             buttonstyle="link"
             size="sm"
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 43f2578b2..295075e3e 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -22,6 +22,16 @@ header {
   }
 
   .header-nav {
+    // sub menu
+    .panel-collapse {
+      max-height: 500px;
+      overflow: hidden;
+      transition: max-height 0.2s ease;
+    }
+    .panel-close {
+      max-height: 0;
+    }
+
     button {
       @media (max-width: $bp-sm) {
         span {

From 7b7da226f1cfbe560d064ff4456dd0599c45b2aa Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 6 Feb 2025 16:13:31 +0100
Subject: [PATCH 02/23] Add marign-left for submenu

---
 src/styles/_Header.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 295075e3e..6377adc67 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -27,6 +27,7 @@ header {
       max-height: 500px;
       overflow: hidden;
       transition: max-height 0.2s ease;
+      margin-left: 1rem;
     }
     .panel-close {
       max-height: 0;

From e5f1aae21cf15e17d3b706bc723a80713f04aecd Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 6 Feb 2025 16:14:22 +0100
Subject: [PATCH 03/23] add navlink

---
 src/components/Common/HeaderNav.tsx | 194 +++++++++++++++++++---------
 1 file changed, 131 insertions(+), 63 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index f95b0757d..c44c07853 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -10,7 +10,7 @@ import { NavLink } from "react-router-dom";
 
 // export for use in tests
 export const activeClassName = "active";
-type ButtonKey = "identity" | "security" | "account";
+type ButtonKey = "start" | "identity" | "security" | "account";
 
 export interface HeaderNavProps {
   handleLogout: () => void;
@@ -69,6 +69,7 @@ function useCloseMenuClickOutside(ref: React.RefObject<HTMLElement>, handler: ()
 export function HeaderNav(props: HeaderNavProps): JSX.Element {
   const [openMenu, setOpenMenu] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<{ [key in ButtonKey]: boolean }>({
+    start: false,
     identity: false,
     security: false,
     account: false,
@@ -89,80 +90,147 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
         <EduIDButton buttonstyle="close" size="sm" onClick={() => setOpenMenu(false)}></EduIDButton>
         <ul>
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={START_PATH}
-            end
-          >
-            <FormattedMessage defaultMessage="Start" description="Dashboard nav tab name" />
-          </NavLink>
+          <div className="flex-between">
+            <NavLink
+              onClick={() => setOpenMenu(false)}
+              className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
+              to={START_PATH}
+              end
+            >
+              <FormattedMessage defaultMessage="Start" description="Dashboard nav tab name" />
+            </NavLink>
+            <button onClick={() => toggleOpen("start")}>
+              {isOpen.start ? (
+                <FontAwesomeIcon icon={faChevronUp as IconProp} />
+              ) : (
+                <FontAwesomeIcon icon={faChevronDown as IconProp} />
+              )}
+            </button>
+          </div>
+          <div className={isOpen.start ? "panel-collapse" : "panel-collapse panel-close"}>
+            <ul>
+              <li>
+                <NavLink to={START_PATH}>
+                  <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
+                </NavLink>
+              </li>
+            </ul>
+          </div>
 
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={IDENTITY_PATH}
-          >
-            <FormattedMessage defaultMessage="Identity" description="Dashboard nav tab name" />
-          </NavLink>
-          <button onClick={() => toggleOpen("identity")}>
-            {isOpen.identity ? (
-              <FontAwesomeIcon icon={faChevronUp as IconProp} />
-            ) : (
-              <FontAwesomeIcon icon={faChevronDown as IconProp} />
-            )}
-          </button>
+          <div className="flex-between">
+            <NavLink
+              onClick={() => setOpenMenu(false)}
+              className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
+              to={IDENTITY_PATH}
+            >
+              <FormattedMessage defaultMessage="Identity" description="Dashboard nav tab name" />
+            </NavLink>
+            <button onClick={() => toggleOpen("identity")}>
+              {isOpen.identity ? (
+                <FontAwesomeIcon icon={faChevronUp as IconProp} />
+              ) : (
+                <FontAwesomeIcon icon={faChevronDown as IconProp} />
+              )}
+            </button>
+          </div>
           <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
-              <li> Verify Identity</li>
-              <li>Names & Display Name</li>
+              <li>
+                <NavLink to={IDENTITY_PATH}>
+                  <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={IDENTITY_PATH}>
+                  <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
+                </NavLink>
+              </li>
             </ul>
           </div>
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={SECURITY_PATH}
-          >
-            <FormattedMessage defaultMessage="Security" description="Dashboard nav tab name" />
-          </NavLink>
+          <div className="flex-between">
+            <NavLink
+              onClick={() => setOpenMenu(false)}
+              className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
+              to={SECURITY_PATH}
+            >
+              <FormattedMessage defaultMessage="Security" description="Dashboard nav tab name" />
+            </NavLink>
 
-          <button onClick={() => toggleOpen("security")}>
-            {isOpen.security ? (
-              <FontAwesomeIcon icon={faChevronUp as IconProp} />
-            ) : (
-              <FontAwesomeIcon icon={faChevronDown as IconProp} />
-            )}
-          </button>
+            <button onClick={() => toggleOpen("security")}>
+              {isOpen.security ? (
+                <FontAwesomeIcon icon={faChevronUp as IconProp} />
+              ) : (
+                <FontAwesomeIcon icon={faChevronDown as IconProp} />
+              )}
+            </button>
+          </div>
           <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
-              <li>Two-factor Authentication (2FA)</li>
-              <li>Manage your security keys</li>
+              <li>
+                <NavLink to={SECURITY_PATH}>
+                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={SECURITY_PATH}>
+                  <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
+                </NavLink>
+              </li>
             </ul>
           </div>
-
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={ACCOUNT_PATH}
-          >
-            <FormattedMessage defaultMessage="Account" description="Dashboard nav tab name" />
-          </NavLink>
-          <button onClick={() => toggleOpen("account")}>
-            {isOpen.account ? (
-              <FontAwesomeIcon icon={faChevronUp as IconProp} />
-            ) : (
-              <FontAwesomeIcon icon={faChevronDown as IconProp} />
-            )}
-          </button>
+          <div className="flex-between">
+            <NavLink
+              onClick={() => setOpenMenu(false)}
+              className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
+              to={ACCOUNT_PATH}
+            >
+              <FormattedMessage defaultMessage="Account" description="Dashboard nav tab name" />
+            </NavLink>
+            <button onClick={() => toggleOpen("account")}>
+              {isOpen.account ? (
+                <FontAwesomeIcon icon={faChevronUp as IconProp} />
+              ) : (
+                <FontAwesomeIcon icon={faChevronDown as IconProp} />
+              )}
+            </button>
+          </div>
           <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
-              <li>Unique ID</li>
-              <li>Email addresses</li>
-              <li>Language</li>
-              <li>Change password</li>
-              <li>ORCID account</li>
-              <li>ESI information</li>
-              <li>Delete eduID</li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Language" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
+                </NavLink>
+              </li>
+              <li>
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
+                </NavLink>
+              </li>
             </ul>
           </div>
           <EduIDButton

From 1825101df345d18d1ee3ed5b6017b108ae9b0954 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 7 Feb 2025 10:36:11 +0100
Subject: [PATCH 04/23] Adjust background color for menu hover

---
 src/styles/_Header.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 6377adc67..1285cd7a9 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -80,6 +80,20 @@ header {
 
       ul {
         text-align: left;
+
+        .flex-between {
+          padding-left: 10px;
+
+          button {
+            background-color: transparent;
+            box-shadow: none;
+          }
+        }
+
+        .flex-between:hover {
+          background-color: $body-gray;
+          border-radius: 15px;
+        }
       }
 
       .btn-close {
@@ -112,7 +126,7 @@ header {
         height: 2.7rem;
         justify-content: left;
         line-height: 1.2;
-        width: 100%;
+        // width: 100%;
 
         &:nth-child(4) {
           border-bottom: 1px solid $border-gray;

From eef9ac250177389c52548eb4ccc5a267ddb25cd6 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Mon, 10 Feb 2025 09:55:35 +0100
Subject: [PATCH 05/23] add li last child margin bottom

---
 src/styles/_Header.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 1285cd7a9..558761c49 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -27,7 +27,15 @@ header {
       max-height: 500px;
       overflow: hidden;
       transition: max-height 0.2s ease;
-      margin-left: 1rem;
+      margin-left: 1.3rem;
+
+      li {
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+      li:last-child {
+        margin-bottom: 1.5rem;
+      }
     }
     .panel-close {
       max-height: 0;

From d36c96e04e12ce276c71f0fd90e788b1af5a4e5a Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Mon, 10 Feb 2025 16:45:34 +0100
Subject: [PATCH 06/23] Remove submenu link

---
 src/components/Common/HeaderNav.tsx | 70 ++++++++++-------------------
 src/styles/_Header.scss             | 16 ++++---
 2 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index c44c07853..c969c7008 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -110,9 +110,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.start ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={START_PATH}>
-                  <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
               </li>
             </ul>
           </div>
@@ -136,14 +134,10 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={IDENTITY_PATH}>
-                  <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
               </li>
               <li>
-                <NavLink to={IDENTITY_PATH}>
-                  <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
               </li>
             </ul>
           </div>
@@ -167,14 +161,10 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={SECURITY_PATH}>
-                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
               </li>
               <li>
-                <NavLink to={SECURITY_PATH}>
-                  <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
               </li>
             </ul>
           </div>
@@ -197,52 +187,40 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="Language" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Language" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
-                  <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
-                </NavLink>
+                <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
               </li>
             </ul>
           </div>
-          <EduIDButton
-            buttonstyle="link"
-            size="sm"
-            id="logout"
-            onClick={props.handleLogout}
-            disabled={!props.login_url}
-          >
-            <FontAwesomeIcon icon={faArrowRightFromBracket as IconProp} />
-            <FormattedMessage defaultMessage="Log out" description="Header logout" />
-          </EduIDButton>
+          <div className="logout-button-wrapper">
+            <EduIDButton
+              buttonstyle="link"
+              size="sm"
+              id="logout"
+              onClick={props.handleLogout}
+              disabled={!props.login_url}
+            >
+              <FontAwesomeIcon icon={faArrowRightFromBracket as IconProp} />
+              <FormattedMessage defaultMessage="Log out" description="Header logout" />
+            </EduIDButton>
+          </div>
         </ul>
       </div>
     </nav>
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 558761c49..c23d9b850 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -32,9 +32,8 @@ header {
       li {
         padding-top: 5px;
         padding-bottom: 5px;
-      }
-      li:last-child {
-        margin-bottom: 1.5rem;
+        font-family: $akkurat;
+        color: $txt-gray;
       }
     }
     .panel-close {
@@ -91,6 +90,8 @@ header {
 
         .flex-between {
           padding-left: 10px;
+          margin-top: 3px;
+          margin-bottom: 3px;
 
           button {
             background-color: transparent;
@@ -100,7 +101,7 @@ header {
 
         .flex-between:hover {
           background-color: $body-gray;
-          border-radius: 15px;
+          border-radius: 25px;
         }
       }
 
@@ -121,6 +122,7 @@ header {
         border-radius: 10px;
         padding: 20px;
         right: 20px;
+        max-width: 20rem;
 
         .btn-link svg {
           padding-right: 5px;
@@ -134,12 +136,16 @@ header {
         height: 2.7rem;
         justify-content: left;
         line-height: 1.2;
-        // width: 100%;
 
         &:nth-child(4) {
           border-bottom: 1px solid $border-gray;
         }
       }
+      .logout-button-wrapper {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid $border-gray;
+      }
     }
   }
 }

From 92265fc4ccc9863b7cf2b4ab6f93e65d56726ad3 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Wed, 12 Feb 2025 14:53:39 +0100
Subject: [PATCH 07/23] Adjust padding, margin in header

---
 src/styles/_Header.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index c23d9b850..6c69dce1c 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -30,8 +30,9 @@ header {
       margin-left: 1.3rem;
 
       li {
-        padding-top: 5px;
-        padding-bottom: 5px;
+        font-size: 0.9rem;
+        padding-top: 3px;
+        padding-bottom: 3px;
         font-family: $akkurat;
         color: $txt-gray;
       }
@@ -101,12 +102,13 @@ header {
 
         .flex-between:hover {
           background-color: $body-gray;
-          border-radius: 25px;
+          border-radius: 20px;
         }
       }
 
       .btn-close {
         align-self: flex-end;
+        margin-bottom: 1rem;
       }
 
       &.active {
@@ -142,8 +144,8 @@ header {
         }
       }
       .logout-button-wrapper {
-        margin-top: 1rem;
-        padding-top: 1rem;
+        margin: 0.5rem 0 0 10px;
+        padding-top: 0.5rem;
         border-top: 1px solid $border-gray;
       }
     }

From fd90ab30dd0fd32b6307a19513034f9d29d87a43 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Wed, 12 Feb 2025 15:34:16 +0100
Subject: [PATCH 08/23] Set links for the submenus

---
 src/components/Common/HeaderNav.tsx | 48 +++++++++++++++++++++--------
 src/styles/_Header.scss             | 21 +++++++++----
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index c969c7008..b3dbd75b3 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -110,7 +110,9 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.start ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
+                <NavLink to={START_PATH} end>
+                  <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
+                </NavLink>
               </li>
             </ul>
           </div>
@@ -134,10 +136,14 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
+                <NavLink to={IDENTITY_PATH}>
+                  <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
+                <NavLink to={IDENTITY_PATH}>
+                  <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
+                </NavLink>
               </li>
             </ul>
           </div>
@@ -161,10 +167,14 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
+                <NavLink to={SECURITY_PATH}>
+                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
+                <NavLink to={SECURITY_PATH}>
+                  <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
+                </NavLink>
               </li>
             </ul>
           </div>
@@ -187,25 +197,39 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Language" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Language" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
+                </NavLink>
               </li>
               <li>
-                <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
+                <NavLink to={ACCOUNT_PATH}>
+                  <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
+                </NavLink>
               </li>
             </ul>
           </div>
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 6c69dce1c..0c258a25b 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -29,13 +29,22 @@ header {
       transition: max-height 0.2s ease;
       margin-left: 1.3rem;
 
-      li {
-        font-size: 0.9rem;
-        padding-top: 3px;
-        padding-bottom: 3px;
-        font-family: $akkurat;
-        color: $txt-gray;
+      ul {
+        a {
+          font-size: 0.9rem;
+          padding-top: 3px;
+          padding-bottom: 3px;
+          color: $txt-gray;
+        }
       }
+
+      // li {
+      //   font-size: 0.9rem;
+      //   padding-top: 3px;
+      //   padding-bottom: 3px;
+      //   font-family: $akkurat;
+      //   color: $txt-gray;
+      // }
     }
     .panel-close {
       max-height: 0;

From 46cbbc2571cdf61358a0d8935bfb901c399808fe Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Wed, 12 Feb 2025 15:49:24 +0100
Subject: [PATCH 09/23] Add an onclick function to close the nav menu when the
 user selects an option

---
 src/components/Common/HeaderNav.tsx           | 29 +++++++++++--------
 .../Dashboard/PersonalDataParent.tsx          |  2 +-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index b3dbd75b3..bc06e5597 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -7,6 +7,7 @@ import { useAppSelector } from "eduid-hooks";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
+import { NavHashLink } from "react-router-hash-link";
 
 // export for use in tests
 export const activeClassName = "active";
@@ -136,14 +137,18 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={IDENTITY_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={IDENTITY_PATH}>
                   <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={IDENTITY_PATH}>
+                <NavHashLink
+                  onClick={() => setOpenMenu(false)}
+                  to={`${IDENTITY_PATH}#personal-data`}
+                  aria-label="go to manage your security key section"
+                >
                   <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
             </ul>
           </div>
@@ -167,12 +172,12 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={SECURITY_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={SECURITY_PATH}>
                   <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={SECURITY_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={SECURITY_PATH}>
                   <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
                 </NavLink>
               </li>
@@ -197,37 +202,37 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
             <ul>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="Language" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
                 </NavLink>
               </li>
               <li>
-                <NavLink to={ACCOUNT_PATH}>
+                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
                   <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
                 </NavLink>
               </li>
diff --git a/src/components/Dashboard/PersonalDataParent.tsx b/src/components/Dashboard/PersonalDataParent.tsx
index 00940e3d3..35deeed8a 100644
--- a/src/components/Dashboard/PersonalDataParent.tsx
+++ b/src/components/Dashboard/PersonalDataParent.tsx
@@ -114,7 +114,7 @@ function PersonalDataParent() {
   };
 
   return (
-    <article className="personal-data">
+    <article className="personal-data" id="personal-data">
       <div className="heading">
         <h2>
           <FormattedMessage description="pd main title" defaultMessage={`Names & Display Name`} />

From 5bac6a9b94cb77d06df34c8d30d786f51d8fdd38 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 13 Feb 2025 11:04:21 +0100
Subject: [PATCH 10/23] Add an ID to articles to link it from the submenu click

---
 src/components/Common/HeaderNav.tsx           | 52 +++++++++----------
 .../Common/MultiFactorAuthentication.tsx      |  2 +-
 src/components/Dashboard/AccountId.tsx        |  2 +-
 src/components/Dashboard/AccountLinking.tsx   |  2 +-
 .../Dashboard/ChangePasswordDisplay.tsx       |  2 +-
 src/components/Dashboard/DeleteAccount.tsx    |  2 +-
 src/components/Dashboard/Emails.tsx           |  2 +-
 src/components/Dashboard/Identity.tsx         |  2 +-
 src/components/Dashboard/Ladok.tsx            |  2 +-
 src/components/Dashboard/Language.tsx         |  2 +-
 src/components/Dashboard/Recommendations.tsx  |  2 +-
 src/styles/_Header.scss                       |  4 +-
 12 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index bc06e5597..f698aeb66 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -108,12 +108,12 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               )}
             </button>
           </div>
-          <div className={isOpen.start ? "panel-collapse" : "panel-collapse panel-close"}>
+          <div className={isOpen.start ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavLink to={START_PATH} end>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`} end>
                   <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
             </ul>
           </div>
@@ -134,12 +134,12 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               )}
             </button>
           </div>
-          <div className={isOpen.identity ? "panel-collapse" : "panel-collapse panel-close"}>
+          <div className={isOpen.identity ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={IDENTITY_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${IDENTITY_PATH}#verify-identity`}>
                   <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
                 <NavHashLink
@@ -169,17 +169,17 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               )}
             </button>
           </div>
-          <div className={isOpen.security ? "panel-collapse" : "panel-collapse panel-close"}>
+          <div className={isOpen.security ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={SECURITY_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
                   <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={SECURITY_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#manage-security-keys`}>
                   <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
             </ul>
           </div>
@@ -199,42 +199,42 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               )}
             </button>
           </div>
-          <div className={isOpen.account ? "panel-collapse" : "panel-collapse panel-close"}>
+          <div className={isOpen.account ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
                   <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#add-email-addresses`}>
                   <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#language`}>
                   <FormattedMessage defaultMessage="Language" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#change-password`}>
                   <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#orcid`}>
                   <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#ladok`}>
                   <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
               <li>
-                <NavLink onClick={() => setOpenMenu(false)} to={ACCOUNT_PATH}>
+                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#delete-account`}>
                   <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
-                </NavLink>
+                </NavHashLink>
               </li>
             </ul>
           </div>
diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
index 3df3a6c70..66af027ab 100644
--- a/src/components/Common/MultiFactorAuthentication.tsx
+++ b/src/components/Common/MultiFactorAuthentication.tsx
@@ -246,7 +246,7 @@ export function MultiFactorAuthentication(): React.ReactElement | null {
   if (!isPlatformAuthLoaded) return null;
   return (
     <>
-      <article>
+      <article id="add-two-factor">
         <h2>
           <FormattedMessage description="security key title" defaultMessage="Two-factor Authentication (2FA)" />
         </h2>
diff --git a/src/components/Dashboard/AccountId.tsx b/src/components/Dashboard/AccountId.tsx
index 52b3f1744..c9da200ba 100644
--- a/src/components/Dashboard/AccountId.tsx
+++ b/src/components/Dashboard/AccountId.tsx
@@ -24,7 +24,7 @@ export function AccountId(): JSX.Element {
 
 export function AccountIdDisplay(): JSX.Element {
   return (
-    <article>
+    <article id="unique-id">
       <h2>
         <FormattedMessage defaultMessage="Unique ID" description="Dashboard AccountId" />
       </h2>
diff --git a/src/components/Dashboard/AccountLinking.tsx b/src/components/Dashboard/AccountLinking.tsx
index b4361381c..f5186a1f5 100644
--- a/src/components/Dashboard/AccountLinking.tsx
+++ b/src/components/Dashboard/AccountLinking.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 
 export function AccountLinking() {
   return (
-    <article>
+    <article id="orcid">
       <h2>
         <FormattedMessage defaultMessage="ORCID account" description="Dashboard AccountLinking" />
       </h2>
diff --git a/src/components/Dashboard/ChangePasswordDisplay.tsx b/src/components/Dashboard/ChangePasswordDisplay.tsx
index c7c54a15b..87c0ad843 100644
--- a/src/components/Dashboard/ChangePasswordDisplay.tsx
+++ b/src/components/Dashboard/ChangePasswordDisplay.tsx
@@ -16,7 +16,7 @@ function ChangePasswordDisplay() {
     }
   }
   return (
-    <article>
+    <article id="change-password">
       <h2>
         <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
       </h2>
diff --git a/src/components/Dashboard/DeleteAccount.tsx b/src/components/Dashboard/DeleteAccount.tsx
index ca0da1c5d..20ab39c08 100644
--- a/src/components/Dashboard/DeleteAccount.tsx
+++ b/src/components/Dashboard/DeleteAccount.tsx
@@ -18,7 +18,7 @@ export default function DeleteAccount(): JSX.Element | null {
   }
 
   return (
-    <article>
+    <article id="delete-account">
       <h2>
         <FormattedMessage defaultMessage="Delete eduID" description="DeleteAccount" />
       </h2>
diff --git a/src/components/Dashboard/Emails.tsx b/src/components/Dashboard/Emails.tsx
index 857c36377..16cf72504 100644
--- a/src/components/Dashboard/Emails.tsx
+++ b/src/components/Dashboard/Emails.tsx
@@ -109,7 +109,7 @@ function Emails() {
   }
 
   return (
-    <article>
+    <article id="add-email-addresses">
       <h2>
         <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
       </h2>
diff --git a/src/components/Dashboard/Identity.tsx b/src/components/Dashboard/Identity.tsx
index 80d7534d9..7f6ce3efa 100644
--- a/src/components/Dashboard/Identity.tsx
+++ b/src/components/Dashboard/Identity.tsx
@@ -108,7 +108,7 @@ function IdentityContent(): JSX.Element {
         </div>
       </section>
 
-      <article>
+      <article id="verify-identity">
         {identities?.is_verified ? (
           <React.Fragment>
             <h2>
diff --git a/src/components/Dashboard/Ladok.tsx b/src/components/Dashboard/Ladok.tsx
index 4f0800850..fa43047af 100644
--- a/src/components/Dashboard/Ladok.tsx
+++ b/src/components/Dashboard/Ladok.tsx
@@ -29,7 +29,7 @@ const LadokContainer = (): JSX.Element => {
   useEffect(() => setSwitchChecked(isLinked), [isLinked]);
 
   return (
-    <article className="ladok">
+    <article className="ladok" id="ladok">
       <h2>
         <FormattedMessage defaultMessage="Ladok information" description="Ladok account linking" />
       </h2>
diff --git a/src/components/Dashboard/Language.tsx b/src/components/Dashboard/Language.tsx
index e662b7517..9ed78e116 100644
--- a/src/components/Dashboard/Language.tsx
+++ b/src/components/Dashboard/Language.tsx
@@ -36,7 +36,7 @@ export function LanguagePreference() {
   }
 
   return (
-    <article>
+    <article id="language">
       <h2>
         <FormattedMessage description="pd main title" defaultMessage={`Language`} />
       </h2>
diff --git a/src/components/Dashboard/Recommendations.tsx b/src/components/Dashboard/Recommendations.tsx
index ce2d5878a..cce23e7a6 100644
--- a/src/components/Dashboard/Recommendations.tsx
+++ b/src/components/Dashboard/Recommendations.tsx
@@ -197,7 +197,7 @@ export function Recommendations(): JSX.Element | null {
   }
 
   return (
-    <article>
+    <article id="status-overview">
       <h2>
         <FormattedMessage description="status overview title" defaultMessage="eduID status overview" />
       </h2>
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 0c258a25b..0c44c89bd 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -23,7 +23,7 @@ header {
 
   .header-nav {
     // sub menu
-    .panel-collapse {
+    .submenu-collapse {
       max-height: 500px;
       overflow: hidden;
       transition: max-height 0.2s ease;
@@ -46,7 +46,7 @@ header {
       //   color: $txt-gray;
       // }
     }
-    .panel-close {
+    .submenu-close {
       max-height: 0;
     }
 

From 3e5f2feca7bdaefb031f9e649fcc0f8ac597c2d7 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 13 Feb 2025 11:23:56 +0100
Subject: [PATCH 11/23] Add title for close button

---
 src/components/Common/HeaderNav.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index f698aeb66..1292efa19 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -5,7 +5,7 @@ import EduIDButton from "components/Common/EduIDButton";
 import { ACCOUNT_PATH, IDENTITY_PATH, SECURITY_PATH, START_PATH } from "components/IndexMain";
 import { useAppSelector } from "eduid-hooks";
 import React, { useEffect, useRef, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { NavHashLink } from "react-router-hash-link";
 
@@ -76,6 +76,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
     account: false,
   });
   const wrapperRef = useRef(null);
+  const intl = useIntl();
 
   const toggleOpen = (button: ButtonKey) => {
     setIsOpen((prevState) => ({
@@ -89,7 +90,15 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
     <nav className="header-nav" ref={wrapperRef}>
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
-        <EduIDButton buttonstyle="close" size="sm" onClick={() => setOpenMenu(false)}></EduIDButton>
+        <EduIDButton
+          title={intl.formatMessage({
+            id: "Close",
+            defaultMessage: "Close",
+          })}
+          buttonstyle="close"
+          size="sm"
+          onClick={() => setOpenMenu(false)}
+        ></EduIDButton>
         <ul>
           <div className="flex-between">
             <NavLink

From 77f369479ff89882915bf0404472ff6c57d8622a Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 13 Feb 2025 13:20:32 +0100
Subject: [PATCH 12/23] extract messages

---
 src/translation/extractedMessages.json | 51 ++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/translation/extractedMessages.json b/src/translation/extractedMessages.json
index 64aa6c5b3..71adb7c77 100644
--- a/src/translation/extractedMessages.json
+++ b/src/translation/extractedMessages.json
@@ -131,6 +131,10 @@
     "developer_comment": "security eduid - list item 3-1",
     "string": "the descriptive name given by you when created"
   },
+  "10CjiE": {
+    "developer_comment": "Identity sub menu",
+    "string": "Names & Display Name"
+  },
   "12hWj7": {
     "developer_comment": "ErrorURL authentication failure",
     "string": "You may need to confirm your identity in the eduID Dashboard before trying again."
@@ -322,6 +326,10 @@
     "developer_comment": "security eduid - paragraph",
     "string": "Note: You can read more about security keys in the help section \"Enhancing the security level of eduID\"."
   },
+  "5H6C2O": {
+    "developer_comment": "Account sub menu",
+    "string": "Language"
+  },
   "5YRJfk": {
     "developer_comment": "accordion item eidas additional info",
     "string": "With eIDAS electronic identification"
@@ -449,6 +457,10 @@
     "developer_comment": "Change password set new password success lead",
     "string": "You have successfully updated your password. Make sure to store your password securely for future use."
   },
+  "8HcZ0r": {
+    "developer_comment": "Start sub menu",
+    "string": "eduID status overview"
+  },
   "8J/qPq": {
     "developer_comment": "about assurance levels - handle",
     "string": "Assurance levels"
@@ -617,6 +629,13 @@
     "developer_comment": "Security keys list - paragraph",
     "string": "This is a list of names of maker and models of external security keys that kan be used for eduID at present:"
   },
+  "CWZl1q": {
+    "developer_comment": "Account sub menu",
+    "string": "ORCID account"
+  },
+  "Close": {
+    "string": "Close"
+  },
   "Cnpo0l": {
     "developer_comment": "profile username display title",
     "string": "Username"
@@ -1071,6 +1090,14 @@
     "developer_comment": "delete.confirm_button",
     "string": "Confirm"
   },
+  "NmJs6W": {
+    "developer_comment": "Security sub menu",
+    "string": "Manage your security keys"
+  },
+  "NsZ2wz": {
+    "developer_comment": "Security sub menu",
+    "string": "Two-factor Authentication (2FA)"
+  },
   "NuVGSk": {
     "developer_comment": "column eduID identifier label",
     "string": "eduID identifier"
@@ -1404,6 +1431,10 @@
     "developer_comment": "security verified",
     "string": "verified"
   },
+  "VBiKJw": {
+    "developer_comment": "Account sub menu",
+    "string": "Delete eduID"
+  },
   "VLu1fI": {
     "developer_comment": "Use other device",
     "string": "The request is not valid anymore"
@@ -1476,6 +1507,10 @@
     "developer_comment": "login eduid - security key list item 1",
     "string": "Press the \"Use my security key\" button and follow the instructions, which will vary depending on your key."
   },
+  "WogNGU": {
+    "developer_comment": "Identity sub menu",
+    "string": "Verify Identity"
+  },
   "WtORfS": {
     "developer_comment": "status overview paragraph1",
     "string": "The strength and usage of your eduID can be improved by following the steps listed below."
@@ -2033,6 +2068,10 @@
     "developer_comment": "how add security key - heading",
     "string": "How do I implement 2FA with eduID?"
   },
+  "fIkbOL": {
+    "developer_comment": "Account sub menu",
+    "string": "Email addresses"
+  },
   "fpAB2E": {
     "developer_comment": "generic error page",
     "string": "Return to home"
@@ -2123,6 +2162,10 @@
     "developer_comment": "Header logout",
     "string": "Log out"
   },
+  "hbZaQQ": {
+    "developer_comment": "Account sub menu",
+    "string": "Change password"
+  },
   "hc40Q5": {
     "developer_comment": "Generated password - lead",
     "string": "A strong password has been generated for you. To proceed you will need to copy the password in to the Repeat new password field and click the Save button to store it for future use."
@@ -2523,6 +2566,10 @@
     "developer_comment": "Notification modal close label",
     "string": "Close"
   },
+  "n/EMF1": {
+    "developer_comment": "Account sub menu",
+    "string": "ESI information"
+  },
   "n0mqo6": {
     "developer_comment": "DeleteAccount",
     "string": "Delete eduID"
@@ -2539,6 +2586,10 @@
     "developer_comment": "what is eidas - paragraph",
     "string": "eIDAS is a federation of EU countries providing electronic identification to allow access to public authority systems for EU citizens, using their country's electronic ID."
   },
+  "nC6VRn": {
+    "developer_comment": "Account sub menu",
+    "string": "Unique ID"
+  },
   "nCc6tZ": {
     "developer_comment": "BankID vetting button",
     "string": "with a BankID"

From 658356c66b3482740e3b8e975fb50cf6b220c458 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Thu, 13 Feb 2025 13:27:32 +0100
Subject: [PATCH 13/23] add padding left for a larger click area

---
 src/styles/_Header.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 0c44c89bd..a429fc937 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -106,6 +106,7 @@ header {
           button {
             background-color: transparent;
             box-shadow: none;
+            padding-left: 10px;
           }
         }
 

From 708295219d32a77ef91e83dbc0680cd1a2c51a9f Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 14 Feb 2025 10:44:27 +0100
Subject: [PATCH 14/23] Add a scrollbar to the nav header

---
 src/components/Common/HeaderNav.tsx | 20 +++++++++++---------
 src/styles/_Header.scss             | 12 ++++++++++++
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index 1292efa19..6c71ca5ce 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -90,16 +90,18 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
     <nav className="header-nav" ref={wrapperRef}>
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
-        <EduIDButton
-          title={intl.formatMessage({
-            id: "Close",
-            defaultMessage: "Close",
-          })}
-          buttonstyle="close"
-          size="sm"
-          onClick={() => setOpenMenu(false)}
-        ></EduIDButton>
         <ul>
+          <div className="close-button-wrapper">
+            <EduIDButton
+              title={intl.formatMessage({
+                id: "Close",
+                defaultMessage: "Close",
+              })}
+              buttonstyle="close"
+              size="sm"
+              onClick={() => setOpenMenu(false)}
+            ></EduIDButton>
+          </div>
           <div className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index a429fc937..66d3976e2 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -38,6 +38,11 @@ header {
         }
       }
 
+      .close-button-wrapper {
+        display: flex;
+        justify-content: flex-end;
+      }
+
       // li {
       //   font-size: 0.9rem;
       //   padding-top: 3px;
@@ -135,10 +140,17 @@ header {
         padding: 20px;
         right: 20px;
         max-width: 20rem;
+        overflow-y: auto;
+        max-height: 80vh;
 
         .btn-link svg {
           padding-right: 5px;
         }
+
+        .close-button-wrapper {
+          display: flex;
+          justify-content: flex-end;
+        }
       }
 
       //menu item

From 43ec3caddcfc0cb26ef496032d3269cc6ec2ed08 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 14 Feb 2025 11:04:17 +0100
Subject: [PATCH 15/23] Reuse formatted text that already exists

---
 src/components/Common/HeaderNav.tsx           | 24 +++----
 src/components/Dashboard/Ladok.tsx            |  2 +-
 src/components/Dashboard/Language.tsx         |  2 +-
 .../Dashboard/PersonalDataParent.tsx          |  2 +-
 src/translation/extractedMessages.json        | 72 ++++---------------
 5 files changed, 27 insertions(+), 75 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index 6c71ca5ce..8c71c77b6 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -123,7 +123,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`} end>
-                  <FormattedMessage defaultMessage="eduID status overview" description="Start sub menu" />
+                  <FormattedMessage defaultMessage="eduID status overview" description="status overview title" />
                 </NavHashLink>
               </li>
             </ul>
@@ -158,7 +158,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                   to={`${IDENTITY_PATH}#personal-data`}
                   aria-label="go to manage your security key section"
                 >
-                  <FormattedMessage defaultMessage="Names & Display Name" description="Identity sub menu" />
+                  <FormattedMessage description="Names & Display Name" defaultMessage={`Names & Display Name`} />
                 </NavHashLink>
               </li>
             </ul>
@@ -169,7 +169,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
               to={SECURITY_PATH}
             >
-              <FormattedMessage defaultMessage="Security" description="Dashboard nav tab name" />
+              <FormattedMessage defaultMessage="Security" description="security main title" />
             </NavLink>
 
             <button onClick={() => toggleOpen("security")}>
@@ -184,12 +184,12 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
-                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="Security sub menu" />
+                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="security key title" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#manage-security-keys`}>
-                  <FormattedMessage defaultMessage="Manage your security keys" description="Security sub menu" />
+                  <FormattedMessage defaultMessage="Manage your security keys" description="manage your tokens" />
                 </NavHashLink>
               </li>
             </ul>
@@ -214,37 +214,37 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
-                  <FormattedMessage defaultMessage="Unique ID" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="Unique ID" description="Dashboard AccountId" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#add-email-addresses`}>
-                  <FormattedMessage defaultMessage="Email addresses" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#language`}>
-                  <FormattedMessage defaultMessage="Language" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="Language" description="Language" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#change-password`}>
-                  <FormattedMessage defaultMessage="Change password" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#orcid`}>
-                  <FormattedMessage defaultMessage="ORCID account" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="ORCID account" description="Dashboard AccountLinking" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#ladok`}>
-                  <FormattedMessage defaultMessage="ESI information" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="ESI information" description="Ladok account linking" />
                 </NavHashLink>
               </li>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#delete-account`}>
-                  <FormattedMessage defaultMessage="Delete eduID" description="Account sub menu" />
+                  <FormattedMessage defaultMessage="Delete eduID" description="DeleteAccount" />
                 </NavHashLink>
               </li>
             </ul>
diff --git a/src/components/Dashboard/Ladok.tsx b/src/components/Dashboard/Ladok.tsx
index fa43047af..a1243064b 100644
--- a/src/components/Dashboard/Ladok.tsx
+++ b/src/components/Dashboard/Ladok.tsx
@@ -31,7 +31,7 @@ const LadokContainer = (): JSX.Element => {
   return (
     <article className="ladok" id="ladok">
       <h2>
-        <FormattedMessage defaultMessage="Ladok information" description="Ladok account linking" />
+        <FormattedMessage defaultMessage="ESI information" description="Ladok account linking" />
       </h2>
 
       <p>
diff --git a/src/components/Dashboard/Language.tsx b/src/components/Dashboard/Language.tsx
index 9ed78e116..ed1f30212 100644
--- a/src/components/Dashboard/Language.tsx
+++ b/src/components/Dashboard/Language.tsx
@@ -58,7 +58,7 @@ export function LanguagePreference() {
               <fieldset className="name-inputs">
                 <article>
                   <legend className="require">
-                    <FormattedMessage defaultMessage="Language" description="Language radio group legend" />
+                    <FormattedMessage defaultMessage="Language" description="Language" />
                   </legend>
                   <div className="radio-input-container">
                     {language_list.map((option: string[]) => {
diff --git a/src/components/Dashboard/PersonalDataParent.tsx b/src/components/Dashboard/PersonalDataParent.tsx
index 35deeed8a..9e486f7ff 100644
--- a/src/components/Dashboard/PersonalDataParent.tsx
+++ b/src/components/Dashboard/PersonalDataParent.tsx
@@ -117,7 +117,7 @@ function PersonalDataParent() {
     <article className="personal-data" id="personal-data">
       <div className="heading">
         <h2>
-          <FormattedMessage description="pd main title" defaultMessage={`Names & Display Name`} />
+          <FormattedMessage description="Names & Display Name" defaultMessage={`Names & Display Name`} />
         </h2>
         <RenderEditButton hasPersonalData={hasPersonalData} setEditMode={setEditMode} isEditMode={isEditMode} />
       </div>
diff --git a/src/translation/extractedMessages.json b/src/translation/extractedMessages.json
index 71adb7c77..f57bcd3d6 100644
--- a/src/translation/extractedMessages.json
+++ b/src/translation/extractedMessages.json
@@ -131,10 +131,6 @@
     "developer_comment": "security eduid - list item 3-1",
     "string": "the descriptive name given by you when created"
   },
-  "10CjiE": {
-    "developer_comment": "Identity sub menu",
-    "string": "Names & Display Name"
-  },
   "12hWj7": {
     "developer_comment": "ErrorURL authentication failure",
     "string": "You may need to confirm your identity in the eduID Dashboard before trying again."
@@ -326,10 +322,6 @@
     "developer_comment": "security eduid - paragraph",
     "string": "Note: You can read more about security keys in the help section \"Enhancing the security level of eduID\"."
   },
-  "5H6C2O": {
-    "developer_comment": "Account sub menu",
-    "string": "Language"
-  },
   "5YRJfk": {
     "developer_comment": "accordion item eidas additional info",
     "string": "With eIDAS electronic identification"
@@ -457,10 +449,6 @@
     "developer_comment": "Change password set new password success lead",
     "string": "You have successfully updated your password. Make sure to store your password securely for future use."
   },
-  "8HcZ0r": {
-    "developer_comment": "Start sub menu",
-    "string": "eduID status overview"
-  },
   "8J/qPq": {
     "developer_comment": "about assurance levels - handle",
     "string": "Assurance levels"
@@ -629,10 +617,6 @@
     "developer_comment": "Security keys list - paragraph",
     "string": "This is a list of names of maker and models of external security keys that kan be used for eduID at present:"
   },
-  "CWZl1q": {
-    "developer_comment": "Account sub menu",
-    "string": "ORCID account"
-  },
   "Close": {
     "string": "Close"
   },
@@ -1018,6 +1002,10 @@
     "developer_comment": "platform authn device help text",
     "string": "The device you are currently using"
   },
+  "MGhoaU": {
+    "developer_comment": "Language",
+    "string": "Language"
+  },
   "Mcx0Ut": {
     "developer_comment": "what is accessibility report - paragraph 2",
     "string": "It is of outmost importance to us that as many as possible are able to use the service in a convenient and safe manner and is one of the many ways eduID is always striving to improve."
@@ -1090,14 +1078,6 @@
     "developer_comment": "delete.confirm_button",
     "string": "Confirm"
   },
-  "NmJs6W": {
-    "developer_comment": "Security sub menu",
-    "string": "Manage your security keys"
-  },
-  "NsZ2wz": {
-    "developer_comment": "Security sub menu",
-    "string": "Two-factor Authentication (2FA)"
-  },
   "NuVGSk": {
     "developer_comment": "column eduID identifier label",
     "string": "eduID identifier"
@@ -1431,10 +1411,6 @@
     "developer_comment": "security verified",
     "string": "verified"
   },
-  "VBiKJw": {
-    "developer_comment": "Account sub menu",
-    "string": "Delete eduID"
-  },
   "VLu1fI": {
     "developer_comment": "Use other device",
     "string": "The request is not valid anymore"
@@ -1475,6 +1451,10 @@
     "developer_comment": "eidas proofing help text",
     "string": "To use this option you will need to first create a digital ID in the {freja_eid_link} app."
   },
+  "VweyRk": {
+    "developer_comment": "Ladok account linking",
+    "string": "ESI information"
+  },
   "W0anmW": {
     "developer_comment": "account eduid - list item 3-3",
     "string": "If you are using a passkey for your login, don't save it on the same key chain as your password."
@@ -1671,6 +1651,10 @@
     "developer_comment": "what is bankid - paragraph",
     "string": "BankID is a widely used electronic verification system, available to holders of a Swedish personal identification number, an approved Swedish ID document (e.g. passport, drivers license or ID card) and connected to a bank in Sweden."
   },
+  "aXZyf1": {
+    "developer_comment": "Names & Display Name",
+    "string": "Names & Display Name"
+  },
   "actions.action-completed": {
     "string": "Success"
   },
@@ -2068,10 +2052,6 @@
     "developer_comment": "how add security key - heading",
     "string": "How do I implement 2FA with eduID?"
   },
-  "fIkbOL": {
-    "developer_comment": "Account sub menu",
-    "string": "Email addresses"
-  },
   "fpAB2E": {
     "developer_comment": "generic error page",
     "string": "Return to home"
@@ -2162,10 +2142,6 @@
     "developer_comment": "Header logout",
     "string": "Log out"
   },
-  "hbZaQQ": {
-    "developer_comment": "Account sub menu",
-    "string": "Change password"
-  },
   "hc40Q5": {
     "developer_comment": "Generated password - lead",
     "string": "A strong password has been generated for you. To proceed you will need to copy the password in to the Repeat new password field and click the Save button to store it for future use."
@@ -2566,10 +2542,6 @@
     "developer_comment": "Notification modal close label",
     "string": "Close"
   },
-  "n/EMF1": {
-    "developer_comment": "Account sub menu",
-    "string": "ESI information"
-  },
   "n0mqo6": {
     "developer_comment": "DeleteAccount",
     "string": "Delete eduID"
@@ -2586,10 +2558,6 @@
     "developer_comment": "what is eidas - paragraph",
     "string": "eIDAS is a federation of EU countries providing electronic identification to allow access to public authority systems for EU citizens, using their country's electronic ID."
   },
-  "nC6VRn": {
-    "developer_comment": "Account sub menu",
-    "string": "Unique ID"
-  },
   "nCc6tZ": {
     "developer_comment": "BankID vetting button",
     "string": "with a BankID"
@@ -2874,10 +2842,6 @@
     "developer_comment": "Login username input",
     "string": "Welcome back, {username}!"
   },
-  "qIGw46": {
-    "developer_comment": "pd main title",
-    "string": "Names & Display Name"
-  },
   "qJmOW9": {
     "developer_comment": "explanation text for letter proofing",
     "string": "When you have received the letter, proceed by clicking the button below."
@@ -2933,10 +2897,6 @@
     "developer_comment": "Assurance levels with your eduID - paragraph7",
     "string": "Note: this is a generalization and could change, complete information as to what is required of your eduID must be provided by the connecting services."
   },
-  "rT3vhi": {
-    "developer_comment": "Dashboard nav tab name",
-    "string": "Security"
-  },
   "rdd33t": {
     "developer_comment": "what is international - paragraph 1",
     "string": "Freja is an eID based on an identity verification platform using biometric passports, combined with the users mobile device to create a verified digital identity than can be used remotely."
@@ -3181,10 +3141,6 @@
     "developer_comment": "settings eduid - list item 2-1",
     "string": "To change the default language for eduID you can log in to eduID and select your preference using the Language radio buttons under Account."
   },
-  "t2g4sA": {
-    "developer_comment": "Ladok account linking",
-    "string": "Ladok information"
-  },
   "tAcT/R": {
     "string": "BankID"
   },
@@ -3346,10 +3302,6 @@
     "developer_comment": "SAML login finished",
     "string": "You can try to login again using the button below, but it is very likely that the service you are logging in to will reject the request and you will have to start over."
   },
-  "x6V8oh": {
-    "developer_comment": "Language radio group legend",
-    "string": "Language"
-  },
   "x8ZGkQ": {
     "developer_comment": "Assurance levels with your eduID - paragraph2em",
     "string": "AL1 (unconfirmed user) / RAF Low"

From 03bf926ff7a607913abd671c1eb6181486021602 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 14 Feb 2025 11:18:41 +0100
Subject: [PATCH 16/23] Remove commented out code

---
 src/styles/_Header.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 66d3976e2..199e39c58 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -42,14 +42,6 @@ header {
         display: flex;
         justify-content: flex-end;
       }
-
-      // li {
-      //   font-size: 0.9rem;
-      //   padding-top: 3px;
-      //   padding-bottom: 3px;
-      //   font-family: $akkurat;
-      //   color: $txt-gray;
-      // }
     }
     .submenu-close {
       max-height: 0;

From 62173c1031cf977ff9249005a86368b26b350a05 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 14 Feb 2025 14:41:29 +0100
Subject: [PATCH 17/23] chvron up/down -> hamburger and close icon

---
 src/components/Common/HeaderNav.tsx | 25 ++++++++-----------------
 src/styles/_Header.scss             | 14 ++++----------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index 8c71c77b6..d4f905024 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -1,5 +1,11 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { faArrowRightFromBracket, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowRightFromBracket,
+  faBars,
+  faChevronDown,
+  faChevronUp,
+  faXmark,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import EduIDButton from "components/Common/EduIDButton";
 import { ACCOUNT_PATH, IDENTITY_PATH, SECURITY_PATH, START_PATH } from "components/IndexMain";
@@ -39,11 +45,7 @@ function RenderUserName(props: RenderUserNameProps): JSX.Element | null {
       data-name={emails.filter((mail) => mail.primary)[0].email}
     >
       <span>{emails.filter((mail) => mail.primary)[0].email}</span>
-      {props.openMenu ? (
-        <FontAwesomeIcon icon={faChevronUp as IconProp} />
-      ) : (
-        <FontAwesomeIcon icon={faChevronDown as IconProp} />
-      )}
+      {props.openMenu ? <FontAwesomeIcon icon={faXmark as IconProp} /> : <FontAwesomeIcon icon={faBars as IconProp} />}
     </button>
   );
 }
@@ -91,17 +93,6 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
         <ul>
-          <div className="close-button-wrapper">
-            <EduIDButton
-              title={intl.formatMessage({
-                id: "Close",
-                defaultMessage: "Close",
-              })}
-              buttonstyle="close"
-              size="sm"
-              onClick={() => setOpenMenu(false)}
-            ></EduIDButton>
-          </div>
           <div className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 199e39c58..0808a47ca 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -37,11 +37,6 @@ header {
           color: $txt-gray;
         }
       }
-
-      .close-button-wrapper {
-        display: flex;
-        justify-content: flex-end;
-      }
     }
     .submenu-close {
       max-height: 0;
@@ -82,9 +77,13 @@ header {
       background: none;
       box-shadow: none;
       padding: 0 1.125rem;
+      display: flex;
+      align-items: center;
 
       svg {
         padding-left: 0.75rem;
+        width: 20px;
+        width: 30px;
       }
     }
 
@@ -138,11 +137,6 @@ header {
         .btn-link svg {
           padding-right: 5px;
         }
-
-        .close-button-wrapper {
-          display: flex;
-          justify-content: flex-end;
-        }
       }
 
       //menu item

From 891dbce15fd5e5fb5b1f454646b69f3e0dc5fdaa Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Fri, 14 Feb 2025 15:03:30 +0100
Subject: [PATCH 18/23] Remove the list hover effect, add a background color
 for the active list, and adjust the paddings

---
 src/components/Common/HeaderNav.tsx | 36 ++++++++++++++---------------
 src/styles/_Header.scss             | 33 +++++++++++++++-----------
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index d4f905024..6b42c0d49 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -93,7 +93,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <div className={openMenu ? "nav-menu active" : "nav-menu"}>
         <ul>
-          <div className="flex-between">
+          <li className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
               className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -109,8 +109,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 <FontAwesomeIcon icon={faChevronDown as IconProp} />
               )}
             </button>
-          </div>
-          <div className={isOpen.start ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+          </li>
+          <li className={isOpen.start ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`} end>
@@ -118,9 +118,9 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 </NavHashLink>
               </li>
             </ul>
-          </div>
+          </li>
 
-          <div className="flex-between">
+          <li className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
               className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -135,8 +135,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 <FontAwesomeIcon icon={faChevronDown as IconProp} />
               )}
             </button>
-          </div>
-          <div className={isOpen.identity ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+          </li>
+          <li className={isOpen.identity ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${IDENTITY_PATH}#verify-identity`}>
@@ -153,8 +153,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 </NavHashLink>
               </li>
             </ul>
-          </div>
-          <div className="flex-between">
+          </li>
+          <li className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
               className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -170,8 +170,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 <FontAwesomeIcon icon={faChevronDown as IconProp} />
               )}
             </button>
-          </div>
-          <div className={isOpen.security ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+          </li>
+          <li className={isOpen.security ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
@@ -184,8 +184,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 </NavHashLink>
               </li>
             </ul>
-          </div>
-          <div className="flex-between">
+          </li>
+          <li className="flex-between">
             <NavLink
               onClick={() => setOpenMenu(false)}
               className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
@@ -200,8 +200,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 <FontAwesomeIcon icon={faChevronDown as IconProp} />
               )}
             </button>
-          </div>
-          <div className={isOpen.account ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+          </li>
+          <li className={isOpen.account ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
                 <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
@@ -239,8 +239,8 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
                 </NavHashLink>
               </li>
             </ul>
-          </div>
-          <div className="logout-button-wrapper">
+          </li>
+          <li className="logout-button-wrapper">
             <EduIDButton
               buttonstyle="link"
               size="sm"
@@ -251,7 +251,7 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
               <FontAwesomeIcon icon={faArrowRightFromBracket as IconProp} />
               <FormattedMessage defaultMessage="Log out" description="Header logout" />
             </EduIDButton>
-          </div>
+          </li>
         </ul>
       </div>
     </nav>
diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 0808a47ca..ec779b6c9 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -30,11 +30,12 @@ header {
       margin-left: 1.3rem;
 
       ul {
-        a {
-          font-size: 0.9rem;
-          padding-top: 3px;
-          padding-bottom: 3px;
-          color: $txt-gray;
+        li {
+          padding: 5px 3px;
+          a {
+            font-size: 0.9rem;
+            color: $txt-gray;
+          }
         }
       }
     }
@@ -55,7 +56,7 @@ header {
       }
     }
 
-    ul {
+    ul li {
       a {
         color: $txt-black;
 
@@ -82,7 +83,7 @@ header {
 
       svg {
         padding-left: 0.75rem;
-        width: 20px;
+        font-size: 1.5rem;
         width: 30px;
       }
     }
@@ -98,18 +99,24 @@ header {
           padding-left: 10px;
           margin-top: 3px;
           margin-bottom: 3px;
+          &:has(a.active) {
+            background-color: $body-gray;
+            border-radius: 20px;
+          }
 
           button {
             background-color: transparent;
             box-shadow: none;
-            padding-left: 10px;
+            padding: 0 5px;
+
+            svg {
+              color: $txt-gray;
+            }
+            svg:hover {
+              color: $txt-black;
+            }
           }
         }
-
-        .flex-between:hover {
-          background-color: $body-gray;
-          border-radius: 20px;
-        }
       }
 
       .btn-close {

From a30014592bea567983a061ff9c9279b92738551c Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Mon, 17 Feb 2025 10:49:50 +0100
Subject: [PATCH 19/23] fix warning: React does not recognize the isActive prop
 on a DOM element: NavHashLink -> HashLink

---
 src/components/Common/HeaderNav.tsx | 53 ++++++++++++++---------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/Common/HeaderNav.tsx b/src/components/Common/HeaderNav.tsx
index 6b42c0d49..3db12f9f0 100644
--- a/src/components/Common/HeaderNav.tsx
+++ b/src/components/Common/HeaderNav.tsx
@@ -11,9 +11,9 @@ import EduIDButton from "components/Common/EduIDButton";
 import { ACCOUNT_PATH, IDENTITY_PATH, SECURITY_PATH, START_PATH } from "components/IndexMain";
 import { useAppSelector } from "eduid-hooks";
 import React, { useEffect, useRef, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
-import { NavHashLink } from "react-router-hash-link";
+import { HashLink } from "react-router-hash-link";
 
 // export for use in tests
 export const activeClassName = "active";
@@ -78,7 +78,6 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
     account: false,
   });
   const wrapperRef = useRef(null);
-  const intl = useIntl();
 
   const toggleOpen = (button: ButtonKey) => {
     setIsOpen((prevState) => ({
@@ -113,9 +112,9 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <li className={isOpen.start ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`} end>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`}>
                   <FormattedMessage defaultMessage="eduID status overview" description="status overview title" />
-                </NavHashLink>
+                </HashLink>
               </li>
             </ul>
           </li>
@@ -139,18 +138,18 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <li className={isOpen.identity ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${IDENTITY_PATH}#verify-identity`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${IDENTITY_PATH}#verify-identity`}>
                   <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink
+                <HashLink
                   onClick={() => setOpenMenu(false)}
                   to={`${IDENTITY_PATH}#personal-data`}
                   aria-label="go to manage your security key section"
                 >
                   <FormattedMessage description="Names & Display Name" defaultMessage={`Names & Display Name`} />
-                </NavHashLink>
+                </HashLink>
               </li>
             </ul>
           </li>
@@ -174,14 +173,14 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <li className={isOpen.security ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
                   <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="security key title" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#manage-security-keys`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#manage-security-keys`}>
                   <FormattedMessage defaultMessage="Manage your security keys" description="manage your tokens" />
-                </NavHashLink>
+                </HashLink>
               </li>
             </ul>
           </li>
@@ -204,39 +203,39 @@ export function HeaderNav(props: HeaderNavProps): JSX.Element {
           <li className={isOpen.account ? "submenu-collapse" : "submenu-collapse submenu-close"}>
             <ul>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
                   <FormattedMessage defaultMessage="Unique ID" description="Dashboard AccountId" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#add-email-addresses`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#add-email-addresses`}>
                   <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#language`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#language`}>
                   <FormattedMessage defaultMessage="Language" description="Language" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#change-password`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#change-password`}>
                   <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#orcid`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#orcid`}>
                   <FormattedMessage defaultMessage="ORCID account" description="Dashboard AccountLinking" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#ladok`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#ladok`}>
                   <FormattedMessage defaultMessage="ESI information" description="Ladok account linking" />
-                </NavHashLink>
+                </HashLink>
               </li>
               <li>
-                <NavHashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#delete-account`}>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#delete-account`}>
                   <FormattedMessage defaultMessage="Delete eduID" description="DeleteAccount" />
-                </NavHashLink>
+                </HashLink>
               </li>
             </ul>
           </li>

From e55e8e9907b251365639195e400db13846fdc614 Mon Sep 17 00:00:00 2001
From: cartja <carina@sunet.se>
Date: Mon, 17 Feb 2025 15:14:26 +0100
Subject: [PATCH 20/23] site variables, responsiveness, hover, list line-height

---
 src/styles/_Header.scss | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index ec779b6c9..a2dca90e5 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -27,13 +27,15 @@ header {
       max-height: 500px;
       overflow: hidden;
       transition: max-height 0.2s ease;
-      margin-left: 1.3rem;
+      margin-left: 1.5rem;
+      margin-right: 0.75rem;
 
       ul {
         li {
-          padding: 5px 3px;
+          padding: 0.5rem 0;
+          line-height: 1.2;
           a {
-            font-size: 0.9rem;
+            font-size: $txt-sm;
             color: $txt-gray;
           }
         }
@@ -77,14 +79,14 @@ header {
       font-family: $inter-light;
       background: none;
       box-shadow: none;
-      padding: 0 1.125rem;
+      padding: 0 1rem;
       display: flex;
       align-items: center;
 
       svg {
         padding-left: 0.75rem;
         font-size: 1.5rem;
-        width: 30px;
+        width: 24px;
       }
     }
 
@@ -92,38 +94,38 @@ header {
       display: none;
       min-width: 250px;
 
+      @media (max-width: $bp-xs) {
+        min-width: calc(100% - #{2 * $margin});
+        left: $margin;
+      }
+
       ul {
         text-align: left;
 
         .flex-between {
-          padding-left: 10px;
+          padding-left: 0.75rem;
           margin-top: 3px;
           margin-bottom: 3px;
           &:has(a.active) {
             background-color: $body-gray;
-            border-radius: 20px;
+            border-radius: 1.5rem;
           }
 
           button {
             background-color: transparent;
             box-shadow: none;
-            padding: 0 5px;
+            padding: 0 0.75rem;
 
             svg {
               color: $txt-gray;
             }
-            svg:hover {
-              color: $txt-black;
+            &:hover svg {
+              color: $txt-orange;
             }
           }
         }
       }
 
-      .btn-close {
-        align-self: flex-end;
-        margin-bottom: 1rem;
-      }
-
       &.active {
         opacity: 1;
         display: flex;
@@ -135,8 +137,8 @@ header {
         background-color: $white;
         box-shadow: 0 -6px 17px rgb(89 89 89 / 7%);
         border-radius: 10px;
-        padding: 20px;
-        right: 20px;
+        padding: 0.75rem;
+        right: $margin;
         max-width: 20rem;
         overflow-y: auto;
         max-height: 80vh;
@@ -159,7 +161,7 @@ header {
         }
       }
       .logout-button-wrapper {
-        margin: 0.5rem 0 0 10px;
+        margin: 0.5rem 0.75rem;
         padding-top: 0.5rem;
         border-top: 1px solid $border-gray;
       }

From 7d6e7f19d02828aade6bdfa80994aca8c6deb470 Mon Sep 17 00:00:00 2001
From: cartja <carina@sunet.se>
Date: Mon, 17 Feb 2025 15:23:28 +0100
Subject: [PATCH 21/23] space between open and active submenu

---
 src/styles/_Header.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index a2dca90e5..7c8adce38 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -27,8 +27,7 @@ header {
       max-height: 500px;
       overflow: hidden;
       transition: max-height 0.2s ease;
-      margin-left: 1.5rem;
-      margin-right: 0.75rem;
+      margin: 0 0.75rem 1rem 1.5rem;
 
       ul {
         li {
@@ -43,6 +42,7 @@ header {
     }
     .submenu-close {
       max-height: 0;
+      margin-bottom: 0;
     }
 
     button {

From cd72314398e2352af39098399e225eab8f45adf9 Mon Sep 17 00:00:00 2001
From: cartja <carina@sunet.se>
Date: Mon, 17 Feb 2025 15:35:38 +0100
Subject: [PATCH 22/23] higher menu in case all open

---
 src/styles/_Header.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/_Header.scss b/src/styles/_Header.scss
index 7c8adce38..b2c9f5736 100644
--- a/src/styles/_Header.scss
+++ b/src/styles/_Header.scss
@@ -141,7 +141,7 @@ header {
         right: $margin;
         max-width: 20rem;
         overflow-y: auto;
-        max-height: 80vh;
+        max-height: 90vh;
 
         .btn-link svg {
           padding-right: 5px;

From 320ddc596d6ebaf3db573066731db09ca8770763 Mon Sep 17 00:00:00 2001
From: Eunju Huss <eunju@sunet.se>
Date: Mon, 17 Feb 2025 15:42:00 +0100
Subject: [PATCH 23/23] Npm audit fix

---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 778951aec..7db454736 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15464,9 +15464,9 @@
       "dev": true
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -29160,9 +29160,9 @@
       }
     },
     "serialize-javascript": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
-      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "requires": {
         "randombytes": "^2.1.0"
       }