From 5718dab4de7d7eec461f68da546b647ec7ff9e01 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Mon, 10 Jan 2022 13:06:31 +0000
Subject: [PATCH] Support right-click and middle-click interactions with
 sidebar links

---
 .../src/components/Sidebar/menu/LinkMenuItem.tsx | 16 +++++++++++++++-
 .../Sidebar/modules/CustomBranding.tsx           | 12 +++++++++++-
 .../Sidebar/modules/WagtailBranding.tsx          | 12 +++++++++++-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Sidebar/menu/LinkMenuItem.tsx b/client/src/components/Sidebar/menu/LinkMenuItem.tsx
index 415265d982..159d2006f5 100644
--- a/client/src/components/Sidebar/menu/LinkMenuItem.tsx
+++ b/client/src/components/Sidebar/menu/LinkMenuItem.tsx
@@ -11,6 +11,16 @@ export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDef
   const isInSubMenu = path.split('.').length > 2;
 
   const onClick = (e: React.MouseEvent) => {
+    // Do not capture click events with modifier keys or non-main buttons.
+    if (
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.metaKey ||
+      (e.button && e.button !== 0)
+    ) {
+      return;
+    }
+
     e.preventDefault();
 
     navigate(item.url).then(() => {
@@ -67,7 +77,11 @@ export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDef
 
   return (
     <li className={className} ref={wrapperRef}>
-      <a href="#" onClick={onClick} className={`sidebar-menu-item__link ${item.classNames}`}>
+      <a
+        href={item.url}
+        onClick={onClick}
+        className={`sidebar-menu-item__link ${item.classNames}`}
+      >
         {item.iconName && <Icon name={item.iconName} className="icon--menuitem" />}
         <span className="menuitem-label">{item.label}</span>
         <div className={'menuitem-tooltip' + (peeking ? ' menuitem-tooltip--visible' : '')}>
diff --git a/client/src/components/Sidebar/modules/CustomBranding.tsx b/client/src/components/Sidebar/modules/CustomBranding.tsx
index ffffc1b9c1..5f816d6376 100644
--- a/client/src/components/Sidebar/modules/CustomBranding.tsx
+++ b/client/src/components/Sidebar/modules/CustomBranding.tsx
@@ -12,6 +12,16 @@ interface CustomBrandingProps {
 
 const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl, html, strings, navigate }) => {
   const onClick = (e: React.MouseEvent) => {
+    // Do not capture click events with modifier keys or non-main buttons.
+    if (
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.metaKey ||
+      (e.button && e.button !== 0)
+    ) {
+      return;
+    }
+
     e.preventDefault();
     navigate(homeUrl);
   };
@@ -19,7 +29,7 @@ const CustomBranding: React.FunctionComponent<CustomBrandingProps> = ({ homeUrl,
   return (
     <a
       className="sidebar-custom-branding"
-      href="#"
+      href={homeUrl}
       onClick={onClick}
       aria-label={strings.DASHBOARD}
       dangerouslySetInnerHTML={{ __html: html }}
diff --git a/client/src/components/Sidebar/modules/WagtailBranding.tsx b/client/src/components/Sidebar/modules/WagtailBranding.tsx
index 716a4115e4..8abade2b58 100644
--- a/client/src/components/Sidebar/modules/WagtailBranding.tsx
+++ b/client/src/components/Sidebar/modules/WagtailBranding.tsx
@@ -28,6 +28,16 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUr
 
 
   const onClick = (e: React.MouseEvent) => {
+    // Do not capture click events with modifier keys or non-main buttons.
+    if (
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.metaKey ||
+      (e.button && e.button !== 0)
+    ) {
+      return;
+    }
+
     e.preventDefault();
     navigate(homeUrl);
   };
@@ -60,7 +70,7 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({ homeUr
 
   return (
     <a
-      className={desktopClassName} href="#" aria-label={strings.DASHBOARD}
+      className={desktopClassName} href={homeUrl} aria-label={strings.DASHBOARD}
       onClick={onClick} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave}
     >
       <div className="sidebar-wagtail-branding__icon-wrapper">