Merge pull request #124 from SSWConsulting/youtube-and-docs-links

Add YouTube and Docs conditional links
SSWConsulting · Feb 18, 2025 · 8f2c19c · 8f2c19c
2 parents c4934a5 + 192515b
commit 8f2c19c
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 35 deletions.
diff --git a/lib/components/SubMenuGroup/SubMenuGroup.tsx b/lib/components/SubMenuGroup/SubMenuGroup.tsx
@@ -116,49 +116,71 @@ const MenuItem: React.FC<{
 };
 
 const LinkItem: React.FC<{ link: NavMenuColumnGroupItem }> = ({
-  link: { name, url, description, icon, iconImg },
+  link: {
+    name,
+    url,
+    description,
+    icon,
+    iconImg,
+    youtubeLink,
+    documentationLink,
+  },
 }) => {
   const close = useContext(ClosePopoverContext);
   const CustomLink = useLinkComponent();
 
   return (
-    <CustomLink
-      href={url || ""}
-      className={cx(
-        "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none",
-        description ? "p-4" : "p-2",
-      )}
-      onClick={() => {
-        if (close) close();
-      }}
-    >
-      {(icon || iconImg) && (
-        <div className="flex shrink-0 items-center justify-center text-ssw-red">
-          <MegaIcon
-            className="h-6 w-6"
-            icon={icon as AvailableIcons}
-            iconImg={iconImg}
-          />
-        </div>
-      )}
+    <div>
+      <CustomLink
+        href={url || ""}
+        className={cx(
+          "flex items-start gap-x-1 text-ssw-black hover:text-ssw-red focus:outline-none",
+          description ? "p-4" : "p-2",
+        )}
+        onClick={() => {
+          if (close) close();
+        }}
+      >
+        {(icon || iconImg) && (
+          <div className="flex shrink-0 items-center justify-center text-ssw-red">
+            <MegaIcon
+              className="h-6 w-6"
+              icon={icon as AvailableIcons}
+              iconImg={iconImg}
+            />
+          </div>
+        )}
 
-      <div className="min-w-0 flex-1">
-        <span>
-          {name && description ? (
-            <>
-              <p className="font-bold">{name}</p>
-              <p className="mt-1 text-sm font-normal text-ssw-gray">
-                {description}
+        <div className="min-w-0 flex-1">
+          <span>
+            {name && description ? (
+              <>
+                <p className="font-bold">{name}</p>
+                <p className="mt-1 text-sm font-normal text-ssw-gray">
+                  {description}
+                </p>
+              </>
+            ) : (
+              <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red">
+                {name}
               </p>
-            </>
-          ) : (
-            <p className="pl-2 text-sm font-normal text-ssw-black hover:text-ssw-red">
-              {name}
-            </p>
-          )}
-        </span>
+            )}
+          </span>
+        </div>
+      </CustomLink>
+      <div className="ml-10 flex flex-row gap-x-4 text-sm font-light text-ssw-gray">
+        {youtubeLink && (
+          <CustomLink href={youtubeLink} className="hover:text-ssw-red">
+            YouTube
+          </CustomLink>
+        )}
+        {documentationLink && (
+          <CustomLink href={documentationLink} className="hover:text-ssw-red">
+            Docs
+          </CustomLink>
+        )}
       </div>
-    </CustomLink>
+    </div>
   );
 };
 

diff --git a/lib/types/megamenu.ts b/lib/types/megamenu.ts
@@ -31,6 +31,8 @@ export interface NavMenuColumnGroupItem {
   description?: string;
   icon?: AvailableIcons | string;
   iconImg?: string;
+  youtubeLink?: string;
+  documentationLink?: string;
 }
 
 export interface Sidebar {