@solidstarters/solid-core-ui 1.0.1 → 1.1.0

package/src/components/core/users/UserListView.tsx

@@ -1,22 +1,21 @@
 "use client";
-import React, { useState, useEffect, useRef } from "react";
+import { useDeleteMultipleUsersMutation, useLazyGetusersQuery } from '@/redux/api/userApi';
+import Link from "next/link";
+import { FilterMatchMode } from "primereact/api";
+import { Button } from "primereact/button";
+import { Column } from "primereact/column";
 import {
     DataTable,
     DataTableFilterMeta,
     DataTableStateEvent,
 } from "primereact/datatable";
-import { Column } from "primereact/column";
-import Link from "next/link";
-import { Button } from "primereact/button";
-import { FilterMatchMode, FilterOperator } from "primereact/api";
-import { useDeleteMultipleCategorysMutation, useLazyGetcategorysQuery } from "@/redux/api/categoryApi";
-import { useDeleteMultipleUsersMutation, useGetusersQuery, useLazyGetusersQuery } from '@/redux/api/userApi';
+import { useEffect, useRef, useState } from "react";
 
-import qs from "qs";
+import { CreateButton } from "@/components/common/CreateButton";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
 import { Dialog } from "primereact/dialog";
 import { Toast } from "primereact/toast";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
-import { CreateButton } from "@/components/common/CreateButton";
+import qs from "qs";
 
 interface Users {
     id: string;

package/src/components/layout/AdminSidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { useState } from "react";
+import { useState } from "react";
 
 const AdminSidebar = () => {
   const pathname = usePathname();

package/src/components/layout/AppConfig.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { AppConfigProps, LayoutConfig, LayoutState } from '@/types';
+import { PrimeReactContext } from 'primereact/api';
+import { Button } from 'primereact/button';
+import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
+import { Sidebar } from 'primereact/sidebar';
+import { classNames } from 'primereact/utils';
+import { useContext, useEffect, useState } from 'react';
+import { LayoutContext } from './context/layoutcontext';
+
+const AppConfig = (props: AppConfigProps) => {
+    const [scales] = useState([12, 13, 14, 15, 16]);
+    const { layoutConfig, setLayoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
+    const { changeTheme } = useContext(PrimeReactContext);
+
+    const onConfigButtonClick = () => {
+        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: true }));
+    };
+
+    const onConfigSidebarHide = () => {
+        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: false }));
+    };
+
+    const changeInputStyle = (e: RadioButtonChangeEvent) => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, inputStyle: e.value }));
+    };
+
+    const _changeTheme = (theme: string, colorScheme: string) => {
+        changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
+            setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
+        });
+    };
+
+    const decrementScale = () => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale - 1 }));
+    };
+
+    const incrementScale = () => {
+        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale + 1 }));
+    };
+
+    const applyScale = () => {
+        document.documentElement.style.fontSize = layoutConfig.scale + 'px';
+    };
+
+    useEffect(() => {
+        applyScale();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutConfig.scale]);
+
+    return (
+        <>
+            <button className="layout-config-button config-link" type="button" onClick={onConfigButtonClick}>
+                <i className="pi pi-cog"></i>
+            </button>
+
+            <Sidebar visible={layoutState.configSidebarVisible} onHide={onConfigSidebarHide} position="right" className="layout-config-sidebar w-20rem">
+                {!props.simple && (
+                    <>
+                        <h5>Scale</h5>
+                        <div className="flex align-items-center">
+                            <Button icon="pi pi-minus" type="button" onClick={decrementScale} rounded text className="w-2rem h-2rem mr-2" disabled={layoutConfig.scale === scales[0]}></Button>
+                            <div className="flex gap-2 align-items-center">
+                                {scales.map((item) => {
+                                    return <i className={classNames('pi pi-circle-fill', { 'text-primary-500': item === layoutConfig.scale, 'text-300': item !== layoutConfig.scale })} key={item}></i>;
+                                })}
+                            </div>
+                            <Button icon="pi pi-plus" type="button" onClick={incrementScale} rounded text className="w-2rem h-2rem ml-2" disabled={layoutConfig.scale === scales[scales.length - 1]}></Button>
+                        </div>
+
+                        <h5>Input Style</h5>
+                        <div className="flex">
+                            <div className="field-radiobutton flex-1">
+                                <RadioButton name="inputStyle" value={'outlined'} checked={layoutConfig.inputStyle === 'outlined'} onChange={(e) => changeInputStyle(e)} inputId="outlined_input"></RadioButton>
+                                <label htmlFor="outlined_input">Outlined</label>
+                            </div>
+                            <div className="field-radiobutton flex-1">
+                                <RadioButton name="inputStyle" value={'filled'} checked={layoutConfig.inputStyle === 'filled'} onChange={(e) => changeInputStyle(e)} inputId="filled_input"></RadioButton>
+                                <label htmlFor="filled_input">Filled</label>
+                            </div>
+                        </div>
+                    </>
+                )}
+                <h5>Appearance</h5>
+                <div className="grid">
+                    <div className="col-3">
+                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-light-purple', 'light')}>
+                            <img src="/images/layout/images/themes/lara-light-blue.png" className="w-2rem h-2rem" alt="Lara Light Blue" />
+                        </button>
+                    </div>
+                    <div className="col-3">
+                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-dark-purple', 'dark')}>
+                            <img src="/images/layout/images/themes/lara-dark-blue.png" className="w-2rem h-2rem" alt="Lara Dark Cyan" />
+                        </button>
+                    </div>
+                </div>
+            </Sidebar>
+        </>
+    );
+};
+
+export default AppConfig;

