@marcwelti/mw-ui 0.1.7 → 0.1.9

package/dist/index.js

@@ -1403,7 +1403,7 @@ function SocialIcons() {
       href: link.url,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "p-1.5 text-muted-foreground hover:text-foreground transition-colors",
+      className: "p-1.5 text-foreground hover:text-muted-foreground transition-colors",
       title: link.name,
       children: /* @__PURE__ */ jsxRuntime.jsx(link.icon, { className: "h-[18px] w-[18px]" })
     },
@@ -1418,31 +1418,51 @@ var PUBLIC_NAV_LINKS = [
   { label: "Blog", href: "/blog" },
   { label: "FAQ", href: "/faq" }
 ];
-function NavDropdown({ label, isActive, items }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        intent: "ghost",
-        size: "sm",
-        className: cn(
-          "gap-1 font-medium hover:bg-transparent hover:text-current text-base",
-          isActive && "text-brand-gold"
-        ),
-        children: [
-          label,
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", className: "w-80 p-2", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "focus:bg-muted/50 focus:text-current hover:bg-muted/50 mb-1 last:mb-0 gap-0", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: item.href, className: "cursor-pointer flex flex-col gap-1 p-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm leading-5", children: item.label })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground w-full", children: item.description })
-    ] }) }, index)) })
-  ] });
+function NavDropdown({ label, isActive, items, baseUrl, openKey, onHover, dropdownKey }) {
+  const isOpen = openKey === dropdownKey;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative",
+      onMouseEnter: () => onHover(dropdownKey),
+      onMouseLeave: () => onHover(null),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: baseUrl,
+              className: cn(
+                "inline-flex items-center gap-1 rounded-md px-3 h-9 text-base font-medium transition-colors hover:bg-transparent hover:text-current",
+                isActive && "text-brand-gold"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+            "h-4 w-4 transition-transform duration-150",
+            isOpen && "rotate-180",
+            isActive && "text-brand-gold"
+          ) })
+        ] }),
+        isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 pt-1 z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-80 rounded-md border border-border bg-popover p-2 shadow-lg animate-in fade-in-0 zoom-in-95 duration-100", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: item.href,
+            className: "flex flex-col gap-1 p-3 rounded-md cursor-pointer hover:bg-muted/50 transition-colors mb-1 last:mb-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 w-full", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm leading-5 text-popover-foreground", children: item.label })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground w-full", children: item.description })
+            ]
+          },
+          index
+        )) }) })
+      ]
+    }
+  );
 }
 function NavigationBar({
   currentApp,
@@ -1457,6 +1477,7 @@ function NavigationBar({
 }) {
   const { theme, setTheme, systemTheme } = nextThemes.useTheme();
   const [mounted, setMounted] = React27__namespace.useState(false);
+  const [activeDropdown, setActiveDropdown] = React27__namespace.useState(null);
   React27__namespace.useEffect(() => {
     setMounted(true);
   }, []);
@@ -1471,6 +1492,7 @@ function NavigationBar({
     {
       key: "booking",
       label: "Booking",
+      baseUrl: bookingBaseUrl,
       items: [
         { label: "Book a call", description: "Schedule a phone consultation", href: `${bookingBaseUrl}/call`, icon: lucideReact.Phone },
         { label: "Book a private lesson", description: "One-on-one training session", href: `${bookingBaseUrl}/private-lesson`, icon: lucideReact.UserRound },
@@ -1481,6 +1503,7 @@ function NavigationBar({
     {
       key: "academy",
       label: "Academy",
+      baseUrl: academyBaseUrl,
       items: [
         { label: "Academy Information", description: "Learn about our online dog training courses", href: `${academyBaseUrl}/`, icon: lucideReact.GraduationCap },
         { label: "Courses", description: "Browse and access available courses", href: `${academyBaseUrl}/courses`, icon: lucideReact.BookOpen },
@@ -1490,6 +1513,7 @@ function NavigationBar({
     {
       key: "training",
       label: "Training",
+      baseUrl: trainingBaseUrl,
       items: [
         { label: "Dog Commands", description: "View and manage trained commands", href: `${trainingBaseUrl}/commands`, icon: lucideReact.Dog },
         { label: "Dog Progress", description: "Track your dog's training progress", href: `${trainingBaseUrl}/progress`, icon: lucideReact.TrendingUp },
@@ -1500,6 +1524,7 @@ function NavigationBar({
     {
       key: "achievements",
       label: "Achievements",
+      baseUrl: achievementsBaseUrl,
       items: [
         { label: "Journey", description: "View your training journey and milestones", href: `${achievementsBaseUrl}/journey`, icon: lucideReact.Map },
         { label: "Next Task", description: "See your next recommended task", href: `${achievementsBaseUrl}/next-task`, icon: lucideReact.ListTodo }
@@ -1521,23 +1546,33 @@ function NavigationBar({
           navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             NavDropdown,
             {
+              dropdownKey: item.key,
               label: item.label,
               isActive: currentApp === item.key,
-              items: item.items
+              items: item.items,
+              baseUrl: item.baseUrl,
+              openKey: activeDropdown,
+              onHover: setActiveDropdown
             },
             item.key
           ))
         ) : (
           /* Logged-out: Public page links */
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-5", children: PUBLIC_NAV_LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
-            {
-              href: link.href,
-              className: "text-sm font-medium text-foreground/80 hover:text-foreground transition-colors underline underline-offset-4 decoration-foreground/30 hover:decoration-foreground/60",
-              children: link.label
-            },
-            link.href
-          )) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-5", children: PUBLIC_NAV_LINKS.map((link) => {
+            const isActive = mounted && typeof window !== "undefined" && window.location.pathname === link.href;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: link.href,
+                className: cn(
+                  "text-sm font-medium transition-colors",
+                  isActive ? "text-foreground underline underline-offset-4 decoration-foreground/60" : "text-foreground/70 hover:text-foreground"
+                ),
+                children: link.label
+              },
+              link.href
+            );
+          }) })
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/", className: "flex items-center absolute left-1/2 transform -translate-x-1/2", children: mounted ? /* @__PURE__ */ jsxRuntime.jsx(
           "img",
@@ -1560,7 +1595,6 @@ function NavigationBar({
               /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => onLanguageChange?.("DE"), children: "Deutsch" })
             ] })
           ] }),
-          isLoggedIn && /* Theme Toggle – only for logged-in */
           /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {