@solidstarters/solid-core-ui 0.1.26

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

@@ -0,0 +1,258 @@
+import { ToastContainer } from "@/helpers/ToastContainer";
+import { useGetSolidMenuBasedOnRoleQuery } from "@/redux/api/solidMenuApi";
+import { showNavbar, toggleNavbar } from "@/redux/features/navbarSlice";
+import { setIsAuthenticated, setUser } from "@/redux/features/userSlice";
+// import { useAppDispatch } from "@/redux/hooks";
+// import { RootState } from "@/redux/store.js";
+import { signOut, useSession } from "next-auth/react";
+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, useSelector } from "react-redux";
+import NavbarTwoMenu from "./navbar-two-menu";
+import UserProfileMenu from "./user-profile-menu";
+// import menu from "@/helpers/menu";
+
+const NavbarOne = () => {
+    const dispatch = useDispatch();
+
+    // const { user, isAuthenticated } = useAppSelector((state) => state.auth);
+    // const [show, setShow] = useState(false);
+    const visibleNavbar = useSelector(
+        (state: any) => state.navbarState.visibleNavbar
+    );
+    const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
+
+
+    const [currentMenu, setCurrentMenu] = useState();
+    const [currentMainMenu, setCurrentMainMenu] = useState();
+    const [searchTerm, setSearchTerm] = useState("");
+
+    useEffect(() => {
+        if (menu) {
+            setCurrentMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === process.env.NEXT_PUBLIC_DEFAULT_MENU_KEY)[0]?.children);
+            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === process.env.NEXT_PUBLIC_DEFAULT_MENU_KEY)[0]?.title)
+        }
+    }, [menu])
+
+    const { data } = useSession();
+
+    // const handleToggle = () => setShow(!show);
+    const handleToggle = () => dispatch(toggleNavbar());
+    const handleMenu = (m: any) => {
+        // setShow(true);
+        dispatch(showNavbar());
+        setCurrentMainMenu(m.title);
+        setCurrentMenu(m.children);
+    };
+
+
+
+    useEffect(() => {
+        if (data) {
+            dispatch(setUser(data?.user));
+            dispatch(setIsAuthenticated(true));
+        }
+    }, [data]);
+
+    const logoutHandler = () => {
+        signOut();
+    };
+
+    const handleSearch = () => {
+        // TODO: Handle the search logic here
+
+    };
+
+    const [isSearchShow, setSearchShow] = useState(false);
+    const searchRef = useRef<HTMLDivElement>(null);
+
+    const handleClickOutside = (event: any) => {
+        if (searchRef.current && !searchRef.current.contains(event.target)) {
+            setSearchShow(false);
+        }
+    };
+
+    useEffect(() => {
+        if (isSearchShow) {
+            document.addEventListener("mousedown", handleClickOutside);
+        } else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isSearchShow]);
+
+
+
+    return (
+        <div className="flex flex-column md:flex-row justify-content-between navBar">
+            <ToastContainer />
+
+            {/* commented this as this is not working properly @Jenendar to figure this out... */}
+            {currentMainMenu && (
+                <div>
+                    <a
+                        className={
+                            visibleNavbar
+                                ? "navtwo-toggle active-menu-image"
+                                : "navtwo-toggle"
+                        }
+                        onClick={handleToggle}
+                    >
+                        <img
+                            style={{ cursor: "pointer" }}
+                            src={`/images/menu-toggle.png`}
+                            alt="Solid"
+                        />
+                    </a>
+                </div>
+            )}
+            <div className="navBarOne">
+                <div>
+                    {/* <div className="p-0">
+                        <div className="navbar-brand">
+                            <a href="/">
+                                <img
+                                    style={{ cursor: "pointer" }}
+                                    src="/images/logo.png"
+                                    alt="Solid"
+                                />
+                            </a>
+                        </div>
+                    </div> */}
+                    <div className="navbar-menu">
+                        <>
+                            {menu && menu.data.length > 0 && menu.data.map((m: any) => (
+                                <div
+                                    key={m.title}
+                                    className={`menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
+                                >
+                                    <a onClick={() => handleMenu(m)}>
+                                        <img
+                                            style={{ cursor: "pointer", width: '30px' }}
+                                            // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}
+                                            // src={`/images/menu/${m.title}.svg`}
+                                            src={m.icon.startsWith("/") ? m.icon : `${process.env.API_URL}/${m.icon}`}
+                                            // src={`/images/menu/app-builder.svg`}
+                                            alt="Solid"
+                                        />
+                                    </a>
+                                </div>
+                            ))}
+                        </>
+                    </div>
+                </div>
+                <UserProfileMenu></UserProfileMenu>
+            </div>
+            {currentMenu && (
+                <div className={visibleNavbar ? "show navBarTwo" : "hide navBarTwo"}>
+                    <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 &&
+                            <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="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
+                                type="text"
+                                placeholder="Jump to..."
+                                name="lastName"
+                                id="lastName"
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                value={searchTerm}
+                                className=""
+                            />
+                            <img
+                                style={{ cursor: "pointer" }}
+                                src="/images/icons/jump-to-icon.png"
+                                alt="Solid"
+                            />
+                        </div> */}
+                    </div>
+                    {/* <div className="flex flex-column md:flex-row  navtwo-header justify-content-between">
+            <div className="text-sm font-semibold">{currentMainMenu && currentMainMenu}</div> */}
+                    {/* <a
+              className={
+                visibleNavbar
+                  ? "navtwo-toggle active-menu-image"
+                  : "navtwo-toggle"
+              }
+              onClick={handleToggle}
+            >
+              <img
+                style={{ cursor: "pointer" }}
+                src={`/images/menu-toggle.png`}
+                alt="Solid"
+              />
+            </a> */}
+                    {/* </div>
+          <div className="p-inputgroup"> */}
+                    {/* <div className="p-inputgroup navtwo-searchbox">
+              
+              <span className="p-inputgroup-addon">
+                <i className="pi pi-search "></i>
+              </span>
+              <InputText
+                placeholder="Search"
+                onChange={e => setSearchTerm(e.target.value)} 
+                />
+              <span className="p-inputgroup-addon">⌘+k</span>
+            </div> */}
+                    {/* <div className="input-icon inputDiv navtwo-searchbox">
+              <i className="pi pi-search " style={{ color: '#8D9199' }}></i>
+              <input
+                type="text"
+                placeholder="Jump to..."
+                name="lastName"
+                id="lastName"
+                onChange={(e) => setSearchTerm(e.target.value)}
+                value={searchTerm}
+                className=""
+              />
+              <img
+                style={{ cursor: "pointer" }}
+                src="/images/icons/jump-to-icon.png"
+                alt="Solid"
+              />
+            </div> */}
+
+                    {/* <Button icon="pi pi-search" className="p-button-outlined" onClick={handleSearch} /> */}
+                    {/* </div> */}
+
+                    <div
+                        className={
+                            visibleNavbar ? "navTwoMenuLayout px-2 show" : "navTwoMenuLayout hide"
+                        }
+                    >
+                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default NavbarOne;

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

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { PanelMenu } from "primereact/panelmenu";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NavbarTwoMenu = ({ menuItems }: any) => {
+    const pathname = usePathname();
+    const activeParentPath = pathname.split('/').slice(-2, -1)[0];
+
+    const [expandedKeys, setExpandedKeys] = useState<any>({});
+    const itemRenderer = (item: any, options: any) => {
+        const currentItem = item?.url?.split('/').slice(-2, -1)[0];
+        return (
+            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-2 ${currentItem === activeParentPath ? 'active-solid-men p-highlight' : ''}`} onClick={options.onClick}>
+                <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-semibold">
+                    <span className="">
+                        {item.label}
+                    </span>
+                    {item?.items && item?.items?.length > 0 &&
+                        <span className={`${expandedKeys[item.key] === true ? "pi pi-angle-up" : "pi pi-angle-down"}`} style={{ color: "#8D9199" }} />
+                    }
+                </Link>
+            </div>
+        )
+    };
+
+    const createMenuItems = (menuItems: any[]): any[] => {
+        return menuItems.map((mi) => ({
+            key: mi.key,
+            label: mi.title,
+            icon: mi.children ? "pi pi-angle-down" : "",
+            template: itemRenderer,
+            url: mi.path ? mi.path : null,
+            items: mi.children ? createMenuItems(mi.children) : null, // Recursively add children
+        }));
+    };
+
+    const items = createMenuItems(menuItems);
+
+    const onExpandedKeysChange = (keys: any) => {
+        setExpandedKeys(keys);
+    };
+
+    const expandNode = (node: any) => {
+        if (node.items && node.items.length) {
+            expandedKeys[node.key] = true;
+            node.items.forEach(expandNode);
+        }
+    };
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <PanelMenu
+                model={items}
+                expandedKeys={expandedKeys}
+                onExpandedKeysChange={onExpandedKeysChange}
+                className="w-full"
+                multiple
+            />
+        </div>
+    );
+};
+
+export default NavbarTwoMenu;