package/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,170 @@
+import { setIsAuthenticated, setUser } from "@/redux/features/userSlice";
+import { getSession, signOut, useSession } from "next-auth/react";
+import React, { useEffect, useRef, useState } from "react";
+import NavbarTwoMenu from "./navbar-two-menu";
+import UserProfileMenu from "./user-profile-menu";
+import { useDispatch, useSelector } from "react-redux";
+import { showNavbar, toggleNavbar } from "@/redux/features/navbarSlice";
+import { InputText } from "primereact/inputtext";
+import { Button } from "primereact/button";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { useGetSolidMenuBasedOnRoleQuery } from "@/redux/api/solidMenuApi";
+import { ToastContainer } from "@/helpers/ToastContainer";
+// import menu from "@/helpers/menu";
+
+const AppSidebar = () => {
+    const dispatch = useDispatch();
+
+    // 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 (
+        <>
+            <ToastContainer />
+
+            {/* commented this as this is not working properly @Jenendar to figure this out... */}
+            {(visibleNavbar || currentMainMenu) && (
+                <Button
+                    className={`sidebar-toggle-button ${!visibleNavbar ? "s-collapsed" : ""}`}
+                    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" stroke-width="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>
+                </Button>
+            )}
+
+            <div className="sidebar-left">
+                <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>
+
+                <UserProfileMenu></UserProfileMenu>
+            </div>
+            {currentMenu && (
+                <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
+
+                    <div className="flex relative justify-content-between align-items-center py-4 px-3">
+                        <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>
+                        {/* <button
+                            className="sidebar-toggle-button"
+                            onClick={handleToggle}
+                        >
+                            <img
+                                style={{ cursor: "pointer" }}
+                                src={`/images/menu-toggle.png`}
+                                alt="Solid"
+                            />
+                        </button> */}
+                    </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>
+                    </div> */}
+                    <div className="px-3">
+                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default AppSidebar;

package/src/components/layout/ButtonLoader.tsx

@@ -1,5 +1,4 @@
 "use client";
-import React from "react";
 
 const ButtonLoader = () => {
   return <div className="lds-dual-ring"></div>;

package/src/components/layout/CustomPagination.tsx

@@ -1,55 +1,55 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import Pagination from "react-js-pagination";
-
-interface Props {
-  resPerPage: number;
-  filteredRoomsCount: number;
-}
-
-const CustomPagination = ({ resPerPage, filteredRoomsCount }: Props) => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  let page = searchParams.get("page") || 1;
-  page = Number(page);
-
-  let queryParams;
-
-  const handlePageChange = (currentPage: string) => {
-    if (typeof window !== "undefined") {
-      queryParams = new URLSearchParams(window.location.search);
-
-      if (queryParams.has("page")) {
-        queryParams.set("page", currentPage);
-      } else {
-        queryParams.append("page", currentPage);
-      }
-
-      const path = `${window.location.pathname}?${queryParams.toString()}`;
-      router.push(path);
-    }
-  };
-  return (
-    <div>
-      {resPerPage < filteredRoomsCount && (
-        <div className="d-flex justify-content-center mt-5">
-          <Pagination
-            activePage={page}
-            itemsCountPerPage={resPerPage}
-            totalItemsCount={filteredRoomsCount}
-            onChange={handlePageChange}
-            nextPageText={"Next"}
-            prevPageText={"Prev"}
-            firstPageText={"First"}
-            lastPageText={"Last"}
-            itemClass="page-item"
-            linkClass="page-link"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CustomPagination;
+// "use client";
+
+// import { useRouter, useSearchParams } from "next/navigation";
+// import Pagination from "react-js-pagination";
+
+// interface Props {
+//   resPerPage: number;
+//   filteredRoomsCount: number;
+// }
+
+// const CustomPagination = ({ resPerPage, filteredRoomsCount }: Props) => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+//   let page = searchParams.get("page") || 1;
+//   page = Number(page);
+
+//   let queryParams;
+
+//   const handlePageChange = (currentPage: string) => {
+//     if (typeof window !== "undefined") {
+//       queryParams = new URLSearchParams(window.location.search);
+
+//       if (queryParams.has("page")) {
+//         queryParams.set("page", currentPage);
+//       } else {
+//         queryParams.append("page", currentPage);
+//       }
+
+//       const path = `${window.location.pathname}?${queryParams.toString()}`;
+//       router.push(path);
+//     }
+//   };
+//   return (
+//     <div>
+//       {resPerPage < filteredRoomsCount && (
+//         <div className="d-flex justify-content-center mt-5">
+//           <Pagination
+//             activePage={page}
+//             itemsCountPerPage={resPerPage}
+//             totalItemsCount={filteredRoomsCount}
+//             onChange={handlePageChange}
+//             nextPageText={"Next"}
+//             prevPageText={"Prev"}
+//             firstPageText={"First"}
+//             lastPageText={"Last"}
+//             itemClass="page-item"
+//             linkClass="page-link"
+//           />
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default CustomPagination;

package/src/components/layout/FilterMenu.tsx

@@ -3,7 +3,6 @@ import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { useRef, useState } from "react";
-import FilterComponent from "../common/FilterComponent";
 
 const FilterMenu = () => {
     const op = useRef<any>(null);
@@ -105,7 +104,7 @@ const FilterMenu = () => {
                 </div>
             </OverlayPanel>
             <Dialog header="Add Custom Filter" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
-                <FilterComponent></FilterComponent>
+                {/* <FilterComponent></FilterComponent> */}
             </Dialog>
 
             {/* <Dialog

package/src/components/layout/GlobalSearch.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { usePathname } from 'next/navigation'
-import { IconField } from 'primereact/iconfield'
-import { InputIcon } from 'primereact/inputicon'
-import { InputText } from 'primereact/inputtext'
+import { usePathname } from 'next/navigation';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
 
 export const GlobalSearch = () => {
     const path = usePathname();

package/src/components/layout/ListingHeader.tsx

@@ -1,12 +1,12 @@
 "use client";
-import React, { useRef, useState } from "react";
 import { Menu } from "primereact/menu";
+import React, { useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 // import { RootState } from "@/redux/store";
 import { gridView, listView } from "@/redux/features/dataViewSlice";
 import { usePathname, useRouter } from 'next/navigation';
-import FilterMenu from "./FilterMenu";
 import { HeaderDynamicTitles } from "../common/HeaderDynamicTitles";
+import FilterMenu from "./FilterMenu";
 
 const ListingHeader = () => {
   const dispatch = useDispatch();

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

@@ -0,0 +1,52 @@
+'use client';
+import React, { useState, createContext } from 'react';
+import { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '@/types';
+export const LayoutContext = createContext({} as LayoutContextProps);
+
+export const LayoutProvider = ({ children }: ChildContainerProps) => {
+    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
+        inputStyle: 'outlined',
+        colorScheme: 'light',
+        theme: 'solid-light-purple',
+        scale: 14,
+        authLayout: 'Center'
+    });
+
+    const [layoutState, setLayoutState] = useState<LayoutState>({
+        overlayMenuActive: false,
+        profileSidebarVisible: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false
+    });
+
+    const onMenuToggle = () => {
+
+        if (isDesktop()) {
+            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));
+        } else {
+            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));
+        }
+    };
+
+    const showProfileSidebar = () => {
+        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));
+    };
+
+ 
+
+    const isDesktop = () => {
+        return window.innerWidth > 991;
+    };
+
+    const value: LayoutContextProps = {
+        layoutConfig,
+        setLayoutConfig,
+        layoutState,
+        setLayoutState,
+        onMenuToggle,
+        showProfileSidebar
+    };
+
+    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
+};

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

@@ -1,7 +1,6 @@
 "use client";
 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";
@@ -11,7 +10,7 @@ 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 { useDispatch } from "react-redux";
 import NavbarTwoMenu from "./navbar-two-menu";
 import UserProfileMenu from "./user-profile-menu";
 // import menu from "@/helpers/menu";
@@ -21,9 +20,11 @@ const NavbarOne = () => {
 
     // const { user, isAuthenticated } = useAppSelector((state) => state.auth);
     // const [show, setShow] = useState(false);
-    const visibleNavbar = useSelector(
-        (state: any) => state.navbarState.visibleNavbar
-    );
+    // const visibleNavbar = useSelector(
+    //     (state: any) => state.navbarState.visibleNavbar
+    // );
+    const [visibleNavbar, setVisibleNavbar] = useState(false);
+
     const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
 
 
@@ -41,16 +42,14 @@ const NavbarOne = () => {
     const { data } = useSession();
 
     // const handleToggle = () => setShow(!show);
-    const handleToggle = () => dispatch(toggleNavbar());
+    const handleToggle = () => setVisibleNavbar(!visibleNavbar);
     const handleMenu = (m: any) => {
         // setShow(true);
-        dispatch(showNavbar());
+        setVisibleNavbar(!visibleNavbar);
         setCurrentMainMenu(m.title);
         setCurrentMenu(m.children);
     };
 
-
-
     useEffect(() => {
         if (data) {
             dispatch(setUser(data?.user));

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

@@ -1,8 +1,8 @@
-"use client";
-import { useState } from "react";
-import { PanelMenu } from "primereact/panelmenu";
+'use client';
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { PanelMenu } from "primereact/panelmenu";
+import { useState } from "react";
 
 const NavbarTwoMenu = ({ menuItems }: any) => {
     const pathname = usePathname();
@@ -12,13 +12,16 @@ const NavbarTwoMenu = ({ menuItems }: 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>
+            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${currentItem === activeParentPath ? ' p-highlight' : ''}`} onClick={options.onClick}>
+                <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-medium">
+                    <div className="flex align-items-center gap-3">
+                        <span className={item.icon} />
+                        <span className="">
+                            {item.label}
+                        </span>
+                    </div>
                     {item?.items && item?.items?.length > 0 &&
-                        <span className={`${expandedKeys[item.key] === true ? "pi pi-angle-up" : "pi pi-angle-down"}`} style={{ color: "#8D9199" }} />
+                        <span className={`sidebar-chevrons ${expandedKeys[item.key] === true ? "pi pi-angle-up" : "pi pi-angle-down"}`} />
                     }
                 </Link>
             </div>
@@ -29,7 +32,7 @@ const NavbarTwoMenu = ({ menuItems }: any) => {
         return menuItems.map((mi) => ({
             key: mi.key,
             label: mi.title,
-            icon: mi.children ? "pi pi-angle-down" : "",
+            icon: mi.children ? "pi pi-folder" : "",
             template: itemRenderer,
             url: mi.path ? mi.path : null,
             items: mi.children ? createMenuItems(mi.children) : null, // Recursively add children
@@ -50,7 +53,7 @@ const NavbarTwoMenu = ({ menuItems }: any) => {
     };
 
     return (
-        <div className="card flex flex-column align-items-center gap-3">
+        <div className="solid-panel-menu">
             <PanelMenu
                 model={items}
                 expandedKeys={expandedKeys}

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

@@ -1,6 +1,6 @@
 "use client";
-import { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
 
 const NavbarTwo = () => {
   const router = useRouter();