add fundraiser section to header nav

Author: Rachel Lim

client/modules/IDE/components/Header/Nav.jsx

@@ -24,6 +24,7 @@ import {
   newFile,
   newFolder,
   showKeyboardShortcutModal,
+  showFundraiserModal,
   startSketch,
   stopSketch
 } from '../../actions/ide';
@@ -37,6 +38,7 @@ const Nav = ({ layout }) => (
       matches ? (
         <NavBar>
           <LeftLayout layout={layout} />
+          <FundraiserSection />
           <UserMenu />
         </NavBar>
       ) : (
@@ -85,6 +87,23 @@ const UserMenu = () => {
   return null;
 };
 
+const FundraiserSection = () => {
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <button
+        className="nav__fundraiser-btn"
+        onClick={() => dispatch(showFundraiserModal())}
+        aria-label="2023-fundraiser-button"
+        title="2023 Fundraiser Button"
+      >
+        Celebrate a Decade of Code and Support p5.js!
+      </button>
+    </>
+  );
+};
+
 const DashboardMenu = () => {
   const { t } = useTranslation();
   const editorLink = useSelector(selectSketchPath);