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

package/dist/components/layout/AppSidebar.tsx

@@ -1,211 +1,405 @@
 import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
-import { showNavbar, toggleNavbar, hideNavbar } from "../../redux/features/navbarSlice";
+import { hideNavbar, toggleNavbar } from "../../redux/features/navbarSlice";
 import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
 import { useSession } from "../../hooks/useSession";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import NavbarTwoMenu from "./navbar-two-menu";
 import UserProfileMenu from "./user-profile-menu";
-import Image from "../common/Image";
-import SettingImage from '../../resources/images/Navigation/SolidSettinsIcon.svg'
-import { Avatar } from "primereact/avatar";
+import SolidLink from "../common/Link";
 import { usePathname } from "../../hooks/usePathname";
+import { useSearchParams } from "../../hooks/useSearchParams";
 import { env } from "../../adapters/env";
 
-const AppSidebar = () => {
-    const dispatch = useDispatch();
-    const pathname = usePathname();
-    // const [show, setShow] = useState(false);
-    const visibleNavbar = useSelector(
-        (state: any) => state.navbarState.visibleNavbar
-    );
-    const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
+type SolidMenuItem = {
+    key?: string;
+    title: string;
+    path?: string;
+    icon?: string | { src?: string };
+    children?: SolidMenuItem[];
+};
 
+const defaultMenuKey = env("NEXT_PUBLIC_DEFAULT_MENU_KEY");
+const SIDEBAR_STORAGE_KEY = "solidx.sidebar.collapsed";
+const SELECTED_WORKSPACE_STORAGE_KEY = "solidx.sidebar.selected-workspace";
+const SIDEBAR_TOGGLE_EVENT = "solidx:sidebar-toggle";
+const DESKTOP_SIDEBAR_WIDTH = "272px";
+const DEFAULT_WORKSPACE_TITLE = "Solid Core";
+const DEFAULT_WORKSPACE_KEY = "solid-core";
 
-    const [currentMenu, setCurrentMenu] = useState();
-    const [currentMainMenu, setCurrentMainMenu] = useState();
-    const [searchTerm, setSearchTerm] = useState("");
+function normalizePath(path: string): string {
+    if (!path || path === "/") return "/";
+    return path.endsWith("/") ? path.slice(0, -1) : path;
+}
 
-    useEffect(() => {
-        if (menu) {
-            setCurrentMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env("NEXT_PUBLIC_DEFAULT_MENU_KEY"))[0]?.children);
-            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === env("NEXT_PUBLIC_DEFAULT_MENU_KEY"))[0]?.title)
+function getPathAndParams(targetPath: string): { pathname: string; searchParams: URLSearchParams } {
+    const parsed = new URL(targetPath, "http://localhost");
+    return {
+        pathname: normalizePath(parsed.pathname),
+        searchParams: new URLSearchParams(parsed.search),
+    };
+}
+
+function doesSearchParamsMatchSubset(requiredParams: URLSearchParams, currentParams: URLSearchParams): boolean {
+    const currentValueCounts = new Map<string, number>();
+    currentParams.forEach((value, key) => {
+        const token = `${key}=${value}`;
+        currentValueCounts.set(token, (currentValueCounts.get(token) || 0) + 1);
+    });
+
+    let isSubset = true;
+    requiredParams.forEach((value, key) => {
+        if (!isSubset) return;
+        const token = `${key}=${value}`;
+        const count = currentValueCounts.get(token) || 0;
+        if (count <= 0) {
+            isSubset = false;
+            return;
         }
-    }, [menu])
+        currentValueCounts.set(token, count - 1);
+    });
 
-    const { data } = useSession();
+    return isSubset;
+}
 
