matrix-design-system 1.1.0 → 2.0.0

package/dist/organism/menu/menu.mjs

@@ -57,302 +57,164 @@ const panelVariants = {
 		}
 	}
 };
+const noPinnedPaths = [];
+const isDropdown = (entry) => "groups" in entry;
 const Menu = (t0) => {
-	const $ = c(65);
-	const { navHrefs, onPaletteTrigger, tracking, linkComponent, currentPath } = t0;
-	let t1;
+	const $ = c(36);
+	const { entries, pinnedOnPaths: t1, onPaletteTrigger, linkComponent, currentPath } = t0;
+	const pinnedOnPaths = t1 === void 0 ? noPinnedPaths : t1;
+	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { noScale: true };
-		$[0] = t1;
-	} else t1 = $[0];
-	const { glassmorphismClass } = useGlassmorphism(t1);
-	const { state, effects } = useMenuStore(currentPath, navHrefs.chat, onPaletteTrigger, tracking);
-	const { pathname, shouldHideMenu, shouldOpenMenu, modifierKey } = state;
-	const { openMenu, closeMenu, handlePaletteTrigger, onClickHome, onClickBlog, onClickBlogAuthors, onClickBlogTags, onClickBlogArchive, onClickBlogStats, onClickDsaRoadmap, onClickDsaExercises, onClickChat, onClickMcp, onClickMatrixRain, onClickEasterEggHunt, onClickAboutMe, onClickArt, onClickVideogames, onClickContact } = effects;
+		t2 = { noScale: true };
+		$[0] = t2;
+	} else t2 = $[0];
+	const { glassmorphismClass } = useGlassmorphism(t2);
+	const { state, effects } = useMenuStore(currentPath, pinnedOnPaths, onPaletteTrigger);
+	const { shouldHideMenu, shouldOpenMenu, modifierKey } = state;
+	const { openMenu, closeMenu, handlePaletteTrigger, handleLinkClick, isSelected } = effects;
 	const baseClassName = _temp;
 	const dropdownClassName = _temp2;