package/src/components/layout/navbar-two.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+
+const NavbarTwo = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [renderMenu, setRenderMenu] = useState();
+
+  const iamMenu = [
+    {
+      title: "Users",
+      url: "users",
+      subMenu: [],
+    },
+    {
+      title: "Model",
+      url: "model",
+      subMenu: [
+        { title: "Add Model", url: "", subMenu: ["Add One", "Add Multiple"] },
+        { title: "Delete Model", url: "delete", subMenu: [] },
+      ],
+    },
+    {
+      title: "Field",
+      url: "field",
+      subMenu: [
+        { title: "Add Field", subMenu: ["Add One", "Add Multiple"] },
+        { title: "Delete Field", url: "delete", subMenu: [] },
+      ],
+    },
+  ];
+
+  return <></>
+};
+
+export default NavbarTwo;

package/src/components/layout/user-profile-menu.tsx

@@ -0,0 +1,214 @@
+// import { useAppSelector } from "@/redux/hooks";
+import { signOut } from "next-auth/react";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+
+const UserProfileMenu = () => {
+  // const { user } = useAppSelector((state) => state.auth);
+  const [checked, setChecked] = useState(false);
+  const dispatch = useDispatch();
+  const op = useRef(null);
+  const logoutHandler = () => {
+    signOut();
+  };
+
+
+  return (
+    <div className="userProfile">
+      <div className="card flex justify-content-center">
+        <img
+          style={{ cursor: "pointer",width:'30px' }}
+          src={`/images/profile.png`}
+          alt="Solid"
+          //@ts-ignore
+          onClick={(e:any) => op?.current?.toggle(e)}
+        />
+        <OverlayPanel ref={op} className="user-profile-panel">
+          {/* <div className="user-profile-menu">
+            <div className="row align-items-center">
+              <div className="col-4"></div>
+              <div className="col-8">
+                <p>User Name</p>
+                <p>Email</p>
+              </div>
+            </div>
+            <div className="row align-items-center">
+              <div className="col-4">
+                <img
+                  style={{ cursor: "pointer" }}
+                  src={`/images/dark-mode.png`}
+                  alt="Solid"
+                />
+              </div>
+              <div className="col-8">
+                <p>Dark Mode</p>
+              </div>
+            </div>
+            <a onClick={() => signOut()}>Logout</a>
+          </div> */}
+          <div
+            className="w-full md:w-15rem p-menu p-component"
+            data-pc-name="menu"
+            data-pc-section="root"
+          >
+            <ul
+              className="p-menu-list p-reset"
+              id="pr_id_11_list"
+              role="menu"
+              data-pc-section="menu"
+            >
+              <li
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <button className="p-menuitem-link w-full p-link flex align-items-center  p-2 pl-4 text-color hover:surface-200 border-noround">
+                  <div
+                    className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle"
+                    data-pc-name="avatar"
+                    data-pc-section="root"
+                  >
+                    <img
+                      alt="avatar"
+                      src={`/images/profile.png`}
+                      data-pc-section="image"
+                      style={{maxWidth:'30px'}}
+                    ></img>
+                  </div>
+                  <div className="flex flex-column align">
+                    <span className="font-bold">User Name</span>
+                    {/* <span className="text-sm">{user?.username}</span> */}
+                  </div>
+                </button>
+              </li>
+
+              {/* <li
+                id="pr_id_11_separator_1"
+                className="p-menu-separator"
+                role="separator"
+                data-pc-section="separator"
+              ></li>
+              <li
+                id="pr_id_11_5"
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <div className="p-menuitem-link w-full p-link flex align-items-center justify-content-between p-2 pl-4 text-color hover:surface-200 border-noround">
+                  <div>
+                    <span className="pi pi-moon"></span>
+                    <span className="font-bold mx-2">Dark Mode</span>
+                  </div>
+                  <div className="flex flex-column align">
+                    <InputSwitch
+                      checked={checked}
+                      onChange={(e) => {
+                        setChecked(e.value);
+                        dispatch(toggleTheme());
+                      }}
+                    />
+                  </div>
+                </div>
+              </li>
+
+              <li
+                className="p-menu-separator"
+                role="separator"
+                data-pc-section="separator"
+              ></li>
+              <li
+                role="none"
+                className="p-submenu-header"
+                data-pc-section="submenuheader"
+              >
+                Teams
+              </li>
+
+              <li
+                id="pr_id_11_5"
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <div className="p-menuitem-link w-full p-link flex align-items-center justify-content-between p-2 pl-4 text-color hover:surface-200 border-noround">
+                  <div>
+                    <span className="pi pi-moon"></span>
+                    <span className="mx-2">Design</span>
+                  </div>
+                </div>
+              </li>
+              <li
+                role="none"
+                className="p-submenu-header"
+                data-pc-section="submenuheader"
+              >
+                Settings
+              </li>
+              <li
+                id="pr_id_11_5"
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <div className="p-menuitem-link w-full p-link flex align-items-center justify-content-between p-2 pl-4 text-color hover:surface-200 border-noround">
+                  <div>
+                    <span className="pi pi-cog"></span>
+                    <span className="mx-2">General Settings</span>
+                  </div>
+                </div>
+              </li>
+              <li
+                id="pr_id_11_5"
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <div className="p-menuitem-link w-full p-link flex align-items-center justify-content-between p-2 pl-4 text-color hover:surface-200 border-noround">
+                  <div>
+                    <span className="pi pi-question-circle"></span>
+                    <span className="mx-2">Support</span>
+                  </div>
+                </div>
+              </li> */}
+
+              <li
+                className="p-menu-separator"
+                role="separator"
+                data-pc-section="separator"
+              ></li>
+              <li
+                id="pr_id_11_sub_3_2"
+                className="p-menuitem"
+                role="menuitem"
+                aria-label="Logout"
+                data-p-focused="false"
+                data-p-disabled="false"
+                data-pc-section="menuitem"
+              >
+                <div className="p-menuitem-content">
+                  <a className="flex align-items-center p-menuitem-link" onClick={e=> logoutHandler()}>
+                    <span className="pi pi-sign-out"></span>
+                    <span className="mx-2">Logout</span>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </OverlayPanel>
+      </div>
+    </div>
+  );
+};
+
+export default UserProfileMenu;

package/src/components/layout/user-profile.tsx

@@ -0,0 +1,6 @@
+const UserProfile = () => {
+  // const subMenu = ["Add Module sub menu", "Edit sub menu"];
+  return <div className="UserProfile">vsfvs</div>;
+};
+
+export default UserProfile;

package/src/components/modelsComponents/filterIcon.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const FilterIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none">
+            <path d="M7 12V10H11V12H7ZM3 7V5H15V7H3ZM0 2V0H18V2H0Z" fill="#8D9199" />
+        </svg>
+    )
+}