-    // const handleToggle = () => setShow(!show);
-    const handleToggle = () => dispatch(toggleNavbar());
-    const handleMenu = (m: any) => {
-        // setShow(true);
-        dispatch(showNavbar());
-        setCurrentMainMenu(m.title);
-        setCurrentMenu(m.children);
+function isMenuPathActive(itemPath: string | undefined, currentPathname: string, currentSearchParams: URLSearchParams): boolean {
+    if (!itemPath) return false;
+
+    const { pathname: itemPathname, searchParams: itemSearchParams } = getPathAndParams(itemPath);
+    if (itemPathname !== normalizePath(currentPathname)) return false;
+
+    return doesSearchParamsMatchSubset(itemSearchParams, currentSearchParams);
+}
+
+function filterMenuItems(items: SolidMenuItem[], query: string): SolidMenuItem[] {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return items;
+
+    const next: SolidMenuItem[] = [];
+    items.forEach((item) => {
+        const children = item.children ? filterMenuItems(item.children, normalizedQuery) : [];
+        const matchesSelf = item.title.toLowerCase().includes(normalizedQuery);
+        if (matchesSelf || children.length > 0) {
+            next.push({ ...item, children });
+        }
+    });
+    return next;
+}
+
+function resolveDefaultWorkspace(items: SolidMenuItem[]) {
+    return (
+        items.find((item) => item.key === DEFAULT_WORKSPACE_KEY) ||
+        items.find((item) => item.title.trim().toLowerCase() === DEFAULT_WORKSPACE_TITLE.toLowerCase()) ||
+        items.find((item) => item.key === defaultMenuKey) ||
+        items[0]
+    );
+}
+
+const SidebarMenuTree = ({
+    items,
+    pathname,
+    searchParams,
+    forceExpand,
+}: {
+    items: SolidMenuItem[];
+    pathname: string;
+    searchParams: URLSearchParams;
+    forceExpand?: boolean;
+}) => {
+    const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});
+
+    const buildNodeId = (node: SolidMenuItem, parentId: string, index: number) => {
+        const base = node.key || node.path || node.title || `node-${index}`;
+        return `${parentId}/${base}`;
     };
 
     useEffect(() => {
-        // Check if screen is small at the time of route change
-        if (window.innerWidth <= 1199) {
-            dispatch(hideNavbar());
+        const initialExpanded: Record<string, boolean> = {};
+        if (forceExpand) {
+            const walk = (nodes: SolidMenuItem[], parentId = "root") => {
+                nodes.forEach((node, index) => {
+                    const nodeId = buildNodeId(node, parentId, index);
+                    if (node.children && node.children.length > 0 && node.key) {
+                        initialExpanded[nodeId] = true;
+                        walk(node.children, nodeId);
+                    } else if (node.children && node.children.length > 0) {
+                        initialExpanded[nodeId] = true;
+                        walk(node.children, nodeId);
+                    }
+                });
+            };
+            walk(items);
         }
-    }, [pathname, dispatch]);
+        setExpandedKeys(initialExpanded);
+    }, [items, forceExpand]);
+
+    const toggleExpanded = (nodeId: string) => {
+        setExpandedKeys((prev) => ({ ...prev, [nodeId]: !prev[nodeId] }));
+    };
+
+    const renderNode = (node: SolidMenuItem, depth = 0, parentId = "root", index = 0) => {
+        const nodeId = buildNodeId(node, parentId, index);
+        const hasChildren = !!(node.children && node.children.length > 0);
+        const isExpanded = expandedKeys[nodeId] === true;
+        const isActive = isMenuPathActive(node.path, pathname, searchParams);
+        const paddingLeft = 12 + depth * 14;
+
+        return (
+            <li key={nodeId} className="solid-sidebar-tree-item">
+                <div
+                    className={`solid-sidebar-tree-row ${isActive ? "is-active" : ""}`}
+                    style={{ paddingLeft }}
+                >
+                    {hasChildren ? (
+                        <button
+                            type="button"
+                            className="solid-sidebar-tree-parent"
+                            onClick={() => toggleExpanded(nodeId)}
+                            aria-expanded={isExpanded}
+                            aria-label={`Toggle ${node.title}`}
+                        >
+                            <span className="solid-sidebar-tree-label">{node.title}</span>
+                        </button>
+                    ) : node.path ? (
+                        <SolidLink href={node.path} className="solid-sidebar-tree-link">
+                            <span className="solid-sidebar-tree-label">{node.title}</span>
+                        </SolidLink>
+                    ) : (
+                        <span className="solid-sidebar-tree-label">{node.title}</span>
+                    )}
+                    {hasChildren && (
+                        <button
+                            type="button"
+                            className="solid-sidebar-tree-toggle"
+                            onClick={() => toggleExpanded(nodeId)}
+                            aria-label={`Toggle ${node.title}`}
+                        >
+                            <span className="solid-tree-plusminus">{isExpanded ? "−" : "+"}</span>
+                        </button>
+                    )}
+                </div>
+                {hasChildren && isExpanded && (
+                    <ul className="solid-sidebar-tree-list solid-sidebar-tree-children">
+                        {node.children!.map((child, childIndex) => renderNode(child, depth + 1, nodeId, childIndex))}
+                    </ul>
+                )}
+            </li>
+        );
+    };
 
