feat(PUI): Make header tabs links to simpilfy new tab behaviour (#8779)

* add anchor element to tabs to enable opening in new tab

* simplify

* use unstyled button instead

* also enable linking on nav panels

* make sure metakey also works (reduces duplication)

* remove headers changes

* move check for modified key to lib

* render nav items as link

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/lib/functions/Navigation.tsx

@@ -72,7 +72,7 @@ export const navigateToLink = (
 
   const base = `/${getBaseUrl()}`;
 
-  if (event?.ctrlKey || event?.shiftKey) {
+  if (eventModified(event)) {
     // Open the link in a new tab
     let url = link;
     if (link.startsWith('/') && !link.startsWith(base)) {
@@ -91,3 +91,14 @@ export const navigateToLink = (
     navigate(url);
   }
 };
+
+/**
+ * Check if the event is modified (e.g. ctrl, shift, or meta key pressed)
+ * @param event - The event to check
+ * @returns true if the event was modified
+ */
+export const eventModified = (
+  event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
+) => {
+  return event?.ctrlKey || event?.shiftKey || event?.metaKey;
+};