From 21aa0396f30965fce9fcc4804a807d752c94080e Mon Sep 17 00:00:00 2001
From: magsyg <magsyg@github.com>
Date: Fri, 6 Dec 2024 15:15:45 +0100
Subject: [PATCH 1/4] feat: upgrade recruitment navbar

---
 frontend/src/Components/Navbar/Navbar.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index 46e823da5..aa5978f1b 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -16,6 +16,7 @@ import { KEY } from '~/i18n/constants';
 import { ROUTES } from '~/routes';
 import styles from './Navbar.module.scss';
 import { HamburgerMenu, LanguageButton, NavbarItem } from './components';
+import { dbT, getObjectFieldOrNumber } from '~/utils';
 
 const scrollDistanceForOpaque = 30;
 
@@ -107,6 +108,22 @@ export function Navbar() {
     </>
   );
 
+  const showActiveRecruitments = activeRecruitments !== undefined && activeRecruitments?.length > 0;
+
+  const recruitmentLinks = showActiveRecruitments && (
+    <>
+      {activeRecruitments?.map((recruitment) =>
+        <Link
+          url={ROUTES.frontend.about}
+          className={styles.navbar_dropdown_link}
+          onAfterClick={() => setExpandedDropdown('')}
+        >
+          {dbT(recruitment, 'name')} {getObjectFieldOrNumber<number>(recruitment.organization, 'id') ?? 0}
+        </Link>
+      )}
+    </>
+  );
+
   const navbarHeaders = (
     <div className={isDesktop ? styles.navbar_main_links : styles.navbar_main_links_mobile}>
       <NavbarItem
@@ -133,7 +150,8 @@ export function Navbar() {
         expandedDropdown={expandedDropdown}
         route={ROUTES.frontend.recruitment}
         label={t(KEY.common_volunteer)}
-        labelClassName={activeRecruitments && styles.active_recruitment}
+        labelClassName={showActiveRecruitments ? styles.active_recruitment : ''}
+        dropdownLinks={recruitmentLinks}
       />
     </div>
   );

From 66b5d442997ca4c1b1c6afbc605cfa47ce4ca23b Mon Sep 17 00:00:00 2001
From: magsyg <magsyg@github.com>
Date: Fri, 6 Dec 2024 16:19:38 +0100
Subject: [PATCH 2/4] fix navbar for recruitment

---
 frontend/src/Components/Navbar/Navbar.tsx        | 16 +++++++++++-----
 .../Navbar/components/NavbarItem/NavbarItem.tsx  |  4 +++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index aa5978f1b..5ccba3d6b 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -13,10 +13,11 @@ import type { RecruitmentDto } from '~/dto';
 import { useDesktop, useScrollY } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
+import { dbT, getObjectFieldOrNumber } from '~/utils';
 import styles from './Navbar.module.scss';
 import { HamburgerMenu, LanguageButton, NavbarItem } from './components';
-import { dbT, getObjectFieldOrNumber } from '~/utils';
 
 const scrollDistanceForOpaque = 30;
 
@@ -112,15 +113,19 @@ export function Navbar() {
 
   const recruitmentLinks = showActiveRecruitments && (
     <>
-      {activeRecruitments?.map((recruitment) =>
+      {activeRecruitments?.map((recruitment) => (
         <Link
-          url={ROUTES.frontend.about}
+          key={recruitment.id}
+          url={reverse({
+            pattern: ROUTES.frontend.organization_recruitment,
+            urlParams: { recruitmentId: recruitment?.id },
+          })}
           className={styles.navbar_dropdown_link}
           onAfterClick={() => setExpandedDropdown('')}
         >
-          {dbT(recruitment, 'name')} {getObjectFieldOrNumber<number>(recruitment.organization, 'id') ?? 0}
+          {dbT(recruitment, 'name')} {recruitment.organization.toString()}
         </Link>
-      )}
+      ))}
     </>
   );
 
@@ -152,6 +157,7 @@ export function Navbar() {
         label={t(KEY.common_volunteer)}
         labelClassName={showActiveRecruitments ? styles.active_recruitment : ''}
         dropdownLinks={recruitmentLinks}
+        showDropDownIcon={false}
       />
     </div>
   );
diff --git a/frontend/src/Components/Navbar/components/NavbarItem/NavbarItem.tsx b/frontend/src/Components/Navbar/components/NavbarItem/NavbarItem.tsx
index 371f7f36f..21ab66504 100644
--- a/frontend/src/Components/Navbar/components/NavbarItem/NavbarItem.tsx
+++ b/frontend/src/Components/Navbar/components/NavbarItem/NavbarItem.tsx
@@ -13,6 +13,7 @@ type NavbarItemProps = {
   labelClassName?: string;
   dropdownLinks?: Children;
   expandedDropdown?: string;
+  showDropDownIcon?: boolean;
   setExpandedDropdown: SetState<string>;
 };
 
@@ -26,6 +27,7 @@ export function NavbarItem({
   setExpandedDropdown,
   dropdownLinks,
   labelClassName,
+  showDropDownIcon = true,
 }: NavbarItemProps) {
   const { setIsMobileNavigation } = useGlobalContext();
   const isDesktop = useDesktop();
@@ -67,7 +69,7 @@ export function NavbarItem({
       <Link to={route} className={isDesktop ? styles.navbar_link : styles.popup_link_mobile} onClick={handleClick}>
         {icon && <Icon icon={icon} className={styles.navbar_item_icon} />}
         <span className={labelClassName}>{label}</span>
-        {dropdownLinks && (
+        {dropdownLinks && showDropDownIcon && (
           <Icon
             icon={iconDown}
             width={18}

From 82e904836bb3950e435fb3435d51940a502b5fda Mon Sep 17 00:00:00 2001
From: magsyg <magsyg@github.com>
Date: Fri, 6 Dec 2024 16:20:39 +0100
Subject: [PATCH 3/4] fixup

---
 frontend/src/Components/Navbar/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index 5ccba3d6b..a82ee7ece 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -15,7 +15,7 @@ import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
-import { dbT, getObjectFieldOrNumber } from '~/utils';
+import { dbT } from '~/utils';
 import styles from './Navbar.module.scss';
 import { HamburgerMenu, LanguageButton, NavbarItem } from './components';
 

From b7a0e0038a7e371b0bf0bc1632ec2f87c51b9226 Mon Sep 17 00:00:00 2001
From: magsyg <magsyg@github.com>
Date: Wed, 11 Dec 2024 18:57:14 +0100
Subject: [PATCH 4/4] remove fix

---
 frontend/src/Components/Navbar/Navbar.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index a82ee7ece..f30460a8d 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -108,10 +108,7 @@ export function Navbar() {
       </a>
     </>
   );
-
-  const showActiveRecruitments = activeRecruitments !== undefined && activeRecruitments?.length > 0;
-
-  const recruitmentLinks = showActiveRecruitments && (
+  const recruitmentLinks = (
     <>
       {activeRecruitments?.map((recruitment) => (
         <Link
@@ -155,7 +152,7 @@ export function Navbar() {
         expandedDropdown={expandedDropdown}
         route={ROUTES.frontend.recruitment}
         label={t(KEY.common_volunteer)}
-        labelClassName={showActiveRecruitments ? styles.active_recruitment : ''}
+        labelClassName={activeRecruitments && styles.active_recruitment}
         dropdownLinks={recruitmentLinks}
         showDropDownIcon={false}
       />