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

package/dist/components/layout/AppSidebar.tsx

@@ -1,211 +1,328 @@
 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 { 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 SIDEBAR_TOGGLE_EVENT = "solidx:sidebar-toggle";
+const DESKTOP_SIDEBAR_WIDTH = "272px";
 
-    const [currentMenu, setCurrentMenu] = useState();
-    const [currentMainMenu, setCurrentMainMenu] = useState();
-    const [searchTerm, setSearchTerm] = useState("");
+function filterMenuItems(items: SolidMenuItem[], query: string): SolidMenuItem[] {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return items;
 
-    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)
+    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 });
         }
-    }, [menu])
+    });
+    return next;
+}
 
-    const { data } = useSession();
+const SidebarMenuTree = ({
+    items,
+    pathname,
+    forceExpand,
+}: {
+    items: SolidMenuItem[];
+    pathname: string;
+    forceExpand?: boolean;
+}) => {
+    const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});
 
-    // const handleToggle = () => setShow(!show);
-    const handleToggle = () => dispatch(toggleNavbar());
-    const handleMenu = (m: any) => {
-        // setShow(true);
-        dispatch(showNavbar());
-        setCurrentMainMenu(m.title);
-        setCurrentMenu(m.children);
+    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 = !!node.path && pathname === node.path;
+        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 visibleNavbar = useSelector((state: any) => state.navbarState.visibleNavbar);
+    const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
 
+    const [searchTerm, setSearchTerm] = useState("");
+    const [workspaceOpen, setWorkspaceOpen] = useState(false);
+    const [selectedWorkspaceKey, setSelectedWorkspaceKey] = useState("");
+    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());
+            }
+        };
 
-    const handleClickOutside = (event: any) => {
-        if (searchRef.current && !searchRef.current.contains(event.target)) {
-            setSearchShow(false);
-        }
-    };
+        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]);
 
     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 = menu.data.find((m: any) => m.key === defaultMenuKey) || menu.data[0];
+        setSelectedWorkspaceKey((prev) => prev || defaultWorkspace?.key || "");
+    }, [menu]);
+
+    useEffect(() => {
+        if (!isDesktop) {
+            dispatch(hideNavbar());
         }
+    }, [pathname, dispatch, isDesktop]);
 
