Create a submenu

src/components/Common/HeaderNav.tsx

@@ -1,15 +1,23 @@
 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";
 import { useAppSelector } from "eduid-hooks";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
 
 // export for use in tests
 export const activeClassName = "active";
+type ButtonKey = "start" | "identity" | "security" | "account";
 
 export interface HeaderNavProps {
   handleLogout: () => void;
@@ -37,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>
   );
 }
@@ -67,58 +71,186 @@ 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,
+  });
   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}>
       <RenderUserName setOpenMenu={setOpenMenu} openMenu={openMenu} />
       <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>
-
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={IDENTITY_PATH}
-          >
-            <FormattedMessage defaultMessage="Identity" description="Dashboard nav tab name" />
-          </NavLink>
-
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={SECURITY_PATH}
-          >
-            <FormattedMessage defaultMessage="Security" description="Dashboard nav tab name" />
-          </NavLink>
+          <li 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>
+          </li>
+          <li className={isOpen.start ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+            <ul>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${START_PATH}#status-overview`}>
+                  <FormattedMessage defaultMessage="eduID status overview" description="status overview title" />
+                </HashLink>
+              </li>
+            </ul>
+          </li>
 
-          <NavLink
-            onClick={() => setOpenMenu(false)}
-            className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
-            to={ACCOUNT_PATH}
-          >
-            <FormattedMessage defaultMessage="Account" description="Dashboard nav tab name" />
-          </NavLink>
+          <li 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>
+          </li>
+          <li className={isOpen.identity ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+            <ul>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${IDENTITY_PATH}#verify-identity`}>
+                  <FormattedMessage defaultMessage="Verify Identity" description="Identity sub menu" />
+                </HashLink>
+              </li>
+              <li>
+                <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`} />
+                </HashLink>
+              </li>
+            </ul>
+          </li>
+          <li className="flex-between">
+            <NavLink
+              onClick={() => setOpenMenu(false)}
+              className={({ isActive }) => (isActive ? `${activeClassName} menu` : `menu`)}
+              to={SECURITY_PATH}
+            >
+              <FormattedMessage defaultMessage="Security" description="security main title" />
+            </NavLink>
 
-          <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>
+            <button onClick={() => toggleOpen("security")}>
+              {isOpen.security ? (
+                <FontAwesomeIcon icon={faChevronUp as IconProp} />
+              ) : (
+                <FontAwesomeIcon icon={faChevronDown as IconProp} />
+              )}
+            </button>
+          </li>
+          <li className={isOpen.security ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+            <ul>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#add-two-factor`}>
+                  <FormattedMessage defaultMessage="Two-factor Authentication (2FA)" description="security key title" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${SECURITY_PATH}#manage-security-keys`}>
+                  <FormattedMessage defaultMessage="Manage your security keys" description="manage your tokens" />
+                </HashLink>
+              </li>
+            </ul>
+          </li>
+          <li 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>
+          </li>
+          <li className={isOpen.account ? "submenu-collapse" : "submenu-collapse submenu-close"}>
+            <ul>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#unique-id`}>
+                  <FormattedMessage defaultMessage="Unique ID" description="Dashboard AccountId" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#add-email-addresses`}>
+                  <FormattedMessage defaultMessage="Email addresses" description="Emails main title" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#language`}>
+                  <FormattedMessage defaultMessage="Language" description="Language" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#change-password`}>
+                  <FormattedMessage defaultMessage="Change password" description="Dashboard change password" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#orcid`}>
+                  <FormattedMessage defaultMessage="ORCID account" description="Dashboard AccountLinking" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#ladok`}>
+                  <FormattedMessage defaultMessage="ESI information" description="Ladok account linking" />
+                </HashLink>
+              </li>
+              <li>
+                <HashLink onClick={() => setOpenMenu(false)} to={`${ACCOUNT_PATH}#delete-account`}>
+                  <FormattedMessage defaultMessage="Delete eduID" description="DeleteAccount" />
+                </HashLink>
+              </li>
+            </ul>
+          </li>
+          <li 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>
+          </li>
         </ul>
       </div>
     </nav>

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>

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>

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>

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>

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>

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>

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>

src/components/Dashboard/Ladok.tsx

@@ -29,9 +29,9 @@ 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" />
+        <FormattedMessage defaultMessage="ESI information" description="Ladok account linking" />
       </h2>
 
       <p>

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>
@@ -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[]) => {

src/components/Dashboard/PersonalDataParent.tsx

@@ -114,10 +114,10 @@ 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`} />
+          <FormattedMessage description="Names & Display Name" defaultMessage={`Names & Display Name`} />
         </h2>
         <RenderEditButton hasPersonalData={hasPersonalData} setEditMode={setEditMode} isEditMode={isEditMode} />
       </div>