update header

src/layout/MainLayout/Header/index.js

@@ -403,14 +403,26 @@ function Header(props) {
                 isORGLoggedIn() ?
                   haveOrgPaymentRecord() ?
                     <>
-                      <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                        <FormattedMessage id="onlinePaymentHistory" />
-                      </Typography></Link>
-                      {haveOrgDnRecord()?
-                        <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                          <FormattedMessage id="paymentInfoRecord" />
-                        </Typography></Link>:null
-                      }
+                      <Link className="paymentRecord">
+                        <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                          <FormattedMessage id="paymentHistory" />
+                        </Typography>
+                        <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+                      </Link>
+                      <ul className='dropdown'>
+                        <li>
+                          <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                            <FormattedMessage id="onlinePaymentHistory" />
+                          </Typography></Link>
+                        </li>
+                        {haveOrgDnRecord()?
+                          <li>
+                            <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                              <FormattedMessage id="paymentInfoRecord" />
+                            </Typography></Link>
+                          </li>:null
+                        }
+                      </ul>
                     </>
                     :
                     <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
@@ -418,14 +430,26 @@ function Header(props) {
                     </Typography></Link>
                   :
                   <>
-                    <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                      <FormattedMessage id="onlinePaymentHistory" />
-                    </Typography></Link>
-                    {haveOrgDnRecord()?
-                      <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
-                        <FormattedMessage id="paymentInfoRecord" />
-                      </Typography></Link>:null
-                    }
+                    <Link className="paymentRecord">
+                      <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                        <FormattedMessage id="paymentHistory" />
+                      </Typography>
+                      <KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} />
+                    </Link>
+                    <ul className='dropdown'>
+                      <li>
+                        <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                          <FormattedMessage id="onlinePaymentHistory" />
+                        </Typography></Link>
+                      </li>
+                      {haveOrgDnRecord()?
+                        <li>
+                          <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>
+                            <FormattedMessage id="paymentInfoRecord" />
+                          </Typography></Link>
+                        </li>:null
+                      }
+                    </ul>
                   </>
               }
             </li>