@abpjs/theme-basic 2.2.0 → 2.7.0

package/dist/components/index.d.ts

@@ -4,4 +4,7 @@ export * from './layout-account';
 export * from './layout-empty';
 export * from './change-password';
 export * from './profile';
+export * from './logo';
+export * from './nav-items';
+export * from './routes';
 export * from './blocks/sidebars/sidebar-with-collapsible';

package/dist/components/layout-application/LayoutApplication.d.ts

@@ -56,5 +56,8 @@ export interface LayoutApplicationProps {
 export declare function LayoutApplication({ showLanguageSelector, showCurrentUser, showSearch, showHelpCenter, helpCenterUrl, showSettings, settingsUrl, defaultIcon, headerContent, footerContent, children, }: LayoutApplicationProps): React.ReactElement;
 export declare namespace LayoutApplication {
     var type: eLayoutType;
+    var logoComponentKey: "Theme.LogoComponent";
+    var routesComponentKey: "Theme.RoutesComponent";
+    var navItemsComponentKey: "Theme.NavItemsComponent";
 }
 export default LayoutApplication;

package/dist/components/logo/LogoComponent.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Props for the LogoComponent.
+ * @since 2.7.0
+ */
+export interface LogoComponentProps {
+    /** Custom styles for the logo container */
+    style?: React.CSSProperties;
+    /** Custom link path (overrides branding logoLink if provided) */
+    linkTo?: string;
+}
+/**
+ * Public API Logo component that displays the application logo.
+ * Uses the branding configuration from BrandingProvider.
+ *
+ * This component is part of the theme-basic public API and can be
+ * replaced using the component replacement system with eThemeBasicComponents.Logo.
+ *
+ * @since 2.7.0 - Added as public API component
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <LogoComponent />
+ *
+ * // With custom link
+ * <LogoComponent linkTo="/dashboard" />
+ * ```
+ */
+export declare function LogoComponent({ style, linkTo }: LogoComponentProps): React.ReactElement;
+export default LogoComponent;

package/dist/components/logo/index.d.ts

@@ -0,0 +1,2 @@
+export { LogoComponent, type LogoComponentProps } from './LogoComponent';
+export { LogoComponent as default } from './LogoComponent';

package/dist/components/nav-items/NavItemsComponent.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { UserProfileProps } from '../blocks/sidebars/sidebar-with-collapsible/user-profile';
+/**
+ * Props for the NavItemsComponent.
+ * @since 2.7.0
+ */
+export interface NavItemsComponentProps {
+    /** Whether the screen is small (mobile) */
+    smallScreen?: boolean;
+    /** User profile action handlers */
+    userProfileProps?: UserProfileProps;
+    /** Whether to show language selector */
+    showLanguageSelector?: boolean;
+    /** Whether to show current user */
+    showCurrentUser?: boolean;
+}
+/**
+ * Public API component for navigation items (language selector, user menu, custom elements).
+ * Handles the registration of built-in navigation elements and renders custom elements.
+ *
+ * This component is part of the theme-basic public API and can be
+ * replaced using the component replacement system with eThemeBasicComponents.NavItems.
+ *
+ * @since 2.7.0 - Added as public API component
+ *
+ * @example
+ * ```tsx
+ * <NavItemsComponent
+ *   showLanguageSelector={true}
+ *   showCurrentUser={true}
+ *   userProfileProps={{
+ *     onLogout: () => logout(),
+ *     onChangePassword: () => openChangePassword(),
+ *   }}
+ * />
+ * ```
+ */
+export declare function NavItemsComponent({ smallScreen, userProfileProps, showLanguageSelector, showCurrentUser, }: NavItemsComponentProps): React.ReactElement;
+export default NavItemsComponent;

package/dist/components/nav-items/index.d.ts

@@ -0,0 +1,2 @@
+export { NavItemsComponent, type NavItemsComponentProps } from './NavItemsComponent';
+export { NavItemsComponent as default } from './NavItemsComponent';

package/dist/components/routes/RoutesComponent.d.ts

@@ -0,0 +1,40 @@
+import React, { ReactNode } from 'react';
+import { ABP } from '@abpjs/core';
+/**
+ * Props for the RoutesComponent.
+ * @since 2.7.0
+ */
+export interface RoutesComponentProps {
+    /** Whether the screen is small (mobile) */
+    smallScreen?: boolean;
+    /** Whether to use dynamic dropdown positioning for children */
+    isDropdownChildDynamic?: boolean;
+    /** Default icon for routes without specific icons */
+    defaultIcon?: ReactNode;
+    /** Custom routes to display (overrides config routes) */
+    routes?: ABP.FullRoute[];
+}
+/**
+ * Public API component for rendering navigation routes.
+ * Displays the visible routes from the config with support for
+ * collapsible child routes.
+ *
+ * This component is part of the theme-basic public API and can be
+ * replaced using the component replacement system with eThemeBasicComponents.Routes.
+ *
+ * @since 2.7.0 - Added as public API component
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - uses routes from config
+ * <RoutesComponent />
+ *
+ * // With custom default icon
+ * <RoutesComponent defaultIcon={<LuHome />} />
+ *
+ * // With custom routes
+ * <RoutesComponent routes={customRoutes} />
+ * ```
+ */
+export declare function RoutesComponent({ smallScreen, isDropdownChildDynamic, defaultIcon, routes: customRoutes, }: RoutesComponentProps): React.ReactElement;
+export default RoutesComponent;

package/dist/components/routes/index.d.ts

@@ -0,0 +1,2 @@
+export { RoutesComponent, type RoutesComponentProps } from './RoutesComponent';
+export { RoutesComponent as default } from './RoutesComponent';

package/dist/enums/components.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Theme basic component key constants.
+ * Used for component replacement/customization in the theme system.
+ *
+ * @since 2.7.0
+ */
+export declare const eThemeBasicComponents: {
+    readonly ApplicationLayout: "Theme.ApplicationLayoutComponent";
+    readonly AccountLayout: "Theme.AccountLayoutComponent";
+    readonly EmptyLayout: "Theme.EmptyLayoutComponent";
+    readonly Logo: "Theme.LogoComponent";
+    readonly Routes: "Theme.RoutesComponent";
+    readonly NavItems: "Theme.NavItemsComponent";
+};
+/**
+ * Type for eThemeBasicComponents values
+ */
+export type eThemeBasicComponents = (typeof eThemeBasicComponents)[keyof typeof eThemeBasicComponents];

package/dist/enums/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './navigation-element-names';

package/dist/enums/navigation-element-names.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Navigation element name constants.
+ * Used for identifying built-in navigation elements in the layout.
+ *
+ * @since 2.7.0
+ */
+export declare const eNavigationElementNames: {
+    readonly Language: "LanguageRef";
+    readonly User: "CurrentUserRef";
+};
+/**
+ * Type for eNavigationElementNames values
+ */
+export type eNavigationElementNames = (typeof eNavigationElementNames)[keyof typeof eNavigationElementNames];

package/dist/index.d.ts

@@ -2,29 +2,48 @@
  * @abpjs/theme-basic
  *
  * ABP Framework Theme Basic components for React.
- * Translated from @abp/ng.theme.basic v2.2.0
+ * Translated from @abp/ng.theme.basic v2.7.0
  *
  * This package provides the basic theme layout components for ABP React applications.
  *
+ * Changes in v2.7.0:
+ * - Added eThemeBasicComponents enum for component replacement keys
+ * - Added eNavigationElementNames enum for built-in navigation element names
+ * - Added LogoComponent public API component
+ * - Added NavItemsComponent public API component
+ * - Added RoutesComponent public API component
+ * - Added LayoutStateService (useLayoutStateService hook)
+ * - ApplicationLayoutComponent now exposes component keys (logoComponentKey, routesComponentKey, navItemsComponentKey)
+ * - Dependency update to @abp/ng.theme.shared v2.7.0
+ *
+ * Changes in v2.4.0:
+ * - Angular: InitialService now uses DomInsertionService instead of LazyLoadService
+ * - Angular: appendStyle() now returns void instead of Observable<void>
+ * - Dependency update to @abp/ng.theme.shared v2.4.0
+ * - No impact on React translation (styles handled via Chakra UI)
+ *
  * Changes in v2.2.0:
  * - Angular: Added .ui-table .pagination-wrapper styles (handled by Chakra UI in React)
  * - Dependency update to @abp/ng.theme.shared v2.2.0
  * - No functional code changes
  *
- * @version 2.2.0
+ * @version 2.7.0
  * @since 2.0.0 - Removed legacy .abp-confirm styles (no impact on React - we use Chakra UI)
  * @since 2.1.0 - Angular: OAuthService replaced with AuthService (already using useAuth in React)
  *              - Angular: Added styles for loading, modal-backdrop, confirmation (handled by Chakra UI)
  */
 export * from './models';
+export * from './enums';
+export * from './services';
 export { LayoutProvider, useLayoutContext, useLayoutService, useNavigationElements, BrandingProvider, useBranding, useLogo, } from './contexts';
 export type { LayoutService, LayoutContextValue, LayoutProviderProps, BrandingConfig, BrandingContextValue, BrandingProviderProps, } from './contexts';
 export * from './hooks';
 export * from './components';
 export * from './providers';
 import { LayoutApplication } from './components/layout-application';
+import { LayoutAccount } from './components/layout-account';
 /**
  * Array of layout components for use with ABP's dynamic layout system.
  * Matches the Angular LAYOUTS constant.
  */
-export declare const LAYOUTS: (typeof LayoutApplication)[];
+export declare const LAYOUTS: (typeof LayoutApplication | typeof LayoutAccount)[];

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -32,11 +42,14 @@ __export(index_exports, {
   LayoutEmpty: () => LayoutEmpty,
   LayoutProvider: () => LayoutProvider,
   Logo: () => Logo,
+  LogoComponent: () => LogoComponent,
   LogoIcon: () => LogoIcon,
   LogoText: () => LogoText,
+  NavItemsComponent: () => NavItemsComponent,
   NavLinks: () => NavLinks,
   Navbar: () => Navbar,
   Profile: () => import_theme_shared2.Profile,
+  RoutesComponent: () => RoutesComponent,
   SIDEBAR_Z_INDEX: () => SIDEBAR_Z_INDEX,
   SearchField: () => SearchField,
   SearchProvider: () => SearchProvider,
@@ -46,15 +59,34 @@ __export(index_exports, {
   UserProfile: () => UserProfile,
   defaultThemeBasicConfig: () => defaultThemeBasicConfig,
   defineConfig: () => import_theme_shared3.defineConfig,
+  eNavigationElementNames: () => eNavigationElementNames,
+  eThemeBasicComponents: () => eThemeBasicComponents,
   useBranding: () => useBranding,
   useLayoutContext: () => useLayoutContext,
   useLayoutService: () => useLayoutService,
+  useLayoutStateService: () => useLayoutStateService,
   useLogo: () => useLogo,
   useNavigationElements: () => useNavigationElements,
   useSearch: () => useSearch
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/enums/components.ts
+var eThemeBasicComponents = {
+  ApplicationLayout: "Theme.ApplicationLayoutComponent",
+  AccountLayout: "Theme.AccountLayoutComponent",
+  EmptyLayout: "Theme.EmptyLayoutComponent",
+  Logo: "Theme.LogoComponent",
+  Routes: "Theme.RoutesComponent",
+  NavItems: "Theme.NavItemsComponent"
+};
+
+// src/enums/navigation-element-names.ts
+var eNavigationElementNames = {
+  Language: "LanguageRef",
+  User: "CurrentUserRef"
+};
+
 // src/contexts/layout.context.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -123,6 +155,16 @@ function useNavigationElements() {
   return useLayoutContext().state.navigationElements;
 }
 
+// src/services/layout-state.service.ts
+function useLayoutStateService() {
+  const { state, service } = useLayoutContext();
+  return {
+    getNavigationElements: () => state.navigationElements,
+    dispatchAddNavigationElement: (elements) => service.addNavigationElement(elements),
+    dispatchRemoveNavigationElementByName: (name) => service.removeNavigationElement(name)
+  };
+}
+
 // src/contexts/branding.context.tsx
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -792,6 +834,9 @@ function LayoutApplication({
   const navigate = (0, import_react_router_dom6.useNavigate)();
   const { logout } = (0, import_core6.useAuth)();
   const { direction, isRtl } = (0, import_core6.useDirection)();
+  const logoComponentKey = eThemeBasicComponents.Logo;
+  const routesComponentKey = eThemeBasicComponents.Routes;
+  const navItemsComponentKey = eThemeBasicComponents.NavItems;
   const [isChangePasswordOpen, setIsChangePasswordOpen] = (0, import_react16.useState)(false);
   const [isProfileOpen, setIsProfileOpen] = (0, import_react16.useState)(false);
   const handleLogout = (0, import_react16.useCallback)(() => {
@@ -874,6 +919,9 @@ function LayoutApplication({
   ] });
 }
 LayoutApplication.type = import_core6.eLayoutType.application;
+LayoutApplication.logoComponentKey = eThemeBasicComponents.Logo;
+LayoutApplication.routesComponentKey = eThemeBasicComponents.Routes;
+LayoutApplication.navItemsComponentKey = eThemeBasicComponents.NavItems;
 
 // src/components/layout-account/LayoutAccount.tsx
 var import_react18 = require("@chakra-ui/react");
@@ -961,19 +1009,124 @@ function LayoutEmpty({ children }) {
 }
 LayoutEmpty.type = import_core8.eLayoutType.empty;
 
+// src/components/logo/LogoComponent.tsx
+var import_react20 = require("@chakra-ui/react");
+var import_react_router_dom9 = require("react-router-dom");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function LogoComponent({ style, linkTo }) {
+  const { logo, appName, logoLink } = useBranding();
+  const logoContent = logo || (appName ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react20.Text, { fontWeight: "bold", fontSize: "lg", children: appName }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DefaultLogo, { style }));
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react20.Box, { asChild: true, style, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_router_dom9.Link, { to: linkTo || logoLink || "/", children: logoContent }) });
+}
+
+// src/components/nav-items/NavItemsComponent.tsx
+var import_react21 = __toESM(require("react"));
+var import_react22 = require("@chakra-ui/react");
+var import_core9 = require("@abpjs/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function NavItemsComponent({
+  smallScreen = false,
+  userProfileProps,
+  showLanguageSelector = true,
+  showCurrentUser = true
+}) {
+  const { currentUser, localization } = (0, import_core9.useConfig)();
+  const { isAuthenticated } = (0, import_core9.useAuth)();
+  const { language, setLanguage } = (0, import_core9.useSession)();
+  const { state, service } = useLayoutContext();
+  const defaultLanguage = (0, import_react21.useMemo)(() => {
+    const lang = localization?.languages?.find((l) => l.cultureName === language);
+    return lang?.displayName || language || "";
+  }, [localization, language]);
+  const dropdownLanguages = (0, import_react21.useMemo)(() => {
+    return localization?.languages?.filter((l) => l.cultureName !== language) || [];
+  }, [localization, language]);
+  const onChangeLang = (0, import_react21.useCallback)(
+    (cultureName) => {
+      setLanguage(cultureName);
+      window.location.reload();
+    },
+    [setLanguage]
+  );
+  const logout = (0, import_react21.useCallback)(() => {
+    userProfileProps?.onLogout?.();
+  }, [userProfileProps]);
+  (0, import_react21.useEffect)(() => {
+    if (showLanguageSelector && localization?.languages && localization.languages.length > 1) {
+      service.addNavigationElement({
+        name: eNavigationElementNames.Language,
+        element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LanguageSelector, {}, "language-selector"),
+        order: 2
+      });
+      return () => {
+        service.removeNavigationElement(eNavigationElementNames.Language);
+      };
+    }
+  }, [service, showLanguageSelector, localization?.languages]);
+  (0, import_react21.useEffect)(() => {
+    if (showCurrentUser) {
+      service.addNavigationElement({
+        name: eNavigationElementNames.User,
+        element: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(UserProfile, { ...userProfileProps }, "user-profile"),
+        order: 3
+      });
+      return () => {
+        service.removeNavigationElement(eNavigationElementNames.User);
+      };
+    }
+  }, [service, showCurrentUser, userProfileProps]);
+  const navElements = state.navigationElements;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react22.Stack, { gap: 2, width: "full", children: navElements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react21.default.Fragment, { children: element.element }, element.name)) });
+}
+
+// src/components/routes/RoutesComponent.tsx
+var import_react23 = require("react");
+var import_react24 = require("@chakra-ui/react");
+var import_core10 = require("@abpjs/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function getVisibleRoutes2(routes) {
+  return routes.reduce((acc, val) => {
+    if (val.invisible) {
+      return acc;
+    }
+    const route = { ...val };
+    if (route.children && route.children.length) {
+      route.children = getVisibleRoutes2(route.children);
+    }
+    return [...acc, route];
+  }, []);
+}
+function RoutesComponent({
+  smallScreen = false,
+  isDropdownChildDynamic = false,
+  defaultIcon,
+  routes: customRoutes
+}) {
+  const { routes: configRoutes } = (0, import_core10.useConfig)();
+  const { direction } = (0, import_core10.useDirection)();
+  const routes = customRoutes || configRoutes || [];
+  const visibleRoutes = (0, import_react23.useMemo)(() => {
+    return getVisibleRoutes2(routes);
+  }, [routes]);
+  const trackByFn = (index, item) => {
+    return item.name || item.path || index;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react24.Stack, { gap: "1", dir: direction, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(NavLinks, { defaultIcon }) });
+}
+
 // src/providers/ThemeBasicProvider.tsx
