@solidxai/core-ui 0.1.5-beta.8 → 0.1.6

package/dist/components/layout/SolidAiStudioLayout.tsx

@@ -0,0 +1,333 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useLocation } from "react-router-dom";
+// import { SolidAiChat } from "../core/solid-ai/SolidAiChat";
+import { exitStudioMode, setStudioView, type StudioView } from "../../redux/features/solidStudioSlice";
+import { useSession } from "../../hooks/useSession";
+import { signOut } from "../../adapters/auth/index";
+import { createPortal } from "react-dom";
+import { enableStudioMode, disableStudioMode } from "../../helpers/studioSandbox";
+import { env } from "../../adapters/env";
+
+const HEADER_HEIGHT = "44px";
+const PANEL_WIDTH_DEFAULT = 420;
+
+// ── Icons ──────────────────────────────────────────────────────────────────────
+
+const StudioIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <path d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z" stroke="currentColor" strokeWidth="1.4" />
+    <path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M8 2V1M8 15v-1M1 8H0M16 8h-1" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+  </svg>
+);
+
+const PanelOpenIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <rect x="1" y="1" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.3" />
+    <path d="M10 1v14" stroke="currentColor" strokeWidth="1.3" />
+    <path d="M12.5 6l1.5 2-1.5 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const PanelCloseIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <rect x="1" y="1" width="14" height="14" rx="2.5" stroke="currentColor" strokeWidth="1.3" />
+    <path d="M10 1v14" stroke="currentColor" strokeWidth="1.3" />
+    <path d="M13.5 6L12 8l1.5 2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const DotsIcon = () => (
+  <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <circle cx="8" cy="3" r="1.3" />
+    <circle cx="8" cy="8" r="1.3" />
+    <circle cx="8" cy="13" r="1.3" />
+  </svg>
+);
+
+const ExitStudioIcon = () => (
+  <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+    <path d="M9.5 4.5 5 9M5 4.5l4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <rect x="1" y="1" width="12" height="12" rx="3" stroke="currentColor" strokeWidth="1.2" />
+  </svg>
+);
+
+const PreviewIcon = () => (
+  <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+    <path d="M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
+    <circle cx="7" cy="7" r="1.8" stroke="currentColor" strokeWidth="1.3" />
+  </svg>
+);
+
+const LogoutIcon = () => (
+  <svg width="13" height="13" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+    <path d="M5 2H2.5A1.5 1.5 0 0 0 1 3.5v7A1.5 1.5 0 0 0 2.5 12H5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+    <path d="M9 4l3 3-3 3M12 7H5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ChatIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </svg>
+);
+
+// ── SolidStudio ────────────────────────────────────────────────────────────────
+// Single component that renders both the Studio header and the AI panel.
+// Mount this ONCE at the app root via AppEventListener.
+// When studio mode is off it renders nothing.
+
+export function SolidStudio() {
+  const isStudioMode = useSelector((state: any) => state.solidStudio?.isStudioMode ?? false);
+  const studioView = useSelector((state: any) => state.solidStudio?.studioView ?? null) as StudioView;
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { pathname, search } = useLocation();
+  const isOnStudioPage = pathname === "/studio";
+  const isPreviewMode = new URLSearchParams(search).get("preview") === "true" || (typeof sessionStorage !== "undefined" && sessionStorage.getItem("solid-preview") === "true");
+  const isPreviewable = !isOnStudioPage && pathname !== "/landing";
+  const { status } = useSession();
+  const isAuthenticated = status === "authenticated";
+  const [isPanelOpen, setIsPanelOpen] = useState(true);
+  const [panelWidth] = useState(PANEL_WIDTH_DEFAULT);
+  const [isDragging] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close the 3-dot menu when clicking outside
+  useEffect(() => {
+    if (!isMenuOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isMenuOpen]);
+
+  // Apply sandbox wrapper isolating app root so all fixed/sticky elements shift correctly
+  useEffect(() => {
+    const active = isStudioMode && isAuthenticated && !isPreviewMode;
+
+    if (active) {
+      enableStudioMode();
+    } else {
+      disableStudioMode();
+    }
+
+    // CSS variable consumed by sidebar, hotspot, admin-header, shell, main
+    document.documentElement.style.setProperty(
+      "--solid-studio-header-height",
+      active ? HEADER_HEIGHT : "0px"
+    );
+
+    return () => {
+      disableStudioMode();
+      document.documentElement.style.setProperty("--solid-studio-header-height", "0px");
+    };
+  }, [isStudioMode, isAuthenticated, isPreviewMode]);
+
+  // const onDragStart = useCallback((e: React.MouseEvent) => {
+  //   e.preventDefault();
+  //   dragStartX.current = e.clientX;
+  //   dragStartWidth.current = panelWidth;
+  //   setIsDragging(true);
+  //   const onMove = (ev: MouseEvent) => {
+  //     const delta = dragStartX.current - ev.clientX;
+  //     const next = Math.min(PANEL_WIDTH_MAX, Math.max(PANEL_WIDTH_MIN, dragStartWidth.current + delta));
+  //     setPanelWidth(next);
+  //   };
+  //   const onUp = () => {
+  //     setIsDragging(false);
+  //     window.removeEventListener("mousemove", onMove);
+  //     window.removeEventListener("mouseup", onUp);
+  //   };
+  //   window.addEventListener("mousemove", onMove);
+  //   window.addEventListener("mouseup", onUp);
+  // }, [panelWidth]);
+
+  // Auto-exit studio if the user logs out
+  useEffect(() => {
+    if (status === "unauthenticated" && isStudioMode) {
+      dispatch(exitStudioMode());
+    }
+  }, [status, isStudioMode, dispatch]);
+
+  if (!isStudioMode || !isAuthenticated || isPreviewMode) return null;
+
+  const handleExit = () => {
+    setIsMenuOpen(false);
+    dispatch(exitStudioMode());
+    navigate("/studio");
+  };
+
+  const handleLogout = () => {
+    setIsMenuOpen(false);
+    dispatch(exitStudioMode());
+    signOut({ callbackUrl: "/auth/login" });
+  };
+
+  const handleViewSwitch = (view: StudioView) => {
+    dispatch(setStudioView(view));
+    navigate(view === "backend" ? "/admin" : "/landing");
+  };
+
+  const studioUI = (
+    <div style={{ zIndex: "var(--z-studio)", position: "fixed", top: 0, left: 0, right: 0 }}>
+      {/* ── Studio global header ─────────────────────────────────────────────── */}
+      <div className="solid-studio-header">
+        <button
+          type="button"
+          className="solid-studio-header-brand"
+          onClick={() => navigate("/studio")}
+          title="Go to Studio home"
+        >
+          <StudioIcon />
+          <span>SolidX Studio</span>
+          <span className="solid-studio-bar-badge">BETA</span>
+        </button>
+
+        <nav className="solid-studio-header-nav">
+          <button
+            type="button"
+            className={`solid-studio-view-btn${studioView === "backend" ? " active" : ""}`}
+            onClick={() => handleViewSwitch("backend")}
+          >
+            Backend
+          </button>
+          <button
+            type="button"
+            className={`solid-studio-view-btn${studioView === "frontend" ? " active" : ""}`}
+            onClick={() => handleViewSwitch("frontend")}
+          >
+            Frontend
+          </button>
+        </nav>
+
+        <div className="solid-studio-header-actions">
+          {/* <button
+            type="button"
+            className="solid-studio-panel-toggle-btn"
+            onClick={() => setIsPanelOpen((o) => !o)}
+            title={isPanelOpen ? "Collapse AI panel" : "Expand AI panel"}
+          >
+            {isPanelOpen ? <PanelCloseIcon /> : <PanelOpenIcon />}
+          </button> */}
+
+          {/* ── 3-dot menu ─────────────────────────────────────────────────── */}
+          <div className="solid-studio-menu" ref={menuRef}>
+            <button
+              type="button"
+              className="solid-studio-menu-trigger"
+              onClick={() => setIsMenuOpen((o) => !o)}
+              title="More options"
+            >
+              <DotsIcon />
+            </button>
+            {isMenuOpen && (
+              <div className="solid-studio-menu-dropdown">
+                {isPreviewable && (
+                  <button
+                    type="button"
+                    className="solid-studio-menu-item"
+                    onClick={() => {
+                      setIsMenuOpen(false);
+                      const params = new URLSearchParams(search);
+                      params.set("preview", "true");
+                      window.open(`${pathname}?${params.toString()}`, "_blank");
+                    }}
+                  >
+                    <PreviewIcon />
+                    Preview page
+                  </button>
+                )}
+                {/* {!isOnStudioPage && (
+                  <button type="button" className="solid-studio-menu-item" onClick={handleExit}>
+                    <ExitStudioIcon />
+                    Exit Studio
+                  </button>
+                )} */}
+                <button type="button" className="solid-studio-menu-item danger" onClick={handleLogout}>
+                  <LogoutIcon />
+                  Logout
+                </button>
+              </div>
+            )}
+          </div>
+
+          <button
+            type="button"
+            className="solid-studio-menu-trigger"
+            style={{ color: "var(--primary-foreground)" }}
+            onClick={() => {
+              const aiUrl = env("VITE_SOLIDX_AI_URL");
+              if (aiUrl) window.open(aiUrl, "_blank");
+            }}
+            title="Open AI Chat"
+          >
+            <ChatIcon />
+          </button>
+        </div>
+      </div>
+
+      {/* ── AI chat panel (commented out — moved to agent-ui) ───────────────── */}
+      {/* <div
+        className={`solid-studio-panel-fixed${isPanelOpen ? "" : " collapsed"}`}
+        style={{ width: `${panelWidth}px` }}
+      >
+        <div
+          className={`solid-studio-resize-handle${isDragging ? " dragging" : ""}`}
+          onMouseDown={onDragStart}
+        />
+        <div className="solid-studio-panel-body">
+          <SolidAiChat />
+        </div>
+      </div> */}
+    </div>
+  );
+
+  return typeof document !== "undefined" ? createPortal(studioUI, document.body) : null;
+}
+
+// ── PreviewModePersist ─────────────────────────────────────────────────────────
+// Mount once at the app root alongside SolidStudio.
+// sessionStorage is tab-scoped, so preview opened in a new tab stays isolated.
+// Closing the tab is the natural way to exit preview mode.
+
+const PREVIEW_KEY = "solid-preview";
+
+export function PreviewModePersist() {
+  const { pathname, search } = useLocation();
+  const navigate = useNavigate();
+
+  // Activate: when URL has ?preview=true, store it in sessionStorage for this tab
+  useEffect(() => {
+    const params = new URLSearchParams(search);
+    if (params.get("preview") === "true") {
+      sessionStorage.setItem(PREVIEW_KEY, "true");
+    }
+  }, [search]);
+
+  // Persist: re-inject ?preview=true on every navigation if it was set
+  useEffect(() => {
+    if (sessionStorage.getItem(PREVIEW_KEY) !== "true") return;
+    const params = new URLSearchParams(search);
+    if (params.get("preview") === "true") return;
+    params.set("preview", "true");
+    navigate({ pathname, search: `?${params.toString()}` }, { replace: true });
+  }, [pathname, search, navigate]);
+
+  return null;
+}
+
+// ── SolidStudioWrapper ─────────────────────────────────────────────────────────
+// Kept for backwards compatibility. Now a pure pass-through.
+export function SolidStudioWrapper({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+// Legacy aliases
+export const SolidAiStudioLayout = SolidStudioWrapper;
+export const SolidStudioPanel = SolidStudio;

package/dist/components/layout/navbar-one.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-one.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-one.tsx"],"names":[],"mappings":"AAcA,QAAA,MAAM,SAAS,+CAmNd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"navbar-one.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-one.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,SAAS,+CAkNd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/layout/navbar-one.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ToastContainer } from "../../helpers/ToastContainer";
 import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
 import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
 import { env } from "../../adapters/env";
@@ -59,7 +58,7 @@ var NavbarOne = function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isSearchShow]);
-    return (_jsxs("div", { className: "flex flex-column md:flex-row justify-content-between navBar", children: [_jsx(ToastContainer, {}), currentMainMenu && (_jsx("div", { children: _jsx("a", { className: visibleNavbar
+    return (_jsxs("div", { className: "flex flex-column md:flex-row justify-content-between navBar", children: [currentMainMenu && (_jsx("div", { children: _jsx("a", { className: visibleNavbar
                         ? "navtwo-toggle active-menu-image"
                         : "navtwo-toggle", onClick: handleToggle, children: _jsx("img", { style: { cursor: "pointer" }, src: "/images/menu-toggle.png", alt: "Solid" }) }) })), _jsxs("div", { className: "navBarOne", children: [_jsx("div", { children: _jsx("div", { className: "navbar-menu", children: _jsx(_Fragment, { children: menu && menu.data.length > 0 && menu.data.map(function (m) { return (_jsx("div", { className: "menu-item ".concat(currentMainMenu === m.title ? "active-menu-image" : ""), children: _jsx("a", { onClick: function () { return handleMenu(m); }, children: _jsx("img", { style: { cursor: "pointer", width: '30px' }, 
                                             // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}

package/dist/components/layout/navbar-one.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-one.js","sourceRoot":"","sources":["../../../src/components/layout/navbar-one.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ToastContainer } from \"../../helpers/ToastContainer\";\nimport { useGetSolidMenuBasedOnRoleQuery } from \"../../redux/api/solidMenuApi\";\nimport { setIsAuthenticated, setUser } from \"../../redux/features/userSlice\";\nimport { env } from \"../../adapters/env\";\nimport { useSession } from \"../../hooks/useSession\";\nimport { Button } from \"primereact/button\";\nimport { IconField } from \"primereact/iconfield\";\nimport { InputIcon } from \"primereact/inputicon\";\nimport { InputText } from \"primereact/inputtext\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport NavbarTwoMenu from \"./navbar-two-menu\";\nimport UserProfileMenu from \"./user-profile-menu\";\n\nconst NavbarOne = () => {\n    const dispatch = useDispatch();\n    const [visibleNavbar, setVisibleNavbar] = useState(false);\n\n    const { data: menu } = useGetSolidMenuBasedOnRoleQuery(\"\");\n\n    const [currentMenu, setCurrentMenu] = useState();\n    const [currentMainMenu, setCurrentMainMenu] = useState();\n    const [searchTerm, setSearchTerm] = useState(\"\");\n\n    useEffect(() => {\n        if (menu) {\n            setCurrentMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env(\"NEXT_PUBLIC_DEFAULT_MENU_KEY\"))[0]?.children);\n            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env(\"NEXT_PUBLIC_DEFAULT_MENU_KEY\"))[0]?.title)\n        }\n    }, [menu])\n\n    const { data } = useSession();\n\n    // const handleToggle = () => setShow(!show);\n    const handleToggle = () => setVisibleNavbar(!visibleNavbar);\n    const handleMenu = (m: any) => {\n        // setShow(true);\n        setVisibleNavbar(!visibleNavbar);\n        setCurrentMainMenu(m.title);\n        setCurrentMenu(m.children);\n    };\n\n    useEffect(() => {\n        if (data) {\n            dispatch(setUser(data?.user));\n            dispatch(setIsAuthenticated(true));\n        }\n    }, [data]);\n\n    const [isSearchShow, setSearchShow] = useState(false);\n    const searchRef = useRef<HTMLDivElement>(null);\n\n    const handleClickOutside = (event: any) => {\n        if (searchRef.current && !searchRef.current.contains(event.target)) {\n            setSearchShow(false);\n        }\n    };\n\n    useEffect(() => {\n        if (isSearchShow) {\n            document.addEventListener(\"mousedown\", handleClickOutside);\n        } else {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        }\n\n        return () => {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, [isSearchShow]);\n\n\n\n    return (\n        <div className=\"flex flex-column md:flex-row justify-content-between navBar\">\n            <ToastContainer />\n\n            {/* commented this as this is not working properly @Jenendar to figure this out... */}\n            {currentMainMenu && (\n                <div>\n                    <a\n                        className={\n                            visibleNavbar\n                                ? \"navtwo-toggle active-menu-image\"\n                                : \"navtwo-toggle\"\n                        }\n                        onClick={handleToggle}\n                    >\n                        <img\n                            style={{ cursor: \"pointer\" }}\n                            src={`/images/menu-toggle.png`}\n                            alt=\"Solid\"\n                        />\n                    </a>\n                </div>\n            )}\n            <div className=\"navBarOne\">\n                <div>\n                    <div className=\"navbar-menu\">\n                        <>\n                            {menu && menu.data.length > 0 && menu.data.map((m: any) => (\n                                <div\n                                    key={m.title}\n                                    className={`menu-item ${currentMainMenu === m.title ? \"active-menu-image\" : \"\"}`}\n                                >\n                                    <a onClick={() => handleMenu(m)}>\n                                        <img\n                                            style={{ cursor: \"pointer\", width: '30px' }}\n                                            // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}\n                                            // src={`/images/menu/${m.title}.svg`}\n                                            src={m.icon.startsWith(\"/\") ? m.icon : `${env(\"API_URL\")}/${m.icon}`}\n                                            // src={`/images/menu/app-builder.svg`}\n                                            alt=\"Solid\"\n                                        />\n                                    </a>\n                                </div>\n                            ))}\n                        </>\n                    </div>\n                </div>\n                <UserProfileMenu></UserProfileMenu>\n            </div>\n            {currentMenu && (\n                <div className={visibleNavbar ? \"show navBarTwo\" : \"hide navBarTwo\"}>\n                    <div className=\"flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3\">\n                        <div className=\"absolute bottom-0\" style={{ width: 50, height: 0.8, background: '#d8e2ea' }}></div>\n                        {!isSearchShow && <div className=\"text-base font-semibold\">{currentMainMenu && currentMainMenu}</div>}\n                        {isSearchShow === false && <Button outlined icon=\"pi pi-search\" severity=\"secondary\" aria-label=\"Search\" size=\"small\" style={{ maxWidth: 32, maxHeight: 32, border: '1px solid #d1d5db' }}\n                            onClick={() => setSearchShow(true)}\n                        />\n                        }\n                        {isSearchShow &&\n                            <div className=\"w-full\" style={{ position: 'relative' }} ref={searchRef}>\n                                <IconField iconPosition=\"left\">\n                                    <InputIcon className=\"pi pi-search text-sm\"> </InputIcon>\n                                    <InputText placeholder=\"Search\" className=\"small-input text-sm w-full pr-6\" />\n                                </IconField>\n                                <div className=\"absolute max-h-1rem\" style={{ top: 5, right: 5 }}>\n                                    <img\n                                        // className=\"absolute right-0 top-0 max-h-1rem\"\n                                        style={{ cursor: \"pointer\", maxHeight: '1.3rem' }}\n                                        src=\"/images/icons/jump-to-icon.png\"\n                                        alt=\"Solid\"\n                                    />\n                                </div>\n                            </div>\n                        }\n                        {/* <div className=\"input-icon inputDiv navtwo-searchbox\">\n                            <i className=\"pi pi-search \" style={{ color: '#8D9199' }}></i>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Jump to.\"\n                                name=\"lastName\"\n                                id=\"lastName\"\n                                onChange={(e) => setSearchTerm(e.target.value)}\n                                value={searchTerm}\n                                className=\"\"\n                            />\n                            <img\n                                style={{ cursor: \"pointer\" }}\n                                src=\"/images/icons/jump-to-icon.png\"\n                                alt=\"Solid\"\n                            />\n                        </div> */}\n                    </div>\n                    {/* <div className=\"flex flex-column md:flex-row  navtwo-header justify-content-between\">\n            <div className=\"text-sm font-semibold\">{currentMainMenu && currentMainMenu}</div> */}\n                    {/* <a\n              className={\n                visibleNavbar\n                  ? \"navtwo-toggle active-menu-image\"\n                  : \"navtwo-toggle\"\n              }\n              onClick={handleToggle}\n            >\n              <img\n                style={{ cursor: \"pointer\" }}\n                src={`/images/menu-toggle.png`}\n                alt=\"Solid\"\n              />\n            </a> */}\n                    {/* </div>\n          <div className=\"p-inputgroup\"> */}\n                    {/* <div className=\"p-inputgroup navtwo-searchbox\">\n              \n              <span className=\"p-inputgroup-addon\">\n                <i className=\"pi pi-search \"></i>\n              </span>\n              <InputText\n                placeholder=\"Search\"\n                onChange={e => setSearchTerm(e.target.value)} \n                />\n              <span className=\"p-inputgroup-addon\">⌘+k</span>\n            </div> */}\n                    {/* <div className=\"input-icon inputDiv navtwo-searchbox\">\n              <i className=\"pi pi-search \" style={{ color: '#8D9199' }}></i>\n              <input\n                type=\"text\"\n                placeholder=\"Jump to.\"\n                name=\"lastName\"\n                id=\"lastName\"\n                onChange={(e) => setSearchTerm(e.target.value)}\n                value={searchTerm}\n                className=\"\"\n              />\n              <img\n                style={{ cursor: \"pointer\" }}\n                src=\"/images/icons/jump-to-icon.png\"\n                alt=\"Solid\"\n              />\n            </div> */}\n\n                    {/* <Button icon=\"pi pi-search\" className=\"p-button-outlined\" onClick={handleSearch} /> */}\n                    {/* </div> */}\n\n                    <div\n                        className={\n                            visibleNavbar ? \"navTwoMenuLayout px-2 show\" : \"navTwoMenuLayout hide\"\n                        }\n                    >\n                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default NavbarOne;\n"]}
+{"version":3,"file":"navbar-one.js","sourceRoot":"","sources":["../../../src/components/layout/navbar-one.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useGetSolidMenuBasedOnRoleQuery } from \"../../redux/api/solidMenuApi\";\nimport { setIsAuthenticated, setUser } from \"../../redux/features/userSlice\";\nimport { env } from \"../../adapters/env\";\nimport { useSession } from \"../../hooks/useSession\";\nimport { Button } from \"primereact/button\";\nimport { IconField } from \"primereact/iconfield\";\nimport { InputIcon } from \"primereact/inputicon\";\nimport { InputText } from \"primereact/inputtext\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport NavbarTwoMenu from \"./navbar-two-menu\";\nimport UserProfileMenu from \"./user-profile-menu\";\n\nconst NavbarOne = () => {\n    const dispatch = useDispatch();\n    const [visibleNavbar, setVisibleNavbar] = useState(false);\n\n    const { data: menu } = useGetSolidMenuBasedOnRoleQuery(\"\");\n\n    const [currentMenu, setCurrentMenu] = useState();\n    const [currentMainMenu, setCurrentMainMenu] = useState();\n    const [searchTerm, setSearchTerm] = useState(\"\");\n\n    useEffect(() => {\n        if (menu) {\n            setCurrentMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env(\"NEXT_PUBLIC_DEFAULT_MENU_KEY\"))[0]?.children);\n            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env(\"NEXT_PUBLIC_DEFAULT_MENU_KEY\"))[0]?.title)\n        }\n    }, [menu])\n\n    const { data } = useSession();\n\n    // const handleToggle = () => setShow(!show);\n    const handleToggle = () => setVisibleNavbar(!visibleNavbar);\n    const handleMenu = (m: any) => {\n        // setShow(true);\n        setVisibleNavbar(!visibleNavbar);\n        setCurrentMainMenu(m.title);\n        setCurrentMenu(m.children);\n    };\n\n    useEffect(() => {\n        if (data) {\n            dispatch(setUser(data?.user));\n            dispatch(setIsAuthenticated(true));\n        }\n    }, [data]);\n\n    const [isSearchShow, setSearchShow] = useState(false);\n    const searchRef = useRef<HTMLDivElement>(null);\n\n    const handleClickOutside = (event: any) => {\n        if (searchRef.current && !searchRef.current.contains(event.target)) {\n            setSearchShow(false);\n        }\n    };\n\n    useEffect(() => {\n        if (isSearchShow) {\n            document.addEventListener(\"mousedown\", handleClickOutside);\n        } else {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        }\n\n        return () => {\n            document.removeEventListener(\"mousedown\", handleClickOutside);\n        };\n    }, [isSearchShow]);\n\n\n\n    return (\n        <div className=\"flex flex-column md:flex-row justify-content-between navBar\">\n\n            {/* commented this as this is not working properly @Jenendar to figure this out... */}\n            {currentMainMenu && (\n                <div>\n                    <a\n                        className={\n                            visibleNavbar\n                                ? \"navtwo-toggle active-menu-image\"\n                                : \"navtwo-toggle\"\n                        }\n                        onClick={handleToggle}\n                    >\n                        <img\n                            style={{ cursor: \"pointer\" }}\n                            src={`/images/menu-toggle.png`}\n                            alt=\"Solid\"\n                        />\n                    </a>\n                </div>\n            )}\n            <div className=\"navBarOne\">\n                <div>\n                    <div className=\"navbar-menu\">\n                        <>\n                            {menu && menu.data.length > 0 && menu.data.map((m: any) => (\n                                <div\n                                    key={m.title}\n                                    className={`menu-item ${currentMainMenu === m.title ? \"active-menu-image\" : \"\"}`}\n                                >\n                                    <a onClick={() => handleMenu(m)}>\n                                        <img\n                                            style={{ cursor: \"pointer\", width: '30px' }}\n                                            // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}\n                                            // src={`/images/menu/${m.title}.svg`}\n                                            src={m.icon.startsWith(\"/\") ? m.icon : `${env(\"API_URL\")}/${m.icon}`}\n                                            // src={`/images/menu/app-builder.svg`}\n                                            alt=\"Solid\"\n                                        />\n                                    </a>\n                                </div>\n                            ))}\n                        </>\n                    </div>\n                </div>\n                <UserProfileMenu></UserProfileMenu>\n            </div>\n            {currentMenu && (\n                <div className={visibleNavbar ? \"show navBarTwo\" : \"hide navBarTwo\"}>\n                    <div className=\"flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3\">\n                        <div className=\"absolute bottom-0\" style={{ width: 50, height: 0.8, background: '#d8e2ea' }}></div>\n                        {!isSearchShow && <div className=\"text-base font-semibold\">{currentMainMenu && currentMainMenu}</div>}\n                        {isSearchShow === false && <Button outlined icon=\"pi pi-search\" severity=\"secondary\" aria-label=\"Search\" size=\"small\" style={{ maxWidth: 32, maxHeight: 32, border: '1px solid #d1d5db' }}\n                            onClick={() => setSearchShow(true)}\n                        />\n                        }\n                        {isSearchShow &&\n                            <div className=\"w-full\" style={{ position: 'relative' }} ref={searchRef}>\n                                <IconField iconPosition=\"left\">\n                                    <InputIcon className=\"pi pi-search text-sm\"> </InputIcon>\n                                    <InputText placeholder=\"Search\" className=\"small-input text-sm w-full pr-6\" />\n                                </IconField>\n                                <div className=\"absolute max-h-1rem\" style={{ top: 5, right: 5 }}>\n                                    <img\n                                        // className=\"absolute right-0 top-0 max-h-1rem\"\n                                        style={{ cursor: \"pointer\", maxHeight: '1.3rem' }}\n                                        src=\"/images/icons/jump-to-icon.png\"\n                                        alt=\"Solid\"\n                                    />\n                                </div>\n                            </div>\n                        }\n                        {/* <div className=\"input-icon inputDiv navtwo-searchbox\">\n                            <i className=\"pi pi-search \" style={{ color: '#8D9199' }}></i>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Jump to.\"\n                                name=\"lastName\"\n                                id=\"lastName\"\n                                onChange={(e) => setSearchTerm(e.target.value)}\n                                value={searchTerm}\n                                className=\"\"\n                            />\n                            <img\n                                style={{ cursor: \"pointer\" }}\n                                src=\"/images/icons/jump-to-icon.png\"\n                                alt=\"Solid\"\n                            />\n                        </div> */}\n                    </div>\n                    {/* <div className=\"flex flex-column md:flex-row  navtwo-header justify-content-between\">\n            <div className=\"text-sm font-semibold\">{currentMainMenu && currentMainMenu}</div> */}\n                    {/* <a\n              className={\n                visibleNavbar\n                  ? \"navtwo-toggle active-menu-image\"\n                  : \"navtwo-toggle\"\n              }\n              onClick={handleToggle}\n            >\n              <img\n                style={{ cursor: \"pointer\" }}\n                src={`/images/menu-toggle.png`}\n                alt=\"Solid\"\n              />\n            </a> */}\n                    {/* </div>\n          <div className=\"p-inputgroup\"> */}\n                    {/* <div className=\"p-inputgroup navtwo-searchbox\">\n              \n              <span className=\"p-inputgroup-addon\">\n                <i className=\"pi pi-search \"></i>\n              </span>\n              <InputText\n                placeholder=\"Search\"\n                onChange={e => setSearchTerm(e.target.value)} \n                />\n              <span className=\"p-inputgroup-addon\">⌘+k</span>\n            </div> */}\n                    {/* <div className=\"input-icon inputDiv navtwo-searchbox\">\n              <i className=\"pi pi-search \" style={{ color: '#8D9199' }}></i>\n              <input\n                type=\"text\"\n                placeholder=\"Jump to.\"\n                name=\"lastName\"\n                id=\"lastName\"\n                onChange={(e) => setSearchTerm(e.target.value)}\n                value={searchTerm}\n                className=\"\"\n              />\n              <img\n                style={{ cursor: \"pointer\" }}\n                src=\"/images/icons/jump-to-icon.png\"\n                alt=\"Solid\"\n              />\n            </div> */}\n\n                    {/* <Button icon=\"pi pi-search\" className=\"p-button-outlined\" onClick={handleSearch} /> */}\n                    {/* </div> */}\n\n                    <div\n                        className={\n                            visibleNavbar ? \"navTwoMenuLayout px-2 show\" : \"navTwoMenuLayout hide\"\n                        }\n                    >\n                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default NavbarOne;\n"]}

package/dist/components/layout/navbar-one.tsx

@@ -1,4 +1,3 @@
-import { ToastContainer } from "../../helpers/ToastContainer";
 import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
 import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
 import { env } from "../../adapters/env";
@@ -72,7 +71,6 @@ const NavbarOne = () => {
 
     return (
         <div className="flex flex-column md:flex-row justify-content-between navBar">
-            <ToastContainer />
 
             {/* commented this as this is not working properly @Jenendar to figure this out... */}
             {currentMainMenu && (

package/dist/components/layout/navbar-two-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-two-menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-two-menu.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,aAAa,kBAAmB,GAAG,4CA+DxC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"navbar-two-menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-two-menu.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,aAAa,kBAAmB,GAAG,4CAgFxC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/layout/navbar-two-menu.js

@@ -1,45 +1,71 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "../common/Link";
-import { usePathname } from "../../hooks/usePathname";
 import { PanelMenu } from "primereact/panelmenu";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams } from "../../hooks/useSearchParams";
 var NavbarTwoMenu = function (_a) {
     var menuItems = _a.menuItems;
-    var pathname = usePathname();
+    var searchParams = useSearchParams();
     var _b = useState({}), expandedKeys = _b[0], setExpandedKeys = _b[1];
+    var activeId = searchParams.get("menuItemId");
+    var hasActiveChild = function (items) {
+        if (!activeId)
+            return false;
+        return items === null || items === void 0 ? void 0 : items.some(function (item) { var _a; return (item.id !== null && item.id === activeId) || hasActiveChild((_a = item.items) !== null && _a !== void 0 ? _a : []); });
+    };
     var itemRenderer = function (item, options) {
-        var _a;
-        var isSelected = pathname === item.url;
-        return (_jsx("div", { className: "flex align-items-center cursor-pointer menuHead px-3 ".concat(isSelected ? ' p-highlight' : ''), onClick: options.onClick, children: _jsxs(Link, { href: (item === null || item === void 0 ? void 0 : item.url) ? item === null || item === void 0 ? void 0 : item.url : '#', className: "w-full flex justify-content-between font-normal", children: [_jsxs("div", { className: "flex align-items-center", style: { gap: 10 }, children: [item.icon && (
+        var _a, _b;
+        var isSelected = activeId !== null && item.id !== null && item.id === activeId;
+        var isParentActive = activeId !== null && ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 && hasActiveChild(item.items);
+        return (_jsx("div", { className: "flex align-items-center cursor-pointer menuHead px-3 ".concat(isSelected || isParentActive ? "p-highlight" : ""), onClick: options.onClick, children: _jsxs(Link, { href: (item === null || item === void 0 ? void 0 : item.url) ? item === null || item === void 0 ? void 0 : item.url : "#", className: "w-full flex justify-content-between font-normal", children: [_jsxs("div", { className: "flex align-items-center", style: { gap: 10 }, children: [item.icon && (
                             // material-symbols-${item.iconVariant ?? 'outlined'}
-                            _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: item.icon })), _jsx("span", { children: item.label })] }), (item === null || item === void 0 ? void 0 : item.items) && ((_a = item === null || item === void 0 ? void 0 : item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-                        _jsx("span", { className: "sidebar-chevrons ".concat(expandedKeys[item.key] === true ? "pi pi-angle-up" : "pi pi-angle-down") })] }) }, item === null || item === void 0 ? void 0 : item.key));
+                            _jsx("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: item.icon })), _jsx("span", { children: item.label })] }), ((_b = item === null || item === void 0 ? void 0 : item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+                        _jsx("span", { className: "sidebar-chevrons ".concat(expandedKeys[item.key] ? "pi pi-angle-up" : "pi pi-angle-down") })] }) }, item === null || item === void 0 ? void 0 : item.key));
     };
     var createMenuItems = function (menuItems) {
         return menuItems.map(function (mi) {
-            var _a;
-            return ({
+            var _a, _b, _c;
+            var menuItemId = new URLSearchParams((_a = mi.path) === null || _a === void 0 ? void 0 : _a.split("?")[1]).get("menuItemId");
+            return {
                 key: mi.key,
+                id: menuItemId,
                 label: mi.title,
-                icon: (_a = mi.icon) !== null && _a !== void 0 ? _a : "",
+                icon: (_b = mi.icon) !== null && _b !== void 0 ? _b : "",
                 // iconVariant: mi.iconVariant,
                 template: itemRenderer,
-                url: mi.path ? mi.path : null,
-                items: mi.children ? createMenuItems(mi.children) : null, // Recursively add children
-            });
+                url: (_c = mi.path) !== null && _c !== void 0 ? _c : null,
+                items: mi.children ? createMenuItems(mi.children) : null,
+            };
         });
     };
     var items = createMenuItems(menuItems);
-    var onExpandedKeysChange = function (keys) {
-        setExpandedKeys(keys);
-    };
-    var expandNode = function (node) {
-        if (node.items && node.items.length) {
-            expandedKeys[node.key] = true;
-            node.items.forEach(expandNode);
-        }
-    };
-    return (_jsx("div", { className: "solid-panel-menu", children: _jsx(PanelMenu, { model: items, expandedKeys: expandedKeys, onExpandedKeysChange: onExpandedKeysChange, className: "w-full", multiple: true }) }));
+    // Auto-expand parents with active child when activeId changes
+    useEffect(function () {
+        var newExpandedKeys = {};
+        var expandIfActive = function (items) {
+            items === null || items === void 0 ? void 0 : items.forEach(function (item) {
+                var _a;
+                if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && hasActiveChild(item.items)) {
+                    newExpandedKeys[item.key] = true;
+                    expandIfActive(item.items);
+                }
+            });
+        };
+        expandIfActive(createMenuItems(menuItems));
+        setExpandedKeys(function (prev) { return (__assign(__assign({}, prev), newExpandedKeys)); });
+    }, [activeId]);
+    return (_jsx("div", { className: "solid-panel-menu", children: _jsx(PanelMenu, { model: items, expandedKeys: expandedKeys, onExpandedKeysChange: setExpandedKeys, className: "w-full", multiple: true }) }));
 };
 export default NavbarTwoMenu;
 //# sourceMappingURL=navbar-two-menu.js.map

package/dist/components/layout/navbar-two-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-two-menu.js","sourceRoot":"","sources":["../../../src/components/layout/navbar-two-menu.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,IAAM,aAAa,GAAG,UAAC,EAAkB;QAAhB,SAAS,eAAA;IAC9B,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IACzB,IAAA,KAAkC,QAAQ,CAAM,EAAE,CAAC,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAC;IAC1D,IAAM,YAAY,GAAG,UAAC,IAAS,EAAE,OAAY;;QACzC,IAAM,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC,GAAG,CAAA;QACxC,OAAO,CACH,cAAqB,SAAS,EAAE,+DAAwD,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,YAChJ,MAAC,IAAI,IAAC,IAAI,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,EAAC,CAAC,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,EAAC,iDAAiD,aAChG,eAAK,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,aACtD,IAAI,CAAC,IAAI,IAAI;4BACV,qDAAqD;4BACrD,eAAM,SAAS,EAAE,2BAA2B,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAChE,IAAI,CAAC,IAAI,GACP,CACV,EACD,yBACK,IAAI,CAAC,KAAK,GACR,IACL,EACL,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,IAAG,CAAC;wBACnC,eAAM,SAAS,EAAE,2BAAoB,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAE,GAAI,IAEnH,IAhBD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAiBb,CACT,CAAA;IACL,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG,UAAC,SAAgB;QACrC,OAAO,SAAS,CAAC,GAAG,CAAC,UAAC,EAAE;;YAAK,OAAA,CAAC;gBAC1B,GAAG,EAAE,EAAE,CAAC,GAAG;gBACX,KAAK,EAAE,EAAE,CAAC,KAAK;gBACf,IAAI,EAAE,MAAA,EAAE,CAAC,IAAI,mCAAI,EAAE;gBACnB,+BAA+B;gBAC/B,QAAQ,EAAE,YAAY;gBACtB,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;gBAC7B,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,2BAA2B;aACxF,CAAC,CAAA;SAAA,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,IAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAEzC,IAAM,oBAAoB,GAAG,UAAC,IAAS;QACnC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,IAAS;QACzB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SAClC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,SAAS,IACN,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAC,QAAQ,EAClB,QAAQ,SACV,GACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import Link from \"../common/Link\";\nimport { usePathname } from \"../../hooks/usePathname\";\nimport { PanelMenu } from \"primereact/panelmenu\";\nimport { useState } from \"react\";\n\nconst NavbarTwoMenu = ({ menuItems }: any) => {\n    const pathname = usePathname();\n    const [expandedKeys, setExpandedKeys] = useState<any>({});\n    const itemRenderer = (item: any, options: any) => {\n        const isSelected = pathname === item.url\n        return (\n            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${isSelected ? ' p-highlight' : ''}`} onClick={options.onClick}>\n                <Link href={item?.url ? item?.url : '#'} className=\"w-full flex justify-content-between font-normal\">\n                    <div className=\"flex align-items-center\" style={{ gap: 10 }}>\n                        {item.icon && (\n                            // material-symbols-${item.iconVariant ?? 'outlined'}\n                            <span className={`material-symbols-outlined`} style={{ fontSize: 18 }}>\n                                {item.icon}\n                            </span>\n                        )}\n                        <span>\n                            {item.label}\n                        </span>\n                    </div>\n                    {item?.items && item?.items?.length > 0 &&\n                        <span className={`sidebar-chevrons ${expandedKeys[item.key] === true ? \"pi pi-angle-up\" : \"pi pi-angle-down\"}`} />\n                    }\n                </Link>\n            </div>\n        )\n    };\n\n    const createMenuItems = (menuItems: any[]): any[] => {\n        return menuItems.map((mi) => ({\n            key: mi.key,\n            label: mi.title,\n            icon: mi.icon ?? \"\",\n            // iconVariant: mi.iconVariant,\n            template: itemRenderer,\n            url: mi.path ? mi.path : null,\n            items: mi.children ? createMenuItems(mi.children) : null, // Recursively add children\n        }));\n    };\n\n    const items = createMenuItems(menuItems);\n\n    const onExpandedKeysChange = (keys: any) => {\n        setExpandedKeys(keys);\n    };\n\n    const expandNode = (node: any) => {\n        if (node.items && node.items.length) {\n            expandedKeys[node.key] = true;\n            node.items.forEach(expandNode);\n        }\n    };\n\n    return (\n        <div className=\"solid-panel-menu\">\n            <PanelMenu\n                model={items}\n                expandedKeys={expandedKeys}\n                onExpandedKeysChange={onExpandedKeysChange}\n                className=\"w-full\"\n                multiple\n            />\n        </div>\n    );\n};\n\nexport default NavbarTwoMenu;\n"]}
+{"version":3,"file":"navbar-two-menu.js","sourceRoot":"","sources":["../../../src/components/layout/navbar-two-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"../common/Link\";\nimport { usePathname } from \"../../hooks/usePathname\";\nimport { PanelMenu } from \"primereact/panelmenu\";\nimport { useState, useEffect } from \"react\";\nimport { useSearchParams } from \"../../hooks/useSearchParams\";\n\nconst NavbarTwoMenu = ({ menuItems }: any) => {\n    const searchParams = useSearchParams();\n    const [expandedKeys, setExpandedKeys] = useState<any>({});\n\n    const activeId = searchParams.get(\"menuItemId\");\n    const hasActiveChild = (items: any[]): boolean => {\n        if (!activeId) return false;\n        return items?.some((item) =>\n            (item.id !== null && item.id === activeId) || hasActiveChild(item.items ?? [])\n        );\n    };\n    const itemRenderer = (item: any, options: any) => {\n        const isSelected = activeId !== null && item.id !== null && item.id === activeId;\n        const isParentActive = activeId !== null && item.items?.length > 0 && hasActiveChild(item.items);\n        return (\n            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${isSelected || isParentActive ? \"p-highlight\" : \"\"}`} onClick={options.onClick} >\n                <Link href={item?.url ? item?.url : \"#\"} className=\"w-full flex justify-content-between font-normal\">\n                    <div className=\"flex align-items-center\" style={{ gap: 10 }}>\n                        {item.icon && (\n                            // material-symbols-${item.iconVariant ?? 'outlined'}\n                            <span className=\"material-symbols-outlined\" style={{ fontSize: 18 }}>\n                                {item.icon}\n                            </span>\n                        )}\n                        <span>\n                            {item.label}\n                        </span>\n                    </div>\n                    {item?.items?.length > 0 &&\n                        <span className={`sidebar-chevrons ${expandedKeys[item.key] ? \"pi pi-angle-up\" : \"pi pi-angle-down\"}`} />\n                    }\n                </Link>\n            </div>\n        )\n    };\n\n    const createMenuItems = (menuItems: any[]): any[] =>\n        menuItems.map((mi) => {\n            const menuItemId = new URLSearchParams(mi.path?.split(\"?\")[1]).get(\"menuItemId\");\n            return {\n                key: mi.key,\n                id: menuItemId,   // ← extracted from path\n                label: mi.title,\n                icon: mi.icon ?? \"\",\n                // iconVariant: mi.iconVariant,\n                template: itemRenderer,\n                url: mi.path ?? null,\n                items: mi.children ? createMenuItems(mi.children) : null,\n            };\n        })\n\n\n    const items = createMenuItems(menuItems);\n\n    // Auto-expand parents with active child when activeId changes\n    useEffect(() => {\n        const newExpandedKeys: any = {};\n        const expandIfActive = (items: any[]) => {\n            items?.forEach((item) => {\n                if (item.items?.length && hasActiveChild(item.items)) {\n                    newExpandedKeys[item.key] = true;\n                    expandIfActive(item.items);\n                }\n            });\n        };\n        expandIfActive(createMenuItems(menuItems));\n        setExpandedKeys((prev: any) => ({ ...prev, ...newExpandedKeys }));\n    }, [activeId]);\n\n    return (\n        <div className=\"solid-panel-menu\">\n            <PanelMenu\n                model={items}\n                expandedKeys={expandedKeys}\n                onExpandedKeysChange={setExpandedKeys}\n                className=\"w-full\"\n                multiple\n            />\n        </div>\n    );\n};\n\nexport default NavbarTwoMenu;\n"]}