@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

package/dist/components/layout/context/layoutcontext.tsx

@@ -4,9 +4,22 @@ import { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } fr
 export const LayoutContext = createContext({} as LayoutContextProps);
 
 export const LayoutProvider = ({ children }: ChildContainerProps) => {
+    const THEME_STORAGE_KEY = "solidx.theme.mode";
+    const getInitialThemeMode = (): "light" | "dark" => {
+        if (typeof window === "undefined") return "light";
+
+        const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored === "dark" || stored === "light") {
+            return stored;
+        }
+
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    };
+
+    const [themeMode, setThemeMode] = useState<"light" | "dark">(getInitialThemeMode);
     const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
         inputStyle: 'outlined',
-        colorScheme: 'light',
+        colorScheme: themeMode,
         theme: 'solid-light-purple',
         scale: 14,
         authLayout: 'Center'
@@ -33,15 +46,31 @@ export const LayoutProvider = ({ children }: ChildContainerProps) => {
         setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));
     };
 
- 
+    const toggleThemeMode = () => {
+        setThemeMode((prev) => (prev === "light" ? "dark" : "light"));
+    };
 
     const isDesktop = () => {
         return window.innerWidth > 991;
     };
 
+    React.useEffect(() => {
+        if (typeof window === "undefined") return;
+        window.localStorage.setItem(THEME_STORAGE_KEY, themeMode);
+        document.documentElement.classList.toggle("dark", themeMode === "dark");
+        document.documentElement.setAttribute("data-theme", themeMode);
+        setLayoutConfig((prevLayoutConfig: LayoutConfig) => ({
+            ...prevLayoutConfig,
+            colorScheme: themeMode
+        }));
+    }, [themeMode]);
+
     const value: LayoutContextProps = {
         layoutConfig,
         setLayoutConfig,
+        themeMode,
+        setThemeMode,
+        toggleThemeMode,
         layoutState,
         setLayoutState,
         onMenuToggle,

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":"AAaA,QAAA,MAAM,SAAS,+CAkNd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"navbar-one.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-one.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,SAAS,+CA6Nd,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -3,14 +3,12 @@ import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
 import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
 import { env } from "../../adapters/env";
 import { useSession } from "../../hooks/useSession";
-import { Button } from "primereact/button";
-import { IconField } from "primereact/iconfield";
-import { InputIcon } from "primereact/inputicon";
-import { InputText } from "primereact/inputtext";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import NavbarTwoMenu from "./navbar-two-menu";
 import UserProfileMenu from "./user-profile-menu";
+import { SolidButton } from "../shad-cn-ui";
+import { SolidIcon } from "../shad-cn-ui/SolidIcon";
 var NavbarOne = function () {
     var dispatch = useDispatch();
     var _a = useState(false), visibleNavbar = _a[0], setVisibleNavbar = _a[1];
@@ -65,10 +63,7 @@ var NavbarOne = function () {
                                             // src={`/images/menu/${m.title}.svg`}
                                             src: m.icon.startsWith("/") ? m.icon : "".concat(env("API_URL"), "/").concat(m.icon), 
                                             // src={`/images/menu/app-builder.svg`}
-                                            alt: "Solid" }) }) }, m.title)); }) }) }) }), _jsx(UserProfileMenu, {})] }), currentMenu && (_jsxs("div", { className: visibleNavbar ? "show navBarTwo" : "hide navBarTwo", children: [_jsxs("div", { className: "flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3", children: [_jsx("div", { className: "absolute bottom-0", style: { width: 50, height: 0.8, background: '#d8e2ea' } }), !isSearchShow && _jsx("div", { className: "text-base font-semibold", children: currentMainMenu && currentMainMenu }), isSearchShow === false && _jsx(Button, { outlined: true, icon: "pi pi-search", severity: "secondary", "aria-label": "Search", size: "small", style: { maxWidth: 32, maxHeight: 32, border: '1px solid #d1d5db' }, onClick: function () { return setSearchShow(true); } }), isSearchShow &&
-                                _jsxs("div", { className: "w-full", style: { position: 'relative' }, ref: searchRef, children: [_jsxs(IconField, { iconPosition: "left", children: [_jsx(InputIcon, { className: "pi pi-search text-sm", children: " " }), _jsx(InputText, { placeholder: "Search", className: "small-input text-sm w-full pr-6" })] }), _jsx("div", { className: "absolute max-h-1rem", style: { top: 5, right: 5 }, children: _jsx("img", { 
-                                                // className="absolute right-0 top-0 max-h-1rem"
-                                                style: { cursor: "pointer", maxHeight: '1.3rem' }, src: "/images/icons/jump-to-icon.png", alt: "Solid" }) })] })] }), _jsx("div", { className: visibleNavbar ? "navTwoMenuLayout px-2 show" : "navTwoMenuLayout hide", children: _jsx(NavbarTwoMenu, { menuItems: currentMenu }) })] }))] }));
+                                            alt: "Solid" }) }) }, m.title)); }) }) }) }), _jsx(UserProfileMenu, {})] }), currentMenu && (_jsxs("div", { className: visibleNavbar ? "show navBarTwo" : "hide navBarTwo", children: [_jsxs("div", { className: "flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3", children: [_jsx("div", { className: "absolute bottom-0", style: { width: 50, height: 0.8, background: '#d8e2ea' } }), !isSearchShow && _jsx("div", { className: "text-base font-semibold", children: currentMainMenu && currentMainMenu }), isSearchShow === false && (_jsx(SolidButton, { variant: "ghost", size: "sm", "aria-label": "Search", className: "transparent-background min-w-0 px-2 py-1 border-1 border-round border-200", onClick: function () { return setSearchShow(true); }, leftIcon: _jsx(SolidIcon, { name: "si-search" }) })), isSearchShow && (_jsxs("div", { className: "w-full", style: { position: 'relative' }, ref: searchRef, children: [_jsxs("div", { className: "input-icon inputDiv navtwo-searchbox", children: [_jsx(SolidIcon, { name: "si-search", className: "text-sm" }), _jsx("input", { type: "text", placeholder: "Search", className: "small-input text-sm w-full pr-6", value: searchTerm, onChange: function (event) { return setSearchTerm(event.target.value); } })] }), _jsx("div", { className: "absolute max-h-1rem", style: { top: 5, right: 5 }, children: _jsx("img", { style: { cursor: "pointer", maxHeight: '1.3rem' }, src: "/images/icons/jump-to-icon.png", alt: "Solid" }) })] }))] }), _jsx("div", { className: visibleNavbar ? "navTwoMenuLayout px-2 show" : "navTwoMenuLayout hide", children: _jsx(NavbarTwoMenu, { menuItems: currentMenu }) })] }))] }));
 };
 export default NavbarOne;
 //# sourceMappingURL=navbar-one.js.map

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 { 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"]}
+{"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 { useEffect, useRef, useState } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport NavbarTwoMenu from \"./navbar-two-menu\";\nimport UserProfileMenu from \"./user-profile-menu\";\nimport { SolidButton } from \"../shad-cn-ui\";\nimport { SolidIcon } from \"../shad-cn-ui/SolidIcon\";\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 && (\n                            <SolidButton\n                                variant=\"ghost\"\n                                size=\"sm\"\n                                aria-label=\"Search\"\n                                className=\"transparent-background min-w-0 px-2 py-1 border-1 border-round border-200\"\n                                onClick={() => setSearchShow(true)}\n                                leftIcon={<SolidIcon name=\"si-search\" />}\n                            />\n                        )}\n                        {isSearchShow && (\n                            <div className=\"w-full\" style={{ position: 'relative' }} ref={searchRef}>\n                                <div className=\"input-icon inputDiv navtwo-searchbox\">\n                                    <SolidIcon name=\"si-search\" className=\"text-sm\" />\n                                    <input\n                                        type=\"text\"\n                                        placeholder=\"Search\"\n                                        className=\"small-input text-sm w-full pr-6\"\n                                        value={searchTerm}\n                                        onChange={(event) => setSearchTerm(event.target.value)}\n                                    />\n                                </div>\n                                <div className=\"absolute max-h-1rem\" style={{ top: 5, right: 5 }}>\n                                    <img\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

@@ -2,14 +2,12 @@ import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
 import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
 import { env } from "../../adapters/env";
 import { useSession } from "../../hooks/useSession";
-import { Button } from "primereact/button";
-import { IconField } from "primereact/iconfield";
-import { InputIcon } from "primereact/inputicon";
-import { InputText } from "primereact/inputtext";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch } from "react-redux";
 import NavbarTwoMenu from "./navbar-two-menu";
 import UserProfileMenu from "./user-profile-menu";
+import { SolidButton } from "../shad-cn-ui";
+import { SolidIcon } from "../shad-cn-ui/SolidIcon";
 
 const NavbarOne = () => {
     const dispatch = useDispatch();
@@ -122,26 +120,37 @@ const NavbarOne = () => {
                     <div className="flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3">
                         <div className="absolute bottom-0" style={{ width: 50, height: 0.8, background: '#d8e2ea' }}></div>
                         {!isSearchShow && <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>}
-                        {isSearchShow === false && <Button outlined icon="pi pi-search" severity="secondary" aria-label="Search" size="small" style={{ maxWidth: 32, maxHeight: 32, border: '1px solid #d1d5db' }}
-                            onClick={() => setSearchShow(true)}
-                        />
-                        }
-                        {isSearchShow &&
+                        {isSearchShow === false && (
+                            <SolidButton
+                                variant="ghost"
+                                size="sm"
+                                aria-label="Search"
+                                className="transparent-background min-w-0 px-2 py-1 border-1 border-round border-200"
+                                onClick={() => setSearchShow(true)}
+                                leftIcon={<SolidIcon name="si-search" />}
+                            />
+                        )}
+                        {isSearchShow && (
                             <div className="w-full" style={{ position: 'relative' }} ref={searchRef}>
-                                <IconField iconPosition="left">
-                                    <InputIcon className="pi pi-search text-sm"> </InputIcon>
-                                    <InputText placeholder="Search" className="small-input text-sm w-full pr-6" />
-                                </IconField>
+                                <div className="input-icon inputDiv navtwo-searchbox">
+                                    <SolidIcon name="si-search" className="text-sm" />
+                                    <input
+                                        type="text"
+                                        placeholder="Search"
+                                        className="small-input text-sm w-full pr-6"
+                                        value={searchTerm}
+                                        onChange={(event) => setSearchTerm(event.target.value)}
+                                    />
+                                </div>
                                 <div className="absolute max-h-1rem" style={{ top: 5, right: 5 }}>
                                     <img
-                                        // className="absolute right-0 top-0 max-h-1rem"
                                         style={{ cursor: "pointer", maxHeight: '1.3rem' }}
                                         src="/images/icons/jump-to-icon.png"
                                         alt="Solid"
                                     />
                                 </div>
                             </div>
-                        }
+                        )}
                         {/* <div className="input-icon inputDiv navtwo-searchbox">
                             <i className="pi pi-search " style={{ color: '#8D9199' }}></i>
                             <input

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":"AAMA,QAAA,MAAM,aAAa,kBAAmB,GAAG,4CAgFxC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"navbar-two-menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/navbar-two-menu.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,aAAa,kBAAmB,GAAG,4CAuHxC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "../common/Link";
-import { PanelMenu } from "primereact/panelmenu";
 import { useState, useEffect } from "react";
 import { useSearchParams } from "../../hooks/useSearchParams";
 var NavbarTwoMenu = function (_a) {
@@ -65,7 +64,22 @@ var NavbarTwoMenu = function (_a) {
         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 }) }));
+    var toggleExpansion = function (key) {
+        setExpandedKeys(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = !prev[key], _a)));
+        });
+    };
+    var renderMenuItems = function (menuItems) {
+        return (_jsx("ul", { className: "solid-panel-menu-list", children: menuItems.map(function (item) {
+                var hasChildren = item.items && item.items.length > 0;
+                var isExpanded = !!expandedKeys[item.key];
+                var isSelected = activeId !== null && item.id !== null && item.id === activeId;
+                var isParentActive = hasChildren && hasActiveChild(item.items);
+                return (_jsxs("li", { children: [_jsxs("div", { className: "flex align-items-center cursor-pointer menuHead px-3 ".concat(isSelected || isParentActive ? "p-highlight" : ""), children: [_jsx(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 && (_jsx("span", { className: "material-symbols-outlined", style: { fontSize: 18 }, children: item.icon })), _jsx("span", { children: item.label })] }) }), hasChildren && (_jsx("button", { type: "button", className: "sidebar-chevrons-button", onClick: function () { return toggleExpansion(item.key); }, "aria-label": "Toggle ".concat(item.label, " menu"), children: _jsx("span", { className: "sidebar-chevrons ".concat(isExpanded ? "pi pi-angle-up" : "pi pi-angle-down") }) }))] }), hasChildren && isExpanded && (_jsx("div", { className: "solid-panel-menu-children pl-3", children: renderMenuItems(item.items) }))] }, item.key));
+            }) }));
+    };
+    return _jsx("div", { className: "solid-panel-menu", children: renderMenuItems(items) });
 };
 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;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,IAAM,aAAa,GAAG,UAAC,EAAkB;QAAhB,SAAS,eAAA;IAC9B,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACjC,IAAA,KAAkC,QAAQ,CAAM,EAAE,CAAC,EAAlD,YAAY,QAAA,EAAE,eAAe,QAAqB,CAAC;IAE1D,IAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAChD,IAAM,cAAc,GAAG,UAAC,KAAY;QAChC,IAAI,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAC;QAC5B,OAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,UAAC,IAAI,YACpB,OAAA,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,IAAI,cAAc,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAA,EAAA,CACjF,CAAC;IACN,CAAC,CAAC;IACF,IAAM,YAAY,GAAG,UAAC,IAAS,EAAE,OAAY;;QACzC,IAAM,UAAU,GAAG,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC;QACjF,IAAM,cAAc,GAAG,QAAQ,KAAK,IAAI,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjG,OAAO,CACH,cAAqB,SAAS,EAAE,+DAAwD,UAAU,IAAI,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,YACjK,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,EAAC,2BAA2B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,YAC9D,IAAI,CAAC,IAAI,GACP,CACV,EACD,yBACK,IAAI,CAAC,KAAK,GACR,IACL,EACL,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,IAAG,CAAC;wBACpB,eAAM,SAAS,EAAE,2BAAoB,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAE,GAAI,IAE1G,IAhBD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAiBb,CACT,CAAA;IACL,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG,UAAC,SAAgB;QACrC,OAAA,SAAS,CAAC,GAAG,CAAC,UAAC,EAAE;;YACb,IAAM,UAAU,GAAG,IAAI,eAAe,CAAC,MAAA,EAAE,CAAC,IAAI,0CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;YACjF,OAAO;gBACH,GAAG,EAAE,EAAE,CAAC,GAAG;gBACX,EAAE,EAAE,UAAU;gBACd,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,MAAA,EAAE,CAAC,IAAI,mCAAI,IAAI;gBACpB,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI;aAC3D,CAAC;QACN,CAAC,CAAC;IAZF,CAYE,CAAA;IAGN,IAAM,KAAK,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,SAAS,CAAC;QACN,IAAM,eAAe,GAAQ,EAAE,CAAC;QAChC,IAAM,cAAc,GAAG,UAAC,KAAY;YAChC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,UAAC,IAAI;;gBAChB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;oBAClD,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;oBACjC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC9B;YACL,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QACF,cAAc,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC;QAC3C,eAAe,CAAC,UAAC,IAAS,IAAK,OAAA,uBAAM,IAAI,GAAK,eAAe,EAAG,EAAjC,CAAiC,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACH,cAAK,SAAS,EAAC,kBAAkB,YAC7B,KAAC,SAAS,IACN,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,eAAe,EACrC,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, 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"]}
+{"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 { 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    const toggleExpansion = (key: string) => {\n        setExpandedKeys((prev: any) => ({ ...prev, [key]: !prev[key] }));\n    };\n\n    const renderMenuItems = (menuItems: any[]): React.ReactNode => {\n        return (\n            <ul className=\"solid-panel-menu-list\">\n                {menuItems.map((item) => {\n                    const hasChildren = item.items && item.items.length > 0;\n                    const isExpanded = !!expandedKeys[item.key];\n                    const isSelected = activeId !== null && item.id !== null && item.id === activeId;\n                    const isParentActive = hasChildren && hasActiveChild(item.items);\n\n                    return (\n                        <li key={item.key}>\n                            <div className={`flex align-items-center cursor-pointer menuHead px-3 ${isSelected || isParentActive ? \"p-highlight\" : \"\"}`}>\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                                            <span className=\"material-symbols-outlined\" style={{ fontSize: 18 }}>\n                                                {item.icon}\n                                            </span>\n                                        )}\n                                        <span>{item.label}</span>\n                                    </div>\n                                </Link>\n                                {hasChildren && (\n                                    <button\n                                        type=\"button\"\n                                        className=\"sidebar-chevrons-button\"\n                                        onClick={() => toggleExpansion(item.key)}\n                                        aria-label={`Toggle ${item.label} menu`}\n                                    >\n                                        <span className={`sidebar-chevrons ${isExpanded ? \"pi pi-angle-up\" : \"pi pi-angle-down\"}`} />\n                                    </button>\n                                )}\n                            </div>\n                            {hasChildren && isExpanded && (\n                                <div className=\"solid-panel-menu-children pl-3\">\n                                    {renderMenuItems(item.items)}\n                                </div>\n                            )}\n                        </li>\n                    );\n                })}\n            </ul>\n        );\n    };\n\n    return <div className=\"solid-panel-menu\">{renderMenuItems(items)}</div>;\n};\n\nexport default NavbarTwoMenu;\n"]}

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

@@ -1,6 +1,4 @@
 import Link from "../common/Link";
-import { usePathname } from "../../hooks/usePathname";
-import { PanelMenu } from "primereact/panelmenu";
 import { useState, useEffect } from "react";
 import { useSearchParams } from "../../hooks/useSearchParams";
 
@@ -73,17 +71,56 @@ const NavbarTwoMenu = ({ menuItems }: any) => {
         setExpandedKeys((prev: any) => ({ ...prev, ...newExpandedKeys }));
     }, [activeId]);
 
-    return (
-        <div className="solid-panel-menu">
-            <PanelMenu
-                model={items}
-                expandedKeys={expandedKeys}
-                onExpandedKeysChange={setExpandedKeys}
-                className="w-full"
-                multiple
-            />
-        </div>
-    );
+    const toggleExpansion = (key: string) => {
+        setExpandedKeys((prev: any) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    const renderMenuItems = (menuItems: any[]): React.ReactNode => {
+        return (
+            <ul className="solid-panel-menu-list">
+                {menuItems.map((item) => {
+                    const hasChildren = item.items && item.items.length > 0;
+                    const isExpanded = !!expandedKeys[item.key];
+                    const isSelected = activeId !== null && item.id !== null && item.id === activeId;
+                    const isParentActive = hasChildren && hasActiveChild(item.items);
+
+                    return (
+                        <li key={item.key}>
+                            <div className={`flex align-items-center cursor-pointer menuHead px-3 ${isSelected || isParentActive ? "p-highlight" : ""}`}>
+                                <Link href={item?.url ? item?.url : "#"} className="w-full flex justify-content-between font-normal">
+                                    <div className="flex align-items-center" style={{ gap: 10 }}>
+                                        {item.icon && (
+                                            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>
+                                                {item.icon}
+                                            </span>
+                                        )}
+                                        <span>{item.label}</span>
+                                    </div>
+                                </Link>
+                                {hasChildren && (
+                                    <button
+                                        type="button"
+                                        className="sidebar-chevrons-button"
+                                        onClick={() => toggleExpansion(item.key)}
+                                        aria-label={`Toggle ${item.label} menu`}
+                                    >
+                                        <span className={`sidebar-chevrons ${isExpanded ? "pi pi-angle-up" : "pi pi-angle-down"}`} />
+                                    </button>
+                                )}
+                            </div>
+                            {hasChildren && isExpanded && (
+                                <div className="solid-panel-menu-children pl-3">
+                                    {renderMenuItems(item.items)}
+                                </div>
+                            )}
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    };
+
+    return <div className="solid-panel-menu">{renderMenuItems(items)}</div>;
 };
 
 export default NavbarTwoMenu;

package/dist/components/layout/user-profile-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-profile-menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/user-profile-menu.tsx"],"names":[],"mappings":"AAqBA,QAAA,MAAM,eAAe,+CA4LpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"user-profile-menu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/user-profile-menu.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,eAAe,+CA8PpB,CAAC;AAEF,eAAe,eAAe,CAAC"}