-	let t2;
-	if ($[1] !== linkComponent || $[2] !== navHrefs.aboutMe || $[3] !== navHrefs.art || $[4] !== navHrefs.blog || $[5] !== navHrefs.blogArchive || $[6] !== navHrefs.blogAuthor || $[7] !== navHrefs.blogAuthors || $[8] !== navHrefs.blogStats || $[9] !== navHrefs.blogTags || $[10] !== navHrefs.chat || $[11] !== navHrefs.contact || $[12] !== navHrefs.dsaExercises || $[13] !== navHrefs.dsaRoadmap || $[14] !== navHrefs.easterEggHunt || $[15] !== navHrefs.mcp || $[16] !== navHrefs.videogames || $[17] !== onClickAboutMe || $[18] !== onClickArt || $[19] !== onClickBlog || $[20] !== onClickBlogArchive || $[21] !== onClickBlogAuthors || $[22] !== onClickBlogStats || $[23] !== onClickBlogTags || $[24] !== onClickChat || $[25] !== onClickContact || $[26] !== onClickDsaExercises || $[27] !== onClickDsaRoadmap || $[28] !== onClickEasterEggHunt || $[29] !== onClickHome || $[30] !== onClickMatrixRain || $[31] !== onClickMcp || $[32] !== onClickVideogames || $[33] !== pathname) {
-		t2 = (isMobile_1) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx(MenuItem, {
-				linkComponent,
-				className: baseClassName(isMobile_1),
-				to: "/",
-				selected: pathname === "/",
-				onClick: onClickHome,
-				children: "Home"
-			}, `home-${isMobile_1 ? "mobile" : "desktop"}`),
-			/* @__PURE__ */ jsx(DropdownMenu, {
+	let t3;
+	if ($[1] !== entries || $[2] !== handleLinkClick || $[3] !== isSelected || $[4] !== linkComponent) {
+		t3 = (isMobile_1) => /* @__PURE__ */ jsx(Fragment, { children: entries.map((entry) => {
+			const key = `${entry.label}-${isMobile_1 ? "mobile" : "desktop"}`;
+			if (isDropdown(entry)) return /* @__PURE__ */ jsx(DropdownMenu, {
 				linkComponent,
-				label: "Blog",
+				label: entry.label,
 				className: dropdownClassName(isMobile_1),
-				items: [
-					{
-						label: "Posts",
-						items: [{
-							label: "Latest posts",
-							to: navHrefs.blog,
-							selected: pathname === navHrefs.blog,
-							onClick: onClickBlog
-						}, {
-							label: "Archive",
-							to: navHrefs.blogArchive,
-							selected: pathname === navHrefs.blogArchive,
-							onClick: onClickBlogArchive
-						}]
-					},
-					{
-						label: "Discovery",
-						items: [{
-							label: "Authors",
-							to: navHrefs.blogAuthors,
-							selected: pathname === navHrefs.blogAuthors || pathname.startsWith(`${navHrefs.blogAuthor}/`),
-							onClick: onClickBlogAuthors
-						}, {
-							label: "Tags",
-							to: navHrefs.blogTags,
-							selected: pathname === navHrefs.blogTags,
-							onClick: onClickBlogTags
-						}]
-					},
-					{
-						label: "Insights",
-						items: [{
-							label: "Stats",
-							to: navHrefs.blogStats,
-							selected: pathname === navHrefs.blogStats,
-							onClick: onClickBlogStats
-						}]
-					}
-				]
-			}, `blog-${isMobile_1 ? "mobile" : "desktop"}`),
-			/* @__PURE__ */ jsx(DropdownMenu, {
+				items: entry.groups.map((group) => ({
+					label: group.label,
+					items: group.items.map((link) => ({
+						label: link.label,
+						to: link.to,
+						external: link.external,
+						selected: isSelected(link),
+						onClick: handleLinkClick(link.onClick)
+					}))
+				}))
+			}, key);
+			return /* @__PURE__ */ jsx(MenuItem, {
 				linkComponent,
-				label: "Explore",
-				className: dropdownClassName(isMobile_1),
-				items: [
-					{
-						label: "DSA",
-						items: [{
-							label: "Roadmap",
-							to: navHrefs.dsaRoadmap,
-							selected: pathname === navHrefs.dsaRoadmap,
-							onClick: onClickDsaRoadmap
-						}, {
-							label: "Exercises",
-							to: navHrefs.dsaExercises,
-							selected: pathname === navHrefs.dsaExercises,
-							onClick: onClickDsaExercises
-						}]
-					},
-					{
-						label: "Artificial Intelligence",
-						items: [{
-							label: "Chat",
-							to: navHrefs.chat,
-							selected: pathname === navHrefs.chat,
-							onClick: onClickChat
-						}, {
-							label: "MCP",
-							to: navHrefs.mcp,
-							selected: pathname === navHrefs.mcp,
-							onClick: onClickMcp
-						}]
-					},
-					{
-						label: "Computer Graphics",
-						items: [{
-							label: "Matrix Rain",
-							to: "https://chicio.github.io/matrix-rain-webgpu/",
-							external: true,
-							onClick: onClickMatrixRain
-						}]
-					},
-					{
-						label: "Secrets",
-						items: [{
-							label: "Easter eggs",
-							to: navHrefs.easterEggHunt,
-							selected: pathname === navHrefs.easterEggHunt,
-							onClick: onClickEasterEggHunt
-						}]
-					}
-				]
-			}),
-			/* @__PURE__ */ jsx(DropdownMenu, {
-				linkComponent,
-				label: "The Author",
-				className: dropdownClassName(isMobile_1),
-				items: [{
-					label: "Profile",
-					items: [{
-						label: "About me",
-						to: navHrefs.aboutMe,
-						selected: pathname === navHrefs.aboutMe,
-						onClick: onClickAboutMe
-					}, {
-						label: "Contact me",
-						to: navHrefs.contact,
-						selected: pathname === navHrefs.contact,
-						onClick: onClickContact
-					}]
-				}, {
-					label: "Hobbies",
-					items: [{
-						label: "Art",
-						to: navHrefs.art,
-						selected: pathname === navHrefs.art,
-						onClick: onClickArt
-					}, {
-						label: "Videogames",
-						to: navHrefs.videogames,
-						selected: pathname === navHrefs.videogames,
-						onClick: onClickVideogames
-					}]
-				}]
-			})
-		] });
-		$[1] = linkComponent;
-		$[2] = navHrefs.aboutMe;
-		$[3] = navHrefs.art;
-		$[4] = navHrefs.blog;
-		$[5] = navHrefs.blogArchive;
-		$[6] = navHrefs.blogAuthor;
-		$[7] = navHrefs.blogAuthors;
-		$[8] = navHrefs.blogStats;
-		$[9] = navHrefs.blogTags;
-		$[10] = navHrefs.chat;
-		$[11] = navHrefs.contact;
-		$[12] = navHrefs.dsaExercises;
-		$[13] = navHrefs.dsaRoadmap;
-		$[14] = navHrefs.easterEggHunt;
-		$[15] = navHrefs.mcp;
-		$[16] = navHrefs.videogames;
-		$[17] = onClickAboutMe;
-		$[18] = onClickArt;
-		$[19] = onClickBlog;
-		$[20] = onClickBlogArchive;
-		$[21] = onClickBlogAuthors;
-		$[22] = onClickBlogStats;
-		$[23] = onClickBlogTags;
-		$[24] = onClickChat;
-		$[25] = onClickContact;
-		$[26] = onClickDsaExercises;
-		$[27] = onClickDsaRoadmap;
-		$[28] = onClickEasterEggHunt;
-		$[29] = onClickHome;
-		$[30] = onClickMatrixRain;
-		$[31] = onClickMcp;
-		$[32] = onClickVideogames;
-		$[33] = pathname;
-		$[34] = t2;
-	} else t2 = $[34];
-	const renderMenuItems = t2;
-	const t3 = `menu-container container-fixed fixed right-0 left-0 z-50 my-3 ${shouldOpenMenu ? "xs:block hidden" : ""}`;
-	const t4 = shouldHideMenu ? "hidden" : "visible";
-	const t5 = `${glassmorphismClass} sm:overflow-visible flex-row xs:py-0 xs:pt-0 m-0 my-0 flex min-h-16 items-center gap-1 overflow-hidden px-2`;
-	let t6;
-	if ($[35] !== renderMenuItems) {
-		t6 = renderMenuItems(false);
-		$[35] = renderMenuItems;
-		$[36] = t6;
-	} else t6 = $[36];
+				className: baseClassName(isMobile_1),
+				to: entry.to,
+				external: entry.external,
+				selected: isSelected(entry),
+				onClick: handleLinkClick(entry.onClick),
+				children: entry.label
+			}, key);
+		}) });
+		$[1] = entries;
+		$[2] = handleLinkClick;
+		$[3] = isSelected;
+		$[4] = linkComponent;
+		$[5] = t3;
+	} else t3 = $[5];
+	const renderMenuItems = t3;
+	const t4 = `menu-container container-fixed fixed right-0 left-0 z-50 my-3 ${shouldOpenMenu ? "xs:block hidden" : ""}`;
+	const t5 = shouldHideMenu ? "hidden" : "visible";
+	const t6 = `${glassmorphismClass} xs:py-0 xs:pt-0 m-0 my-0 flex min-h-16 flex-row items-center gap-1 overflow-hidden px-2 sm:overflow-visible`;
 	let t7;
