toggle sub header

portal/src/app/components/sub-header/SubHeader.module.scss

@@ -6,18 +6,38 @@ $subHeaderColor: #7F848A;
     background-color: var($primaryWhite);
     block-size: 300px;
     z-index: 2;
-    padding: 20px 20px 20px 80px;
+    padding: 12px 24px 0 30px;
 }
 
-.close_button {
+.close {
+    block-size: 60px;
+}
+
+.toggle_button {
+    display: flex;
+    align-items: center;
+    color: var($attPurple);
+    font-size: 18px;
+
+    .arrow_icon {
+        margin-inline-end: 12px;
+    }
+}
+
+.sub_header_action_buttons {
     display: flex;
-    margin-inline-start: auto;
+    justify-content: space-between;
+}
+
+.sub_header_action_buttons_close {
+    margin-block-start: 6px;
+}
+
+.close_button {
     background-color: #F5F1FF;
     inline-size: 34px;
     block-size: 34px;
     border-radius: 50%;
-    justify-content: center;
-    align-items: center;
 }
 
 .sub_header_title {
@@ -28,6 +48,10 @@ $subHeaderColor: #7F848A;
 .items_wrapper {
     display: flex;
     margin-block-start: 40px;
+    transition: opacity 0.5s ease, max-block-size 0.5s ease;
+    opacity: 0;
+    max-block-size: 0;
+    overflow: hidden;
 }
 
 .item {
@@ -65,3 +89,13 @@ $subHeaderColor: #7F848A;
     block-size: 1px;
     background-color: $subHeaderColor;
 }
+
+.items_wrapper_open {
+    opacity: 1;
+    max-block-size: 500px;
+}
+
+.items_wrapper_close {
+    opacity: 0;
+    max-block-size: 0;
+}

portal/src/app/components/sub-header/SubHeader.tsx

@@ -2,30 +2,52 @@ import { Button, ButtonActionType, ButtonSize, ButtonStyleType } from '../../sha
 import styles from './SubHeader.module.scss';
 import { SUB_HEADER_EN } from './translate/en';
 import CloseSvg from '../../../assets/images/close.svg';
+import ArrowDownSvg from '../../../assets/images/arrow-down-icon.svg';
+import ArrowUpDownSvg from '../../../assets/images/arrow-up.svg';
 import cn from 'classnames';
 import { SubHeaderItems } from './constants/sub-header.const';
 import { ISubHeaderItem } from './models/sub-header.interface';
+import { useCallback, useState } from 'react';
 
 const CloseAriaLabel: string = 'Close';
+const ToggleAriaLabel: string = 'Toggle';
 
 export interface SubHeaderProps {
     handleCloseClick: () => void;
 }
 export const SubHeader: React.FC<SubHeaderProps> = (props: SubHeaderProps) => {
+  const [open, setOpen] = useState<boolean>(true);
+
+  const handleToggleClick: () => void = useCallback((): void => {
+    setOpen((prev: boolean) => !prev);
+  }, []);
+
   return (
-    <div className={styles.sub_header_wrapper}>
-        <Button
-            className={styles.close_button}
-            ariaLabel={CloseAriaLabel}
-            size={ButtonSize.NONE}
-            styleType={ButtonStyleType.WRAPPER}
-            actionType={ButtonActionType.BUTTON}
-            onButtonClick={props.handleCloseClick}
-        >
-            <img className={styles.close_icon} src={CloseSvg} alt={CloseAriaLabel} />
-        </Button>
-        <div className={styles.sub_header_title}>{SUB_HEADER_EN.TITLE}</div>
-        <div className={styles.items_wrapper}>
+    <div className={cn(styles.sub_header_wrapper, { [styles.close]: !open })}>
+        <div className={cn(styles.sub_header_action_buttons, { [styles.sub_header_action_buttons_close]: !open })}>
+            <Button
+                className={styles.toggle_button}
+                ariaLabel={CloseAriaLabel}
+                size={ButtonSize.NONE}
+                styleType={ButtonStyleType.WRAPPER}
+                actionType={ButtonActionType.BUTTON}
+                onButtonClick={handleToggleClick}
+            >
+                <img className={styles.arrow_icon} src={open ? ArrowUpDownSvg : ArrowDownSvg} alt={ToggleAriaLabel} />
+                {SUB_HEADER_EN.TOGGLE_BUTTON}
+            </Button>
+            {open && <Button
+                className={styles.close_button}
+                ariaLabel={CloseAriaLabel}
+                size={ButtonSize.NONE}
+                styleType={ButtonStyleType.WRAPPER}
+                actionType={ButtonActionType.BUTTON}
+                onButtonClick={props.handleCloseClick}
+            >
+                <img className={styles.close_icon} src={CloseSvg} alt={CloseAriaLabel} />
+            </Button>}
+        </div>
+        <div className={cn({ [styles.items_wrapper_open]: open }, { [styles.items_wrapper_close]: !open }, styles.items_wrapper)}>
             {SubHeaderItems.map((item: ISubHeaderItem, index: number) => 
                 <div className={styles.item} key={item.alt}>
                     <div className={styles.item_icon_wrapper}>

portal/src/app/components/sub-header/translate/en.ts

@@ -15,5 +15,6 @@ export const SUB_HEADER_EN = {
         DOWNLOAD: 'Download',
         CHECK: 'Check',
     },
+    TOGGLE_BUTTON: 'Learn about the process of each iteration',
 };
 

portal/src/app/shared/components/global-header/GlobalHeader.module.scss

@@ -13,7 +13,7 @@ $headerSuperUser: #a4f1c1;
   font-size: $headerFontSize;
   line-height: var($headerSize);
   padding-inline-end: var($layoutPadding);
-  padding-inline-start: var($layoutPadding);
+  padding-inline-start: 32px;
   position: sticky;
   inset-block-start: 0;
   inline-size: 100%;