From 3cba3a5a0aa3db00b35772e845a405a60697a62e Mon Sep 17 00:00:00 2001
From: wrt95 <wrt_95@hotmail.com>
Date: Mon, 10 Feb 2025 12:44:51 +0100
Subject: [PATCH 1/2] fix: adding missing white line under active tab on
 dashboard

---
 .../DashboardHeader/DashboardHeader.module.css   |  3 +++
 .../DashboardHeader/DashboardHeader.tsx          | 16 +++++++++++++++-
 .../DashboardHeader/dashboardHeaderMenuItems.ts  |  4 ++--
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css

diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css
new file mode 100644
index 00000000000..13dd0977628
--- /dev/null
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css
@@ -0,0 +1,3 @@
+.active {
+  border-bottom: 2px solid var(--fds-semantic-surface-neutral-default);
+}
diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
index dd948b288f4..664edd42ec8 100644
--- a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import classes from './DashboardHeader.module.css';
+import cn from 'classnames';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -48,6 +50,7 @@ function TopNavigationMenuItem({ menuItem }: TopNavigationMenuProps): React.Reac
   const selectedContext: string = useSelectedContext();
   const { t } = useTranslation();
   const path: string = `${menuItem.link}/${selectedContext}`;
+  const currentRoutePath: string = extractSecondLastRouterParam(location.pathname);
 
   return (
     <StudioPageHeader.HeaderLink
@@ -55,13 +58,24 @@ function TopNavigationMenuItem({ menuItem }: TopNavigationMenuProps): React.Reac
       variant='regular'
       renderLink={(props) => (
         <NavLink to={path} {...props}>
-          {t(menuItem.name)}
+          <span
+            className={cn({
+              [classes.active]: menuItem.key === currentRoutePath,
+            })}
+          >
+            {t(menuItem.name)}
+          </span>
         </NavLink>
       )}
     />
   );
 }
 
+function extractSecondLastRouterParam(pathname: string): string {
+  const pathnameArray = pathname.split('/');
+  return pathnameArray[pathnameArray.length - 2];
+}
+
 const DashboardHeaderMenu = () => {
   const { t } = useTranslation();
   const showButtonText = !useMediaQuery(MEDIA_QUERY_MAX_WIDTH);
diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts b/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
index f7b7710d874..d477956a392 100644
--- a/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
@@ -1,8 +1,8 @@
 import { Subroute } from '../../../context/HeaderContext';
 
 enum HeaderMenuItemKey {
-  OrgLibrary = 'orgLibrary',
-  AppDashboard = 'appDashboard',
+  OrgLibrary = 'org-library',
+  AppDashboard = 'app-dashboard',
 }
 
 export interface HeaderMenuItem {

From 5e19031baf7588a63bc0b8916b9799e9b01a79d3 Mon Sep 17 00:00:00 2001
From: wrt95 <wrt_95@hotmail.com>
Date: Tue, 11 Feb 2025 10:54:24 +0100
Subject: [PATCH 2/2] fix: comment from PR

---
 .../pages/PageLayout/DashboardHeader/DashboardHeader.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
index 664edd42ec8..442da6782e3 100644
--- a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
@@ -21,6 +21,7 @@ import { usePageHeaderTitle } from 'dashboard/hooks/usePageHeaderTitle';
 import { useSubroute } from '../../../hooks/useSubRoute';
 import type { HeaderMenuItem } from './dashboardHeaderMenuItems';
 import { dashboardHeaderMenuItems } from './dashboardHeaderMenuItems';
+import { StringUtils } from '@studio/pure-functions';
 
 export const DashboardHeader = () => {
   const pageHeaderTitle: string = usePageHeaderTitle();
@@ -60,7 +61,7 @@ function TopNavigationMenuItem({ menuItem }: TopNavigationMenuProps): React.Reac
         <NavLink to={path} {...props}>
           <span
             className={cn({
-              [classes.active]: menuItem.key === currentRoutePath,
+              [classes.active]: StringUtils.removeLeadingSlash(menuItem.link) === currentRoutePath,
             })}
           >
             {t(menuItem.name)}