-	if ($[37] !== openMenu || $[38] !== shouldOpenMenu) {
-		t7 = !shouldOpenMenu && /* @__PURE__ */ jsx("div", {
+	if ($[6] !== renderMenuItems) {
+		t7 = renderMenuItems(false);
+		$[6] = renderMenuItems;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== openMenu || $[9] !== shouldOpenMenu) {
+		t8 = !shouldOpenMenu && /* @__PURE__ */ jsx("div", {
 			className: "sm:hidden",
 			children: /* @__PURE__ */ jsx(HamburgerMenu, { onClick: openMenu })
 		});
-		$[37] = openMenu;
-		$[38] = shouldOpenMenu;
-		$[39] = t7;
-	} else t7 = $[39];
-	let t8;
+		$[8] = openMenu;
+		$[9] = shouldOpenMenu;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t10;
 	let t9;
-	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(BiSearchAlt, { className: "size-3.5 shrink-0 text-accent group-hover:text-accent transition-colors duration-200" });
-		t9 = /* @__PURE__ */ jsx("span", {
-			className: "hidden md:block flex-1 text-left font-mono text-sm leading-none text-accent/40 group-hover:text-accent/60 transition-colors duration-200",
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(BiSearchAlt, { className: "text-accent group-hover:text-accent size-3.5 shrink-0 transition-colors duration-200" });
+		t10 = /* @__PURE__ */ jsx("span", {
+			className: "text-accent/40 group-hover:text-accent/60 hidden flex-1 text-left font-mono text-sm leading-none transition-colors duration-200 md:block",
 			children: "Search..."
 		});
-		$[40] = t8;
-		$[41] = t9;
+		$[11] = t10;
+		$[12] = t9;
 	} else {
-		t8 = $[40];
-		t9 = $[41];
+		t10 = $[11];
+		t9 = $[12];
 	}
-	let t10;
-	if ($[42] !== modifierKey) {
-		t10 = modifierKey !== null && /* @__PURE__ */ jsxs("span", {
-			className: "hidden md:inline-flex items-center gap-1",
+	let t11;
+	if ($[13] !== modifierKey) {
+		t11 = modifierKey !== null && /* @__PURE__ */ jsxs("span", {
+			className: "hidden items-center gap-1 md:inline-flex",
 			children: [
 				/* @__PURE__ */ jsx("kbd", {
-					className: "inline-flex items-center justify-center size-6 rounded font-mono text-sm leading-none border border-accent/50 text-accent/70 group-hover:border-accent group-hover:text-accent transition-colors duration-200",
+					className: "border-accent/50 text-accent/70 group-hover:border-accent group-hover:text-accent inline-flex size-6 items-center justify-center rounded border font-mono text-sm leading-none transition-colors duration-200",
 					children: modifierKey === "meta" ? /* @__PURE__ */ jsx(LuCommand, { className: "size-3" }) : /* @__PURE__ */ jsx(ImCtrl, { className: "size-3" })
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "font-mono text-sm leading-none text-accent/70 group-hover:text-accent transition-colors duration-200",
+					className: "text-accent/70 group-hover:text-accent font-mono text-sm leading-none transition-colors duration-200",
 					children: "+"
 				}),
 				/* @__PURE__ */ jsx("kbd", {
-					className: "inline-flex items-center justify-center size-6 rounded font-mono text-base leading-none border border-accent/50 text-accent/70 group-hover:border-accent group-hover:text-accent transition-colors duration-200",
+					className: "border-accent/50 text-accent/70 group-hover:border-accent group-hover:text-accent inline-flex size-6 items-center justify-center rounded border font-mono text-base leading-none transition-colors duration-200",
 					children: "K"
 				})
 			]
 		});
-		$[42] = modifierKey;
-		$[43] = t10;
-	} else t10 = $[43];
-	let t11;
-	if ($[44] !== handlePaletteTrigger || $[45] !== t10) {
-		t11 = /* @__PURE__ */ jsxs("button", {
-			className: "ml-auto sm:mr-3 group flex items-center gap-2 px-3 py-1.5 w-auto md:w-60 rounded-lg border border-accent bg-accent/10 hover:border-accent hover:bg-accent/20 transition-all duration-200 cursor-pointer min-h-10",
+		$[13] = modifierKey;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== handlePaletteTrigger || $[16] !== t11) {
+		t12 = /* @__PURE__ */ jsxs("button", {
+			className: "group border-accent bg-accent/10 hover:border-accent hover:bg-accent/20 ml-auto flex min-h-10 w-auto cursor-pointer items-center gap-2 rounded-lg border px-3 py-1.5 transition-all duration-200 sm:mr-3 md:w-60",
 			onClick: handlePaletteTrigger,
 			"aria-label": "Open command palette",
 			children: [
-				t8,
 				t9,
-				t10
+				t10,
+				t11
 			]
 		});
-		$[44] = handlePaletteTrigger;
-		$[45] = t10;
-		$[46] = t11;
-	} else t11 = $[46];
-	let t12;
-	if ($[47] !== t11 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7) {
-		t12 = /* @__PURE__ */ jsxs("div", {
-			className: t5,
+		$[15] = handlePaletteTrigger;
+		$[16] = t11;
+		$[17] = t12;
+	} else t12 = $[17];
+	let t13;
+	if ($[18] !== t12 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
 			children: [
-				t6,
 				t7,
-				t11
+				t8,
+				t12
 			]
 		});
-		$[47] = t11;
-		$[48] = t5;
-		$[49] = t6;
-		$[50] = t7;
-		$[51] = t12;
-	} else t12 = $[51];
-	let t13;
-	if ($[52] !== t12 || $[53] !== t3 || $[54] !== t4) {
-		t13 = /* @__PURE__ */ jsx(MotionDiv, {
-			className: t3,
+		$[18] = t12;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t13 || $[24] !== t4 || $[25] !== t5) {
+		t14 = /* @__PURE__ */ jsx(MotionDiv, {
+			className: t4,
 			variants: menuVariants,
-			animate: t4,
+			animate: t5,
 			initial: "visible",
-			children: t12
+			children: t13
 		});
-		$[52] = t12;
-		$[53] = t3;
-		$[54] = t4;
-		$[55] = t13;
-	} else t13 = $[55];
-	let t14;
-	if ($[56] !== closeMenu || $[57] !== renderMenuItems || $[58] !== shouldOpenMenu) {
-		t14 = shouldOpenMenu && /* @__PURE__ */ jsx(MotionDiv, {
-			className: "sm:hidden bg-black-alpha-75 fixed top-0 left-0 z-50 h-full w-full touch-pan-y overflow-y-auto backdrop-blur-sm",
+		$[23] = t13;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== closeMenu || $[28] !== renderMenuItems || $[29] !== shouldOpenMenu) {
+		t15 = shouldOpenMenu && /* @__PURE__ */ jsx(MotionDiv, {
+			className: "bg-black-alpha-75 fixed top-0 left-0 z-50 h-full w-full touch-pan-y overflow-y-auto backdrop-blur-sm sm:hidden",
 			style: { willChange: "transform" },
 			variants: panelVariants,
 			initial: "closed",
@@ -366,25 +228,25 @@ const Menu = (t0) => {
 				}), renderMenuItems(true)]
 			})
 		});
-		$[56] = closeMenu;
-		$[57] = renderMenuItems;
-		$[58] = shouldOpenMenu;
-		$[59] = t14;
-	} else t14 = $[59];
-	let t15;
-	if ($[60] !== t14) {
-		t15 = /* @__PURE__ */ jsx(AnimatePresence, { children: t14 });
-		$[60] = t14;
-		$[61] = t15;
-	} else t15 = $[61];
+		$[27] = closeMenu;
+		$[28] = renderMenuItems;
+		$[29] = shouldOpenMenu;
+		$[30] = t15;
+	} else t15 = $[30];
 	let t16;
-	if ($[62] !== t13 || $[63] !== t15) {
-		t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t13, t15] });
-		$[62] = t13;
-		$[63] = t15;
-		$[64] = t16;
-	} else t16 = $[64];
-	return t16;
+	if ($[31] !== t15) {
+		t16 = /* @__PURE__ */ jsx(AnimatePresence, { children: t15 });
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t14 || $[34] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t14, t16] });
+		$[33] = t14;
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	return t17;
 };
 function _temp(isMobile) {
 	return isMobile ? "mb-2 w-80" : "hidden sm:flex xs:mb-0 xs:w-auto";