feat : allow opening NavBar icon links with middle-click (#28)

src/sections/layout/NavBar.tsx

@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import NavMenu from "./NavMenu";
 import { Icon } from "@iconify/react";
 import { useRouter } from "next/router";
@@ -23,6 +23,17 @@ export default function NavBar({ darkMode, switchDarkMode }: Props) {
     setDrawerOpen(false);
   }, [router.pathname]);
 
+  const handleIconClick = useCallback((url: string, event: React.MouseEvent) => {
+    if (event.button === 0 || event.button === 1) {
+      // Left click (0) or middle click (1)
+      window.open(url, "_blank", "noopener,noreferrer");
+      if (event.button === 0) {
+        // If left click, focus the new tab
+        window.focus();
+      }
+    }
+  }, []);
+
   return (
     <Box sx={{ flexGrow: 1, display: "flex" }}>
       <AppBar
@@ -66,15 +77,17 @@ export default function NavBar({ darkMode, switchDarkMode }: Props) {
           </NavLink>
           <IconButton
             color="inherit"
-            onClick={() => window.open("https://discord.gg/Yr99abAcUr")}
+            onClick={(event) =>
+              handleIconClick("https://discord.gg/Yr99abAcUr", event)
+            }
           >
             <Icon icon="ri:discord-fill" />
           </IconButton>
           <IconButton
             color="inherit"
             sx={{ ml: "min(0.6rem, 0.8vw)" }}
-            onClick={() =>
+            onClick={(event) =>
-              window.open("https://github.com/GuillaumeSD/Chesskit")
+              handleIconClick("https://github.com/GuillaumeSD/Chesskit", event)
             }
           >
             <Icon icon="mdi:github" />