nexus-public 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexus-public",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Nexus public React components for Next.js",
   "type": "module",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "next": "16.2.6"
   },
   "dependencies": {
-    "nexus-shared": "^1.1.19"
+    "nexus-shared": "^1.1.21"
   },
   "devDependencies": {
     "@types/react": "^19.2.15",

package/src/api-services/system-service.tsx

@@ -0,0 +1,13 @@
+"use server";
+
+import { APIS, EMenuTargets, HttpGet, IClientMenu, NEXUS_CONFIG, NEXUS_INFO } from "nexus-shared";
+
+// @ts-ignore
+const processEnv = process.env;
+const TOKEN_GLOBAL_CLIENT_MENU = processEnv.TOKEN_GLOBAL_CLIENT_MENU as string;
+
+export const GetClientMenusAsync = async (): Promise<IClientMenu[]> => {
+  const response = await HttpGet(`${APIS.CONFIGURATION}/Resources/GlobalMenus/${NEXUS_INFO.CURRENT_MODULE}/${NEXUS_INFO.IS_ADMIN_MODULE ? EMenuTargets.AdminModule : EMenuTargets.ClientModule}/${TOKEN_GLOBAL_CLIENT_MENU}`, null, NEXUS_CONFIG.DEFAULT_REVALIDATE_TIME_ONE_DAY);
+  if (!response.isSuccess) return [];
+  return response.result as IClientMenu[];
+};

package/src/components/layouts/client-layout.tsx

@@ -1,24 +1,26 @@
 "use server";
 
-import { EBackgrounds, GetClientMenus, GetUserPanels, GetUtilityMenus, GlobalLayout, IGlobalLayout, NEXUS_CONFIG } from "nexus-shared";
+import { EBackgrounds, GetUserPanelsAsync, GetUtilityMenusAsync, GlobalLayout, HasAccessToken, IGlobalLayout, NEXUS_CONFIG } from "nexus-shared";
 import { UtilityMenu } from "nexus-shared/client";
-import { HasAuthSession } from "nexus-shared/sso-server";
 import React from "react";
+import { GetClientMenusAsync } from "../../api-services/system-service";
 import { ClientMenu } from "./client-menu";
 
+import "./../../styles/nexus.layout.css";
+
 export const ClientLayout = async ({ children, globalLayout, menuBackground }: Readonly<{ children: React.ReactNode; globalLayout: IGlobalLayout; menuBackground: EBackgrounds }>) => {
-  const authCookies = await HasAuthSession();
-  const utilityMenus = await GetUtilityMenus();
-  const userPanels = await GetUserPanels();
-  const clientMenus = await GetClientMenus();
+  const hasAccessToken = await HasAccessToken(false);
+  const utilityMenus = await GetUtilityMenusAsync();
+  const userPanels = await GetUserPanelsAsync();
+  const clientMenus = await GetClientMenusAsync();
 
   return (
     <GlobalLayout globalLayout={globalLayout}>
       <div style={{ height: "100vh", width: "100vw" }} className="oh df ddc">
-        <div style={{ zIndex: "2" }} className={`bb1 ${menuBackground}`}>
-          <div style={{ height: "fit-content", zIndex: "2" }} className="row mw ma df ac client-menu">
+        <div style={{ zIndex: "1" }} className={`bb1 ${menuBackground}`}>
+          <div style={{ height: "fit-content" }} className="row mw ma df ac client-menu">
             <ClientMenu column={8} clientMenus={clientMenus} boxBackground={menuBackground} />
-            <UtilityMenu column={4} utilityMenus={utilityMenus} userPanels={userPanels} globalLayout={globalLayout} iconBoxBackground={menuBackground} />
+            <UtilityMenu column={4} utilityMenus={utilityMenus} userPanels={userPanels} globalLayout={globalLayout} iconBoxBackground={menuBackground} hasAccessToken={hasAccessToken} />
           </div>
         </div>
         <div style={{ zIndex: "0" }} className={`body-context h100 fg sb ${NEXUS_CONFIG.DEFAULT_BACKGROUND}`}>

package/src/components/layouts/client-menu.tsx

@@ -1,29 +1,177 @@
 "use client";
-
 import Image from "next/image";
 import Link from "next/link";
-import { DEFAULT_SMALL_ICON_BOX_SIZE, EBackgrounds, EIconTypes, EOpacity, ESizes, FILES, IClientMenu } from "nexus-shared";
-import { Icon } from "nexus-shared/client";
+import { DEFAULT_ANIMATION_DURATION, DEFAULT_BUTTON_CLASS, DEFAULT_ICON_ELEMENT_NAME, DEFAULT_MOBILE_VIEW_WIDTH, EBackgroundColors, EBackgrounds, EColorTypes, EIcons, EIconTypes, EOpacity, EPositions, ESizes, FILES, FindActiveMenu, GetButton, GetVisibleAndHiddenItems, IClientMenu, IDialogboxResults, RenderChildren, SetSiblingMenuLinkActive, UN } from "nexus-shared";
+import { CreateButtons, CreateToggleButton, FindParentElement, GetDynamicColor, HideLoader, Icon, Iconbox, InitializeDialogbox, SET_BUTTON_ACTIVE_CLASS, SetDocumentTitleDebounce, ShowLoader } from "nexus-shared/client";
+import React, { useEffect, useRef } from "react";
 
 const TOGGLE_BUTTON_ID = "client-menu-toggle-button";
 const LINK_LOGO_BUTTON_ID = "client-menu-logo-button";
-
 export const ClientMenu = ({ clientMenus, column, boxBackground }: Readonly<{ clientMenus: IClientMenu[]; column: number; boxBackground: EBackgrounds }>) => {
+  const menuContainerRef = useRef<HTMLDivElement>(null);
+  const onDocumentClicked = (e: Event) => {
+    const parent = FindParentElement(e.target as Element, ".client-main-menu");
+    if (parent) return;
+    e.preventDefault();
+    toggleClientMenu(false);
+  };
+  const toggleClientMenu = (isShow: boolean) => {
+    const menuContainer = menuContainerRef.current;
+    if (isShow) {
+      document.addEventListener("touchstart", onDocumentClicked);
+      document.addEventListener("click", onDocumentClicked);
+    } else {
+      document.removeEventListener("touchstart", onDocumentClicked);
+      document.removeEventListener("click", onDocumentClicked);
+    }
+    if (!menuContainer) return;
+    menuContainer.style.left = isShow ? "0" : "-100%";
+  };
+
+  useEffect(() => {
+    const innerWidth = window.innerWidth;
+    const isMobileView = innerWidth < DEFAULT_MOBILE_VIEW_WIDTH;
+    const toggleButton = document.getElementById(TOGGLE_BUTTON_ID);
+    const linkLogoButton = document.getElementById(LINK_LOGO_BUTTON_ID);
+    if (isMobileView) {
+      if (toggleButton) toggleButton.classList.remove("dn", "o0");
+      if (linkLogoButton) linkLogoButton.style.display = "none";
+      const activeMenu = FindActiveMenu(clientMenus);
+      if (activeMenu) {
+        const activeLink = document.getElementById(`cml-${activeMenu.menuCode}`);
+        if (activeLink) onMainLinkClicked(activeLink, activeMenu, toggleClientMenu, boxBackground, false);
+      }
+      const menuContainer = menuContainerRef.current?.parentElement;
+      if (menuContainer) menuContainer.style.maxWidth = "4rem";
+    } else {
+      if (toggleButton) toggleButton.style.display = "none";
+
+      const maxVisible = innerWidth > 1200 ? 4 : innerWidth > 800 ? 3 : 2;
+
+      renderClientMenu(toggleClientMenu, clientMenus, maxVisible, menuContainerRef.current?.parentElement, boxBackground);
+    }
+  }, []);
+
   return (
-    <div style={{ zIndex: 4 }} className={`col-${column ?? 12} df ac`}>
-      <Link id={LINK_LOGO_BUTTON_ID} href={"/home"} style={{ padding: "0.5rem 0.6rem", height: `3.0rem` }} className="bg52 h bb mr5">
-        <Image src={FILES.LOGO.FULL} alt="logo" width={74} height={74} className="h100 w100" />
-      </Link>
-      <ul className="df ac">
-        {clientMenus.slice(0, 4).map((m) => (
-          <li key={m.menuCode}>
-            <Link href={m.menuUrl ?? "/"} className={`${boxBackground} h bb mr5 df ac pl4 pr4 r o07 ho1`} style={{ minHeight: `calc(var(--IH) * ${DEFAULT_SMALL_ICON_BOX_SIZE})` }}>
-              <Icon size={ESizes.Tiny} type={EIconTypes.FILLED} opacity={EOpacity.O08} defaultClass="mr2" icon={m.menuIcon} />
-              <span className="fw400">{m.menuName ?? "Unknown"}</span>
-            </Link>
-          </li>
-        ))}
-      </ul>
+    <div style={{ zIndex: 1 }} className={`col-${column ?? 12} df ac`}>
+      <Iconbox id={TOGGLE_BUTTON_ID} icon={EIcons.MENU} defaultClass="ml5" onClicked={() => toggleClientMenu(true)} iconDefaultClass="lg" iconType={EIconTypes.OUTLINED} background={boxBackground} />
+      <div ref={menuContainerRef} className={`client-main-menu ${boxBackground} bs3 h100 anim pf top`} style={{ maxWidth: "90vw", width: "30rem", borderTopRightRadius: "var(--BR1)", borderBottomRightRadius: "var(--BR1)", left: "-100%", zIndex: 4 }}>
+        <div className={`df ac bg52 p5`}>
+          <div style={{ height: "calc(var(--IW) / 1.0)" }}>
+            <Image src={FILES.LOGO.FULL} alt="logo" width={74} height={74} className="img" />
+          </div>
+          <h3 className="ml5 fg o0">NEXUS</h3>
+          <Iconbox onClicked={() => toggleClientMenu(false)} icon={EIcons.CLOSE} defaultClass={`bg52 lg h`} iconSize={ESizes.ExtraLarge} iconOpacity={EOpacity.FULL} iconType={EIconTypes.OUTLINED} boxStyle={{ borderColor: "var(--C21)" }} />
+        </div>
+        <ul className="sb sm h100" style={{ maxHeight: "80vh" }}>
+          {clientMenus.map((m, i) => (
+            <li key={i} className={`df ac`}>
+              <Link onClick={(event: React.MouseEvent) => onMainLinkClicked(event, m, toggleClientMenu, boxBackground)} id={`cml-${m.menuCode}`} data-label={m.menuName} href={m.menuUrl ?? "/"} className={DEFAULT_BUTTON_CLASS(12, 6, 0, null, boxBackground) + " client-menu-link"}>
+                <Icon size={ESizes.Small} type={EIconTypes.FILLED} defaultClass="mr6 ml2" icon={m.menuIcon} />
+                <span className="fw400 fs-11 o1">{m.menuName ?? "Unknown"}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };
+const onMainLinkClicked = (e: React.MouseEvent | HTMLElement, menu: IClientMenu | null, toggleClientMenu: (isShow: boolean) => void, boxBackground: EBackgrounds, showLoader: boolean = true) => {
+  if (showLoader) {
+    ShowLoader();
+    HideLoader(null, null, DEFAULT_ANIMATION_DURATION);
+  }
+  toggleClientMenu(false);
+  const link = e instanceof HTMLElement ? e : (e.currentTarget as HTMLElement);
+  SetSiblingMenuLinkActive(link, link.closest("ul"), "a.client-menu-link", boxBackground);
+  document.body.click();
+};
+
+const renderClientMenu = (closeMenuHandler: (isShow: boolean) => void, clientMenus: IClientMenu[], maxVisible: number, parent: HTMLElement | UN, boxBackground: EBackgrounds) => {
+  if (!parent) return;
+  const menuContainer = document.createElement("ul");
+  menuContainer.className = "client-menu df ac";
+  menuContainer.style.height = "100%";
+  parent.appendChild(menuContainer);
+
+  let activeItem: IClientMenu | undefined = FindActiveMenu(clientMenus);
+
+  const visibleItems: IClientMenu[] = [];
+  const hiddenItems: IClientMenu[] = [];
+  GetVisibleAndHiddenItems(clientMenus, visibleItems, hiddenItems, activeItem, maxVisible);
+
+  const elementList: HTMLElement[] = [];
+  const dataKey = "menuCode";
+  const dataAttributeKey = "data-menu-code";
+
+  let dialogBoxObject: IDialogboxResults | null = null;
+
+  const toggleButton = CreateToggleButton(null, null, null, ESizes.Small, null, null, null, boxBackground);
+  const onMenuLinkClick = (e: Event, menu: IClientMenu) => {
+    e.preventDefault();
+    ShowLoader();
+    HideLoader(undefined, undefined, DEFAULT_ANIMATION_DURATION);
+    closeMenuHandler(false);
+    if (menu === activeItem) return;
+    if (dialogBoxObject) dialogBoxObject.visibility(false);
+    SetDocumentTitleDebounce(menu?.documentTitle ?? menu?.menuName);
+    activeItem = menu;
+
+    const isHiddenItemClicked = hiddenItems.some((item) => item === menu);
+    GetVisibleAndHiddenItems(clientMenus, visibleItems, hiddenItems, activeItem, maxVisible);
+
+    const linkButton = document.getElementById(`cml-${menu.menuCode}`);
+    if (linkButton) linkButton.click();
+    RenderChildren(menuContainer, elementList, toggleButton, activeItem, visibleItems, hiddenItems, createMenuItem, refreshElementClass, false, isHiddenItemClicked, dataKey, dataAttributeKey);
+  };
+  const createMenuItem = (menu: IClientMenu) => {
+    const isActive = activeItem?.menuCode === menu.menuCode;
+    const menuItem = document.createElement("li");
+    menuItem.setAttribute(dataAttributeKey, menu.menuCode);
+    //menuItem.className = "df ac li-item";
+    const link = document.createElement("a");
+    link.setAttribute(dataAttributeKey, menu.menuCode);
+    link.href = menu.menuUrl ?? "#";
+    link.innerHTML = `</${DEFAULT_ICON_ELEMENT_NAME}><span class="fw400 en nw">${menu.menuName ?? "Unknown"}</span>`;
+    link.onclick = (event: Event) => onMenuLinkClick(event, menu);
+    link.className = _getLinkClass(isActive, boxBackground);
+    link.style.minHeight = `var(--TOP_HEIGHT)`;
+    SET_BUTTON_ACTIVE_CLASS(isActive, link, GetDynamicColor(boxBackground, EColorTypes.Hover) as EBackgroundColors, null, GetDynamicColor(boxBackground, EColorTypes.Text) as EBackgroundColors, "active");
+    menuItem.appendChild(link);
+    return menuItem;
+  };
+  const refreshElementClass = (element: HTMLElement, activeItem: IClientMenu | UN) => {
+    const link = element.querySelector("a");
+    const menuCode = link?.getAttribute(dataAttributeKey);
+    const isActive = activeItem?.menuCode === menuCode;
+
+    if (link) {
+      link.className = _getLinkClass(isActive, boxBackground);
+      SET_BUTTON_ACTIVE_CLASS(isActive, link, GetDynamicColor(boxBackground, EColorTypes.Hover) as EBackgroundColors, null, GetDynamicColor(boxBackground, EColorTypes.Text) as EBackgroundColors, "active");
+    }
+  };
+  RenderChildren(menuContainer, elementList, toggleButton, activeItem, visibleItems, hiddenItems, createMenuItem, refreshElementClass, true, false, dataKey, dataAttributeKey);
+  if (hiddenItems.length > 0) {
+    const dialogBox = document.createElement("div");
+    toggleButton.appendChild(dialogBox);
+
+    dialogBox.style.maxHeight = "80vh";
+    dialogBox.classList.add("sb", "dn", "sm");
+
+    let linkButtons: HTMLDivElement | undefined;
+    const onVisibilityChanged = (isVisible: boolean) => {
+      if (isVisible) {
+        const menuButtons = hiddenItems.map((menu, index) => GetButton(menu.menuName, menu.menuCode, menu.menuUrl, menu.menuIcon, (event) => onMenuLinkClick(event as Event, menu), menu));
+        if (linkButtons) linkButtons.remove();
+        linkButtons = CreateButtons(menuButtons, dialogBox, null, 6, 0, null, null, "pr5 pl5 mt5 mb5");
+
+        if (linkButtons) dialogBox.appendChild(linkButtons);
+      } else if (linkButtons) linkButtons.remove();
+    };
+
+    dialogBoxObject = InitializeDialogbox(toggleButton, dialogBox, null, null, 0, null, null, onVisibilityChanged, undefined, false, EPositions.Right);
+  }
+};
+
+const _getLinkClass = (isActive: boolean, background?: EBackgrounds | null) => `${background} pr db btn h100 h bb df ac pl5 pr5 r ${isActive ? "active" : "h fw400"}`;

package/src/styles/nexus.layout.css

@@ -0,0 +1,24 @@
+:root {
+  --MW: 90vw;
+}
+.mw {
+  width: var(--MW);
+}
+
+@media (min-width: 2500px) {
+  :root {
+    --MW: 2000px;
+  }
+}
+
+@media (max-width: 1150px) {
+  :root {
+    --MW: 96vw;
+  }
+}
+
+@media (max-width: 750px) {
+  .client-menu .utilities {
+    width: 100% !important;
+  }
+}