+    return <ul className="solid-sidebar-tree-list">{items.map((item, index) => renderNode(item, 0, "root", index))}</ul>;
+};
+
+const AppSidebar = () => {
+    const dispatch = useDispatch();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const visibleNavbar = useSelector((state: any) => state.navbarState.visibleNavbar);
+    const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
+
+    const [searchTerm, setSearchTerm] = useState("");
+    const [workspaceOpen, setWorkspaceOpen] = useState(false);
+    const [selectedWorkspaceKey, setSelectedWorkspaceKey] = useState<string>(() => {
+        if (typeof window === "undefined") return "";
+        return window.localStorage.getItem(SELECTED_WORKSPACE_STORAGE_KEY) || "";
+    });
+    const [isDesktop, setIsDesktop] = useState<boolean>(typeof window === "undefined" ? true : window.innerWidth > 1199);
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
+        if (typeof window === "undefined") return false;
+        const stored = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
+        if (stored === null) return true;
+        return stored === "true";
+    });
+
+    const { data } = useSession();
 
     useEffect(() => {
         if (data) {
             dispatch(setUser(data?.user));
             dispatch(setIsAuthenticated(true));
         }
-    }, [data]);
+    }, [data, dispatch]);
 
-    const [isSearchShow, setSearchShow] = useState(false);
-    const searchRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        const onResize = () => {
+            const desktop = window.innerWidth > 1199;
+            setIsDesktop(desktop);
+            if (desktop) {
+                dispatch(hideNavbar());
+            }
+        };
+
+        onResize();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, [dispatch]);
+
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+        window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(isCollapsed));
+    }, [isCollapsed]);
 