-var import_react20 = require("react");
+var import_react25 = require("react");
 var import_theme_shared3 = require("@abpjs/theme-shared");
-var import_core9 = require("@abpjs/core");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_core11 = require("@abpjs/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function LocaleSync({ children }) {
-  const { language } = (0, import_core9.useSession)();
-  const { direction } = (0, import_core9.useDirection)();
-  (0, import_react20.useEffect)(() => {
+  const { language } = (0, import_core11.useSession)();
+  const { direction } = (0, import_core11.useDirection)();
+  (0, import_react25.useEffect)(() => {
     document.documentElement.dir = direction;
     document.documentElement.lang = language || "en";
   }, [direction, language]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children });
 }
 function ThemeBasicInner({
   children,
@@ -988,9 +1141,9 @@ function ThemeBasicInner({
   appName,
   logoLink
 }) {
-  const { language } = (0, import_core9.useSession)();
+  const { language } = (0, import_core11.useSession)();
   const locale = language || "en-US";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_theme_shared3.ThemeSharedProvider,
     {
       renderToasts,
@@ -1000,14 +1153,14 @@ function ThemeBasicInner({
       enableColorMode,
       defaultColorMode,
       locale,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LocaleSync, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LocaleSync, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         BrandingProvider,
         {
           logo,
           logoIcon,
           appName,
           logoLink,
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LayoutProvider, { children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LayoutProvider, { children })
         }
       ) })
     }
@@ -1081,7 +1234,7 @@ function ThemeBasicProvider({
   logoLink
 }) {
   const mergedThemeOverrides = themeOverrides || defaultThemeBasicConfig;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ThemeBasicInner,
     {
       renderToasts,
@@ -1115,11 +1268,14 @@ var LAYOUTS = [LayoutApplication, LayoutAccount, LayoutEmpty];
   LayoutEmpty,
   LayoutProvider,
   Logo,
+  LogoComponent,
   LogoIcon,
   LogoText,
+  NavItemsComponent,
   NavLinks,
   Navbar,
   Profile,
+  RoutesComponent,
   SIDEBAR_Z_INDEX,
   SearchField,
   SearchProvider,
@@ -1129,9 +1285,12 @@ var LAYOUTS = [LayoutApplication, LayoutAccount, LayoutEmpty];
   UserProfile,
   defaultThemeBasicConfig,
   defineConfig,
+  eNavigationElementNames,
+  eThemeBasicComponents,
   useBranding,
   useLayoutContext,
   useLayoutService,
+  useLayoutStateService,
   useLogo,
   useNavigationElements,
   useSearch

package/dist/index.mjs

@@ -1,3 +1,19 @@
+// src/enums/components.ts
+var eThemeBasicComponents = {
+  ApplicationLayout: "Theme.ApplicationLayoutComponent",
+  AccountLayout: "Theme.AccountLayoutComponent",
+  EmptyLayout: "Theme.EmptyLayoutComponent",
+  Logo: "Theme.LogoComponent",
+  Routes: "Theme.RoutesComponent",
+  NavItems: "Theme.NavItemsComponent"
+};
+
+// src/enums/navigation-element-names.ts
+var eNavigationElementNames = {
+  Language: "LanguageRef",
+  User: "CurrentUserRef"
+};
+
 // src/contexts/layout.context.tsx
 import {
   createContext,
@@ -72,6 +88,16 @@ function useNavigationElements() {
   return useLayoutContext().state.navigationElements;
 }
 
+// src/services/layout-state.service.ts
+function useLayoutStateService() {
+  const { state, service } = useLayoutContext();
+  return {
+    getNavigationElements: () => state.navigationElements,
+    dispatchAddNavigationElement: (elements) => service.addNavigationElement(elements),
+    dispatchRemoveNavigationElementByName: (name) => service.removeNavigationElement(name)
+  };
+}
+
 // src/contexts/branding.context.tsx
 import {
   createContext as createContext2,
@@ -751,6 +777,9 @@ function LayoutApplication({
   const navigate = useNavigate();
   const { logout } = useAuth2();
   const { direction, isRtl } = useDirection4();
+  const logoComponentKey = eThemeBasicComponents.Logo;
+  const routesComponentKey = eThemeBasicComponents.Routes;
+  const navItemsComponentKey = eThemeBasicComponents.NavItems;
   const [isChangePasswordOpen, setIsChangePasswordOpen] = useState5(false);
   const [isProfileOpen, setIsProfileOpen] = useState5(false);
   const handleLogout = useCallback3(() => {
@@ -833,6 +862,9 @@ function LayoutApplication({
   ] });
 }
 LayoutApplication.type = eLayoutType.application;
+LayoutApplication.logoComponentKey = eThemeBasicComponents.Logo;
+LayoutApplication.routesComponentKey = eThemeBasicComponents.Routes;
+LayoutApplication.navItemsComponentKey = eThemeBasicComponents.NavItems;
 
 // src/components/layout-account/LayoutAccount.tsx
 import { Box as Box6, Flex as Flex3 } from "@chakra-ui/react";
@@ -920,19 +952,124 @@ function LayoutEmpty({ children }) {
 }
 LayoutEmpty.type = eLayoutType3.empty;
 
+// src/components/logo/LogoComponent.tsx
+import { Box as Box8, Text as Text4 } from "@chakra-ui/react";
+import { Link as RouterLink4 } from "react-router-dom";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function LogoComponent({ style, linkTo }) {
+  const { logo, appName, logoLink } = useBranding();
+  const logoContent = logo || (appName ? /* @__PURE__ */ jsx17(Text4, { fontWeight: "bold", fontSize: "lg", children: appName }) : /* @__PURE__ */ jsx17(DefaultLogo, { style }));
+  return /* @__PURE__ */ jsx17(Box8, { asChild: true, style, children: /* @__PURE__ */ jsx17(RouterLink4, { to: linkTo || logoLink || "/", children: logoContent }) });
+}
+
+// src/components/nav-items/NavItemsComponent.tsx
+import React5, { useEffect, useCallback as useCallback4, useMemo as useMemo6 } from "react";
+import { Stack as Stack3 } from "@chakra-ui/react";
+import { useConfig as useConfig4, useAuth as useAuth3, useSession as useSession2 } from "@abpjs/core";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function NavItemsComponent({
+  smallScreen = false,
+  userProfileProps,
+  showLanguageSelector = true,
+  showCurrentUser = true
+}) {
+  const { currentUser, localization } = useConfig4();
+  const { isAuthenticated } = useAuth3();
+  const { language, setLanguage } = useSession2();
+  const { state, service } = useLayoutContext();
+  const defaultLanguage = useMemo6(() => {
+    const lang = localization?.languages?.find((l) => l.cultureName === language);
+    return lang?.displayName || language || "";
+  }, [localization, language]);
+  const dropdownLanguages = useMemo6(() => {
+    return localization?.languages?.filter((l) => l.cultureName !== language) || [];
+  }, [localization, language]);
+  const onChangeLang = useCallback4(
+    (cultureName) => {
+      setLanguage(cultureName);
+      window.location.reload();
+    },
+    [setLanguage]
+  );
+  const logout = useCallback4(() => {
+    userProfileProps?.onLogout?.();
+  }, [userProfileProps]);
+  useEffect(() => {
+    if (showLanguageSelector && localization?.languages && localization.languages.length > 1) {
+      service.addNavigationElement({
+        name: eNavigationElementNames.Language,
+        element: /* @__PURE__ */ jsx18(LanguageSelector, {}, "language-selector"),
+        order: 2
+      });
+      return () => {
+        service.removeNavigationElement(eNavigationElementNames.Language);
+      };
+    }
+  }, [service, showLanguageSelector, localization?.languages]);
+  useEffect(() => {
+    if (showCurrentUser) {
+      service.addNavigationElement({
+        name: eNavigationElementNames.User,
+        element: /* @__PURE__ */ jsx18(UserProfile, { ...userProfileProps }, "user-profile"),
+        order: 3
+      });
+      return () => {
+        service.removeNavigationElement(eNavigationElementNames.User);
+      };
+    }
+  }, [service, showCurrentUser, userProfileProps]);
+  const navElements = state.navigationElements;
+  return /* @__PURE__ */ jsx18(Stack3, { gap: 2, width: "full", children: navElements.map((element) => /* @__PURE__ */ jsx18(React5.Fragment, { children: element.element }, element.name)) });
+}
+
+// src/components/routes/RoutesComponent.tsx
+import { useMemo as useMemo7 } from "react";
+import { Stack as Stack4 } from "@chakra-ui/react";
+import { useConfig as useConfig5, useDirection as useDirection6 } from "@abpjs/core";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function getVisibleRoutes2(routes) {
+  return routes.reduce((acc, val) => {
+    if (val.invisible) {
+      return acc;
+    }
+    const route = { ...val };
+    if (route.children && route.children.length) {
+      route.children = getVisibleRoutes2(route.children);
+    }
+    return [...acc, route];
+  }, []);
+}
+function RoutesComponent({
+  smallScreen = false,
+  isDropdownChildDynamic = false,
+  defaultIcon,
+  routes: customRoutes
+}) {
+  const { routes: configRoutes } = useConfig5();
+  const { direction } = useDirection6();
+  const routes = customRoutes || configRoutes || [];
+  const visibleRoutes = useMemo7(() => {
+    return getVisibleRoutes2(routes);
+  }, [routes]);
+  const trackByFn = (index, item) => {
+    return item.name || item.path || index;
+  };
+  return /* @__PURE__ */ jsx19(Stack4, { gap: "1", dir: direction, children: /* @__PURE__ */ jsx19(NavLinks, { defaultIcon }) });
+}
+
 // src/providers/ThemeBasicProvider.tsx
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { ThemeSharedProvider, defineConfig } from "@abpjs/theme-shared";
-import { useSession as useSession2, useDirection as useDirection6 } from "@abpjs/core";
-import { Fragment as Fragment4, jsx as jsx17 } from "react/jsx-runtime";
+import { useSession as useSession3, useDirection as useDirection7 } from "@abpjs/core";
+import { Fragment as Fragment4, jsx as jsx20 } from "react/jsx-runtime";
 function LocaleSync({ children }) {
-  const { language } = useSession2();
-  const { direction } = useDirection6();
-  useEffect(() => {
+  const { language } = useSession3();
+  const { direction } = useDirection7();
+  useEffect2(() => {
     document.documentElement.dir = direction;
     document.documentElement.lang = language || "en";
   }, [direction, language]);
-  return /* @__PURE__ */ jsx17(Fragment4, { children });
+  return /* @__PURE__ */ jsx20(Fragment4, { children });
 }
 function ThemeBasicInner({
   children,
@@ -947,9 +1084,9 @@ function ThemeBasicInner({
   appName,
   logoLink
 }) {
-  const { language } = useSession2();
+  const { language } = useSession3();
   const locale = language || "en-US";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     ThemeSharedProvider,
     {
       renderToasts,
@@ -959,14 +1096,14 @@ function ThemeBasicInner({
       enableColorMode,
       defaultColorMode,
       locale,
-      children: /* @__PURE__ */ jsx17(LocaleSync, { children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx20(LocaleSync, { children: /* @__PURE__ */ jsx20(
         BrandingProvider,
         {
           logo,
           logoIcon,
           appName,
           logoLink,
-          children: /* @__PURE__ */ jsx17(LayoutProvider, { children })
+          children: /* @__PURE__ */ jsx20(LayoutProvider, { children })
         }
       ) })
     }
@@ -1040,7 +1177,7 @@ function ThemeBasicProvider({
   logoLink
 }) {
   const mergedThemeOverrides = themeOverrides || defaultThemeBasicConfig;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     ThemeBasicInner,
     {
       renderToasts,
@@ -1073,11 +1210,14 @@ export {
   LayoutEmpty,
   LayoutProvider,
   Logo,
+  LogoComponent,
   LogoIcon,
   LogoText,
+  NavItemsComponent,
   NavLinks,
   Navbar,
   Profile,
+  RoutesComponent,
   SIDEBAR_Z_INDEX,
   SearchField,
   SearchProvider,
@@ -1087,9 +1227,12 @@ export {
   UserProfile,
   defaultThemeBasicConfig,
   defineConfig,
+  eNavigationElementNames,
+  eThemeBasicComponents,
   useBranding,
   useLayoutContext,
   useLayoutService,
+  useLayoutStateService,
   useLogo,
   useNavigationElements,
   useSearch

package/dist/services/index.d.ts

@@ -0,0 +1 @@
+export * from './layout-state.service';

package/dist/services/layout-state.service.d.ts

@@ -0,0 +1,55 @@
+import { Layout } from '../models';
+/**
+ * Interface for the LayoutStateService.
+ * Provides methods to access and modify layout state.
+ *
+ * @since 2.7.0
+ */
+export interface LayoutStateService {
+    /**
+     * Get all navigation elements from the layout state.
+     * @returns Array of navigation elements
+     */
+    getNavigationElements(): Layout.NavigationElement[];
+    /**
+     * Dispatch action to add navigation elements.
+     * Wraps the layout service's addNavigationElement method.
+     *
+     * @param elements - Single element or array of elements to add
+     */
+    dispatchAddNavigationElement(elements: Layout.NavigationElement | Layout.NavigationElement[]): void;
+    /**
+     * Dispatch action to remove a navigation element by name.
+     * Wraps the layout service's removeNavigationElement method.
+     *
+     * @param name - Name of the element to remove
+     */
+    dispatchRemoveNavigationElementByName(name: string): void;
+}
+/**
+ * Hook to get the LayoutStateService.
+ * Provides a service-like interface matching the Angular LayoutStateService.
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const layoutStateService = useLayoutStateService();
+ *
+ *   // Get current navigation elements
+ *   const elements = layoutStateService.getNavigationElements();
+ *
+ *   // Add a new element
+ *   layoutStateService.dispatchAddNavigationElement({
+ *     name: 'MyElement',
+ *     element: <MyNavItem />,
+ *     order: 1,
+ *   });
+ *
+ *   // Remove an element
+ *   layoutStateService.dispatchRemoveNavigationElementByName('MyElement');
+ * }
+ * ```
+ */
+export declare function useLayoutStateService(): LayoutStateService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-basic",
-  "version": "2.2.0",
+  "version": "2.7.0",
   "description": "ABP Framework Theme Basic components for React - translated from @abp/ng.theme.basic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,11 +27,11 @@
     "lucide-react": "^0.400.0",
     "react-hook-form": "^7.48.0",
     "react-icons": "^5.0.0",
-    "@abpjs/core": "2.2.0",
-    "@abpjs/theme-shared": "2.2.0"
+    "@abpjs/core": "2.7.0",
+    "@abpjs/theme-shared": "2.7.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.basic": "2.2.0",
+    "@abp/ng.theme.basic": "2.7.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@vitest/coverage-v8": "^3.2.0",