-        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(() => {
+        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(" ");
 
-                <UserProfileMenu></UserProfileMenu>
-            </div>
-            {currentMenu && (
-                <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
+    const selectWorkspace = (workspace: SolidMenuItem) => {
+        setSelectedWorkspaceKey(workspace.key || "");
+        setSearchTerm("");
+        setWorkspaceOpen(false);
+    };
 
-                    <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}
+    return (
+        <>
+            {!isDesktop && visibleNavbar && <div className="solid-sidebar-backdrop" onClick={() => dispatch(toggleNavbar())} />}
+
+            <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} 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 ${pathname === item.path ? "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

package/dist/components/layout/DashboardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,IAAM,eAAe,GAAG;IAEpB,IAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAM,KAAK,GAAG;QACV;YACI,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE;gBACH;oBACI,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,eAAe;iBACxB;gBACD;oBACI,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,cAAc;iBACvB;aACJ;SACJ;KACJ,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,mHAAmH,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,aACxJ,eAAK,SAAS,EAAC,yBAAyB,aACpC,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,GAAG,EAC1E,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,QAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,iBAAiB,GAAG,EAChE,cAAK,SAAS,EAAC,MAAM,YACjB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAChC,YAAG,OAAO,EAAE,UAAC,KAAU,IAAK,OAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,EAA9B,CAA8B,YACtD,YAAG,SAAS,EAAC,WAAW,GAAK,GAC7B,GAEF,GACJ,IAEJ,EACN,eAAK,SAAS,EAAC,yBAAyB,aACpC,cAAK,SAAS,EAAC,UAAU,YACrB,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,YAAY,GAAK,EAC9B,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,cAAK,SAAS,EAAC,eAAe,YAC1B,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,eAAK,SAAS,EAAC,gBAAgB,aAC3B,kBAAQ,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,aAC1D,cAAK,GAAG,EAAC,QAAQ,EAAC,GAAG,EAAC,iCAAiC,GAAG,EAC1D,gBAAM,SAAS,EAAC,iBAAiB,aAC7B,eAAM,SAAS,EAAC,cAAc,6BAAoB,EAClD,eAAM,SAAS,EAAC,eAAe,kCAAyB,IACrD,EACP,YAAG,SAAS,EAAC,kBAAkB,GAAK,IAC/B,EACT,aAAI,SAAS,EAAC,4HAA4H,YACtI,yBACI,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,iBAAiB,GAAK,EACnC,qCAAoB,IACpB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,kBAAkB,GAAK,EACpC,mCAAkB,IAAI,EAC1B,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,sCAAqB,IACrB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,sBAAsB,GAAK,EACxC,sCAAqB,IACrB,IACH,GACJ,IACH,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAA;AACD,eAAe,eAAe,CAAC","sourcesContent":["\nimport { Button } from \"primereact/button\";\nimport { Menu } from \"primereact/menu\";\nimport { useRef } from \"react\";\n\nconst DashboardHeader = () => {\n\n    const menuLeft = useRef<any>(null);\n    const toast = useRef(null);\n    const items = [\n        {\n            label: 'Options',\n            items: [\n                {\n                    label: 'Refresh',\n                    icon: 'pi pi-refresh'\n                },\n                {\n                    label: 'Export',\n                    icon: 'pi pi-upload'\n                }\n            ]\n        }\n    ];\n\n    return (\n        <div className=\"flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static\" style={{ height: \"60px\" }}>\n            <div className=\"flex align-items-center\">\n                <Button label=\"New\" size=\"small\" type=\"submit\" className=\"small-button\" />\n                <Menu model={items} popup ref={menuLeft} id=\"popup_menu_left\" />\n                <div className=\"ml-2\">\n                    <div style={{ position: \"relative\" }}>\n                        <a onClick={(event: any) => menuLeft.current.toggle(event)}>\n                            <i className=\"pi pi-cog\"></i>\n                        </a>\n\n                    </div>\n                </div>\n\n            </div>\n            <div className=\"flex align-items-center\">\n                <div className=\"bgCircle\">\n                    <div style={{ position: \"relative\" }}>\n                        <i className=\"pi pi-bell\"></i>\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"bgCircle ml-3\">\n                    <div style={{ position: \"relative\" }}>\n                        <i className=\"pi pi-envelope\"></i>\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"topbar-profile\">\n                    <button className=\"topbar-profile-button p-link\" type=\"button\">\n                        <img alt=\"avatar\" src=\"/images/dashboard/Ellipse 1.svg\" />\n                        <span className=\"profile-details\">\n                            <span className=\"profile-name\">Gene Russell</span>\n                            <span className=\"profile-email\">ben95@example.com</span>\n                        </span>\n                        <i className=\"pi pi-angle-down\"></i>\n                    </button>\n                    <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\">\n                        <li>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-user mr-3\"></i>\n                                <span>Profile</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-inbox mr-3\"></i>\n                                <span>Inbox</span></a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-cog mr-3\"></i>\n                                <span>Settings</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-power-off mr-3\"></i>\n                                <span>Sign Out</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DashboardHeader;"]}
+{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidButton, SolidPopover, SolidPopoverContent, SolidPopoverTrigger } from \"../shad-cn-ui\";\nimport { SolidIcon, parseSolidIconMeta } from \"../shad-cn-ui/SolidIcon\";\n\nconst DashboardHeader = () => {\n\n    const [menuOpen, setMenuOpen] = useState(false);\n    const items = [\n        {\n            label: 'Refresh',\n            icon: 'pi pi-refresh'\n        },\n        {\n            label: 'Export',\n            icon: 'pi pi-upload'\n        }\n    ];\n\n    return (\n        <div className=\"flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static\" style={{ height: \"60px\" }}>\n            <div className=\"flex align-items-center\">\n                <SolidButton label=\"New\" size=\"sm\" type=\"submit\" className=\"small-button\" />\n                <SolidPopover open={menuOpen} onOpenChange={setMenuOpen}>\n                    <SolidPopoverTrigger asChild>\n                        <SolidButton\n                            type=\"button\"\n                            icon=\"pi pi-cog\"\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"ml-2\"\n                        />\n                    </SolidPopoverTrigger>\n                    <SolidPopoverContent side=\"bottom\" align=\"start\" className=\"solid-form-actions-popover\">\n                        <div className=\"solid-row-actions-menu\">\n                            {items.map((item) => (\n                                <button key={item.label} type=\"button\" className=\"solid-row-action-button\" onClick={() => setMenuOpen(false)}>\n                                    {(() => { const m = parseSolidIconMeta(item.icon); return m ? <SolidIcon name={m.name} spin={m.spin} className=\"solid-row-action-button-icon\" /> : <i className={`${item.icon} solid-row-action-button-icon`} />; })()}\n                                    <span className=\"solid-row-action-button-label\">{item.label}</span>\n                                </button>\n                            ))}\n                        </div>\n                    </SolidPopoverContent>\n                </SolidPopover>\n            </div>\n            <div className=\"flex align-items-center\">\n                <div className=\"bgCircle\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-bell\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"bgCircle ml-3\">\n                    <div style={{ position: \"relative\" }}>\n                        <SolidIcon name=\"si-envelope\" />\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"topbar-profile\">\n                    <button className=\"topbar-profile-button p-link\" type=\"button\">\n                        <img alt=\"avatar\" src=\"/images/dashboard/Ellipse 1.svg\" />\n                        <span className=\"profile-details\">\n                            <span className=\"profile-name\">Gene Russell</span>\n                            <span className=\"profile-email\">ben95@example.com</span>\n                        </span>\n                        <SolidIcon name=\"si-angle-down\" />\n                    </button>\n                    <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\">\n                        <li>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-user\" className=\"mr-3\" />\n                                <span>Profile</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-inbox\" className=\"mr-3\" />\n                                <span>Inbox</span></a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-cog\" className=\"mr-3\" />\n                                <span>Settings</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <SolidIcon name=\"si-power-off\" className=\"mr-3\" />\n                                <span>Sign Out</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DashboardHeader;\n"]}