-    const handleClickOutside = (event: any) => {
-        if (searchRef.current && !searchRef.current.contains(event.target)) {
-            setSearchShow(false);
+    useEffect(() => {
+        if (typeof window === "undefined") return;
+        if (!selectedWorkspaceKey) {
+            window.localStorage.removeItem(SELECTED_WORKSPACE_STORAGE_KEY);
+            return;
         }
-    };
+        window.localStorage.setItem(SELECTED_WORKSPACE_STORAGE_KEY, selectedWorkspaceKey);
+    }, [selectedWorkspaceKey]);
 
     useEffect(() => {
-        if (isSearchShow) {
-            document.addEventListener("mousedown", handleClickOutside);
-        } else {
-            document.removeEventListener("mousedown", handleClickOutside);
+        const width = isDesktop ? (isCollapsed ? "0px" : DESKTOP_SIDEBAR_WIDTH) : "0px";
+        document.documentElement.style.setProperty("--solid-sidebar-width", width);
+    }, [isDesktop, isCollapsed]);
+
+    useEffect(() => {
+        if (!menu?.data?.length) return;
+        const defaultWorkspace = resolveDefaultWorkspace(menu.data);
+        const hasSelectedWorkspace = menu.data.some((workspace: SolidMenuItem) => workspace.key === selectedWorkspaceKey);
+        const nextWorkspaceKey = hasSelectedWorkspace ? selectedWorkspaceKey : defaultWorkspace?.key || "";
+
+        if (nextWorkspaceKey !== selectedWorkspaceKey) {
+            setSelectedWorkspaceKey(nextWorkspaceKey);
         }
+    }, [menu, selectedWorkspaceKey]);
 
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isSearchShow]);
-
-    const additionalMenu = {
-        title: "General Settings",
-        key: "general-settings",
-        children: [
-            {
-                title: "Settings",
-                path: "",
-                key: "settings-menu-item",
-                children: [
-                    {
-                        title: "App Settings",
-                        path: "/admin/settings/app-settings",
-                        key: "app-setting"
-                    },
-                    {
-                        title: "Authentication Settings",
-                        path: "/admin/settings/authentication-settings",
-                        key: "auth-setting"
-                    },
-                    {
-                        title: "Misc",
-                        path: "/admin/settings/misc-settings",
-                        key: "misc-setting"
-                    }
-                ]
+    useEffect(() => {
+        if (!isDesktop) {
+            dispatch(hideNavbar());
+        }
+    }, [pathname, dispatch, isDesktop]);
+
+    useEffect(() => {
+        const onToggleRequest = () => {
+            if (window.innerWidth > 1199) {
+                setIsCollapsed((prev) => !prev);
+                return;
             }
-        ],
-        icon: env("NEXT_PUBLIC_SETTINGS_ICON") ? env("NEXT_PUBLIC_SETTINGS_ICON") : SettingImage
-    };
+            dispatch(toggleNavbar());
+        };
 
+        window.addEventListener(SIDEBAR_TOGGLE_EVENT, onToggleRequest);
+        return () => window.removeEventListener(SIDEBAR_TOGGLE_EVENT, onToggleRequest);
+    }, [dispatch]);
 
+    const workspaces: SolidMenuItem[] = menu?.data || [];
+    const selectedWorkspace = workspaces.find((m) => m.key === selectedWorkspaceKey) || workspaces[0];
+    const selectedWorkspaceChildren = selectedWorkspace?.children || [];
 
-    return (
-        <>
-            {visibleNavbar && (
-                <div
-                    className="sidebar-backdrop"
-                    onClick={handleToggle}
-                />
-            )}
-            {/* commented this as this is not working properly @Jenendar to figure this out... */}
-            {(visibleNavbar || currentMainMenu) && (
-                <div
-                    className={`sidebar-toggle-button  ${!visibleNavbar || !currentMainMenu ? "s-collapsed hidden md:flex" : ""}`}
-                    onClick={handleToggle}
-                // severity="secondary"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                        <rect x="0.3" y="0.3" width="23.4" height="23.4" rx="2.1" fill="white" />
-                        <rect x="0.3" y="0.3" width="23.4" height="23.4" rx="2.1" stroke="#D8E2EA" strokeWidth="0.6" />
-                        <path d="M5.09735 16V14.6667H13.5929V16H5.09735ZM5.09735 12.6667V11.3333H11.6324V12.6667H5.09735ZM5.09735 9.33333V8H13.5929V9.33333H5.09735Z" fill="#8D9199" />
-                        <path d="M16.2621 12L18.9026 14.3L18.099 15L14.6549 12L18.099 9L18.9026 9.7L16.2621 12Z" fill="#8D9199" />
-                    </svg>
-                </div>
-            )}
+    const filteredMenu = useMemo(
+        () => filterMenuItems(selectedWorkspaceChildren, searchTerm),
+        [selectedWorkspaceChildren, searchTerm]
+    );
 
-            <div className={`sidebar-left ${visibleNavbar ? "open" : ""}`}>
-                <div className="navbar-menu">
-                    {menu?.data.length > 0 && menu?.data.map((m: any) => {
-                        const iconSrc =
-                            typeof m.icon === "string"
-                                ? m.icon
-                                : m.icon && typeof m.icon.src === "string"
-                                    ? m.icon.src
-                                    : null;
-                        return (
-                            <a
-                                key={m.title}
-                                className={`flex align-items-center menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
-                                onClick={() => handleMenu(m)}
-                                style={{ cursor: 'pointer' }}
-                            >
-                                {m.icon ?
-                                    <Image
-                                        src={iconSrc.startsWith("/") ? iconSrc : `${env("API_URL")}/${iconSrc}`}
-                                        alt={m.title}
-                                        height={30}
-                                        width={30}
-                                        className="relative"
-                                        unoptimized
-                                    />
-                                    :
-                                    <div>
-                                        <Avatar label={m.title.charAt(0)} shape="circle" style={{ backgroundColor: 'var(--primary-color)', fontWeight: 500 }} />
-                                    </div>
-                                }
-                            </a>
-                        )
-                    })}
-                </div>
+    const shellClasses = [
+        "solid-sidebar",
+        isDesktop && isCollapsed ? "is-collapsed" : "",
+        !isDesktop && visibleNavbar ? "is-open" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const selectWorkspace = (workspace: SolidMenuItem) => {
+        setSelectedWorkspaceKey(workspace.key || "");
+        setSearchTerm("");
+        setWorkspaceOpen(false);
+    };
 
-                <UserProfileMenu></UserProfileMenu>
-            </div>
-            {currentMenu && (
-                <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
+    return (
+        <>
+            {!isDesktop && visibleNavbar && <div className="solid-sidebar-backdrop" onClick={() => dispatch(toggleNavbar())} />}
 
-                    <div className="flex relative justify-content-between align-items-center py-3 xl:py-4 px-3">
-                        <div className="text-base sidebar-title font-semibold">{currentMainMenu && currentMainMenu}</div>
-                        {/* <button
-                            className="sidebar-toggle-button"
-                            onClick={handleToggle}
+            <aside className={shellClasses}>
+                <div className="solid-sidebar-header">
+                    <div className="solid-workspace-switcher">
+                        <button
+                            type="button"
+                            className="solid-workspace-trigger"
+                            onClick={() => setWorkspaceOpen((prev) => !prev)}
+                            aria-label="Select workspace"
                         >
-                            <img
-                                style={{ cursor: "pointer" }}
-                                src={`/images/menu-toggle.png`}
-                                alt="Solid"
-                            />
-                        </button> */}
+                            <span className="solid-workspace-avatar">
+                                {(selectedWorkspace?.title || "W").slice(0, 1).toUpperCase()}
+                            </span>
+                            {!isCollapsed && (
+                                <>
+                                    <span className="solid-workspace-label-wrap">
+                                        <span className="solid-workspace-label-top">Workspace</span>
+                                        <span className="solid-workspace-label">{selectedWorkspace?.title || "Workspace"}</span>
+                                    </span>
+                                    <span className={`solid-workspace-chevron-dual ${workspaceOpen ? "is-open" : ""}`} aria-hidden="true">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+                                            <path d="M4 6L7 3L10 6" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+                                            <path d="M4 8L7 11L10 8" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+                                        </svg>
+                                    </span>
+                                </>
+                            )}
+                        </button>
+
+                        {workspaceOpen && !isCollapsed && (
+                            <div className="solid-workspace-menu">
+                                {workspaces.map((workspace) => (
+                                    <button
+                                        type="button"
+                                        key={workspace.key || workspace.title}
+                                        className={`solid-workspace-item ${workspace.key === selectedWorkspace?.key ? "is-active" : ""}`}
+                                        onClick={() => selectWorkspace(workspace)}
+                                    >
+                                        <span className="solid-workspace-item-avatar">{workspace.title.slice(0, 1).toUpperCase()}</span>
+                                        <span className="solid-workspace-item-label">{workspace.title}</span>
+                                    </button>
+                                ))}
+                            </div>
+                        )}
                     </div>
-                    {/* <div className="w-full px-3 mb-3" 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="absolute max-h-1rem" style={{ top: 5, right: 20 }}>
-                            <img
-                                style={{ cursor: "pointer", maxHeight: '1.3rem' }}
-                                src="/images/icons/jump-to-icon.png"
-                                alt="Solid"
+
+                </div>
+
+                {!isCollapsed ? (
+                    <>
+                        <div className="solid-sidebar-search-wrap">
+                            <input
+                                type="text"
+                                value={searchTerm}
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                placeholder="Search in menu..."
+                                className="solid-sidebar-search"
                             />
                         </div>
-                    </div> */}
-                    <div className="px-3 solid-sidebar-menuitems-wrapper">
-                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
+
+                        <div className="solid-sidebar-tree-wrap">
+                            <SidebarMenuTree items={filteredMenu} pathname={pathname} searchParams={searchParams} forceExpand={!!searchTerm.trim()} />
+                        </div>
+                    </>
+                ) : (
+                    <div className="solid-sidebar-collapsed-nav">
+                        {filteredMenu.slice(0, 10).map((item) => (
+                            <SolidLink
+                                key={item.key || item.title}
+                                href={item.path || "#"}
+                                className={`solid-collapsed-item ${isMenuPathActive(item.path, pathname, searchParams) ? "is-active" : ""}`}
+                                title={item.title}
+                            >
+                                {item.title.slice(0, 1).toUpperCase()}
+                            </SolidLink>
+                        ))}
                     </div>
+                )}
+
+                <div className="solid-sidebar-footer">
+                    <UserProfileMenu />
                 </div>
+            </aside>
+
+            {isDesktop && isCollapsed && (
+                <button
+                    type="button"
+                    className="solid-sidebar-hotspot"
+                    onClick={() => setIsCollapsed(false)}
+                    aria-label="Expand sidebar"
+                    title="Expand sidebar"
+                />
             )}
         </>
     );

package/dist/components/layout/DashboardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAkFpB,CAAA;AACD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAuFpB,CAAA;AACD,eAAe,eAAe,CAAC"}

package/dist/components/layout/DashboardHeader.js

@@ -1,26 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from "primereact/button";
-import { Menu } from "primereact/menu";
-import { useRef } from "react";
+import { useState } from "react";
+import { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from "../shad-cn-ui";
+import { SolidIcon, parseSolidIconMeta } from "../shad-cn-ui/SolidIcon";
 var DashboardHeader = function () {
-    var menuLeft = useRef(null);
-    var toast = useRef(null);
+    var _a = useState(false), menuOpen = _a[0], setMenuOpen = _a[1];
     var items = [
         {
-            label: 'Options',
-            items: [
-                {
-                    label: 'Refresh',
-                    icon: 'pi pi-refresh'
-                },
-                {
-                    label: 'Export',
-                    icon: 'pi pi-upload'
-                }
-            ]
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Export',
+            icon: 'pi pi-upload'
         }
     ];
-    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Button, { label: "New", size: "small", type: "submit", className: "small-button" }), _jsx(Menu, { model: items, popup: true, ref: menuLeft, id: "popup_menu_left" }), _jsx("div", { className: "ml-2", children: _jsx("div", { style: { position: "relative" }, children: _jsx("a", { onClick: function (event) { return menuLeft.current.toggle(event); }, children: _jsx("i", { className: "pi pi-cog" }) }) }) })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx("i", { className: "pi pi-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-user mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-inbox mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-cog mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-power-off mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
+    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(SolidButton, { label: "New", size: "sm", type: "submit", className: "small-button" }), _jsxs(SolidPopover, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(SolidPopoverTrigger, { asChild: true, children: _jsx(SolidButton, { type: "button", icon: "pi pi-cog", variant: "ghost", size: "sm", className: "ml-2" }) }), _jsx(SolidPopoverContent, { side: "bottom", align: "start", className: "solid-form-actions-popover", children: _jsx("div", { className: "solid-row-actions-menu", children: items.map(function (item) { return (_jsxs("button", { type: "button", className: "solid-row-action-button", onClick: function () { return setMenuOpen(false); }, children: [(function () { var m = parseSolidIconMeta(item.icon); return m ? _jsx(SolidIcon, { name: m.name, spin: m.spin, className: "solid-row-action-button-icon" }) : _jsx("i", { className: "".concat(item.icon, " solid-row-action-button-icon") }); })(), _jsx("span", { className: "solid-row-action-button-label", children: item.label })] }, item.label)); }) }) })] })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx(SolidIcon, { name: "si-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx(SolidIcon, { name: "si-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-user", className: "mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-inbox", className: "mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-cog", className: "mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx(SolidIcon, { name: "si-power-off", className: "mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
 };
 export default DashboardHeader;
 //# sourceMappingURL=DashboardHeader.js.map