Merge pull request #244 from ahmed0saber/open-external-links-in-new-tab

Open external links in new tab

Author: maltejur

components/footer/index.tsx

@@ -38,19 +38,21 @@ export default function Footer() {
           <Link href="/#donate">{t("donateTitle")}</Link>
         </div>
         <div className={classes.list}>
-          <Link href="https://github.com/TheAlgorithms/">GitHub</Link>
-          <Link href="https://matrix.to/#/#TheAlgorithms_community:gitter.im">
+          <a href="https://github.com/TheAlgorithms/" target="_blank" rel="noreferrer">GitHub</a>
+          <a href="https://matrix.to/#/#TheAlgorithms_community:gitter.im" target="_blank" rel="noreferrer">
             Gitter
-          </Link>
-          <Link href="https://twitter.com/The_Algorithms">Twitter</Link>
-          <Link href="https://github.com/TheAlgorithms/website">
+          </a>
+          <a href="https://twitter.com/The_Algorithms" target="_blank" rel="noreferrer">Twitter</a>
+          <a href="https://github.com/TheAlgorithms/website" target="_blank" rel="noreferrer">
             {t("sourceCodeFooter")}
-          </Link>
-          <Link href="mailto:[email protected]">{t("contact")}</Link>
+          </a>
+          <a href="mailto:[email protected]" target="_blank" rel="noreferrer">{t("contact")}</a>
         </div>
         <a
           className={classes.vercelLogo}
           href="https://vercel.com?utm_source=thealgorithms&utm_campaign=oss"
+          target="_blank"
+          rel="noreferrer"
         >
           <img src="/powered-by-vercel-t.svg" alt="Powered by Vercel" />
         </a>

components/footer/style.module.css

@@ -19,6 +19,10 @@
   margin-right: 30px;
 }
 
+.list a {
+  text-decoration: none;
+}
+
 .grid {
   display: grid;
   grid-template-rows: 35px auto;

components/navbar/index.tsx

@@ -53,10 +53,12 @@ export default function Navbar({
     {
       name: t("aboutTextNavbar"),
       href: "/#aboutUs",
+      target: "_self",
     },
     {
       name: t("donateButton"),
       href: "https://liberapay.com/TheAlgorithms/donate",
+      target: "_blank",
     },
   ];
 
@@ -131,9 +133,7 @@ export default function Navbar({
                 <GithubOriginalIcon color="white" />
               </IconButton>
               {menu.map((item) => (
-                <NextLink passHref key={item.name} href={item.href}>
-                  <Button>{item.name}</Button>
-                </NextLink>
+                  <Button key={item.name} href={item.href} target={item.target}>{item.name}</Button>
               ))}
             </div>
           )}
@@ -151,13 +151,15 @@ export default function Navbar({
             <SearchBar query={query} setQuery={setQuery} small />
           </ListItem>
           {menu.map((item) => (
-            <NextLink key={item.name} href={item.href}>
-              <MenuItem>{item.name}</MenuItem>
-            </NextLink>
+            <MenuItem key={item.name}>
+              <Button href={item.href} target={item.target} className={classes.sidebarLink}>
+                {item.name}
+              </Button>
+            </MenuItem>
           ))}
-          <NextLink href="https://github.com/TheAlgorithms">
-            <MenuItem>GitHub</MenuItem>
-          </NextLink>
+          <MenuItem>
+            <a className={classes.unstyledLink} href="https://github.com/TheAlgorithms" target="_blank" rel="noreferrer">GitHub</a>
+          </MenuItem>
           <MenuItem onClick={() => switchTheme()}>
             {darkTheme ? t("lightModeNavbar") : t("darkModeNavbar")}
           </MenuItem>

components/navbar/style.module.css

@@ -64,3 +64,13 @@
   width: 1em;
   height: 1em;
 }
+
+.sidebarLink {
+  padding: 0px !important;
+  min-width: auto !important;
+}
+
+.unstyledLink {
+  color: #fff;
+  text-decoration: none;
+}