feat: external link icons to navigation menu

Author: danieldanielecki

app/tag-data.json

@@ -1,10 +1,19 @@
 {
-  "css": 1,
-  "frontend": 1,
-  "software-development": 2,
-  "web-development": 1,
+  "api": 1,
+  "architecture": 1,
+  "backend": 1,
+  "database": 1,
+  "graphql": 1,
+  "performance": 1,
+  "programming": 1,
+  "rest": 1,
+  "web-development": 2,
+  "web-services": 1,
   "android": 1,
   "androidx": 1,
   "jetifier": 1,
-  "mobile-development": 1
+  "mobile-development": 1,
+  "software-development": 2,
+  "css": 1,
+  "frontend": 1
 }

components/Header.tsx

@@ -52,18 +52,18 @@ const Header = () => {
         </div>
       </Link>
       <div className="flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6">
-        <div className="no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96">
+        <div className="no-scrollbar hidden w-full items-center gap-x-4 overflow-x-auto lg:flex">
           {headerNavLinks
             .filter((link) => link.href !== '/')
             .map((link) => (
               <Link
                 key={link.title}
                 href={link.href}
-                className="flex items-center gap-1 m-1 font-medium text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+                className="hover:text-primary-500 dark:hover:text-primary-400 m-1 flex items-center gap-1 font-medium text-gray-900 dark:text-gray-100 whitespace-nowrap"
               >
                 {link.title}
                 {link.external && (
-                  <ExternalLink className="h-3 w-3 text-gray-500 dark:text-gray-400" />
+                  <ExternalLink className="h-4 w-4 text-blue-500 dark:text-blue-400" />
                 )}
               </Link>
             ))}

components/Link.tsx

@@ -10,7 +10,8 @@ const CustomLink = ({
 }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement> & { external?: boolean }) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
-  const isExternalLink = external || (href && (href.startsWith('http://') || href.startsWith('https://')))
+  const isExternalLink =
+    external || (href && (href.startsWith('http://') || href.startsWith('https://')))
 
   if (isInternalLink) {
     return <Link className="break-words" href={href} {...rest} />

components/MobileNav.tsx

@@ -29,7 +29,7 @@ const MobileNav = () => {
 
   return (
     <>
-      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="lg:hidden">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
@@ -77,7 +77,7 @@ const MobileNav = () => {
                   <Link
                     key={link.title}
                     href={link.href}
-                    className="flex items-center gap-2 mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+                    className="hover:text-primary-500 dark:hover:text-primary-400 mb-4 flex items-center gap-2 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 dark:text-gray-100"
                     onClick={onToggleNav}
                   >
                     {link.title}

components/social-icons/icons.tsx

@@ -96,7 +96,7 @@ export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
 
 export function ExternalLink(svgProps: SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...svgProps}>
       <title>External Link</title>
       <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
     </svg>

data/headerNavLinks.ts

@@ -1,8 +1,8 @@
 const headerNavLinks = [
   { href: '/', title: 'Home' },
   { href: '/blog', title: 'Blog' },
-  // { href: '/about', title: 'About' },
   { href: '/tags', title: 'Tags' },
+  { href: '/about', title: 'About' },
   { href: 'https://education.ditectrev.com', title: 'Education', external: true },
   { href: 'https://apps.apple.com/app/cloudmaster-swift/id6503601139', title: 'iOS App', external: true },
   { href: 'https://shop.ditectrev.com/', title: 'Shop', external: true },