@orbe-agro/client-core 5.3.261 → 5.3.264

package/dist/@ecme/components/template/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../lib/@ecme/components/template/Search.tsx"],"sourcesContent":["import { NavigationTree } from '@/@types/navigation'\nimport Button from '@/components/ui/Button'\nimport Dialog from '@/components/ui/Dialog'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport navigationIcon from '@/configs/navigation-icon.config'\nimport navigationConfig from '@/configs/navigation.config'\nimport { NAV_ITEM_TYPE_ITEM } from '@/constants/navigation.constant'\nimport {\n    GUIDE_PREFIX_PATH,\n    UI_COMPONENTS_PREFIX_PATH,\n} from '@/constants/route.constant'\nimport classNames from '@/utils/classNames'\nimport withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport {\n    filterDeep,\n    findDeep,\n    findPathDeep,\n    findValueDeep,\n} from 'deepdash-es/standalone'\nimport { flatten, flattenDeep } from 'lodash'\nimport debounce from 'lodash/debounce'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport Highlighter from 'react-highlight-words'\nimport { useTranslation } from 'react-i18next'\nimport { HiChevronRight, HiOutlineSearch } from 'react-icons/hi'\nimport { PiMagnifyingGlassDuotone } from 'react-icons/pi'\nimport { Link } from 'react-router-dom'\nimport { Spinner } from '../ui'\n\ntype SearchData = {\n    key: string\n    path: string\n    title: string\n    icon: string\n    category: string\n    categoryTitle: string\n    breadcrumbs: string[]\n}\n\ntype SearchResult = {\n    title: string\n    data: SearchData[]\n}\n\nconst ListItem = (props: {\n    icon: string\n    label: string\n    url: string\n    isLast?: boolean\n    keyWord: string\n    breadcrumbs: string[]\n    onNavigate: () => void\n}) => {\n    const { icon, label, url = '', keyWord, onNavigate, breadcrumbs } = props\n\n    const makeBreadcrumbs = (breadcrumbs: string[]) => {\n        return breadcrumbs.join(' / ')\n    }\n\n    return (\n        <Link to={url} onClick={onNavigate}>\n            <div\n                className={classNames(\n                    'flex items-center justify-between rounded-xl p-3 cursor-pointer user-select',\n                    'hover:bg-gray-100 dark:hover:bg-gray-700',\n                )}\n            >\n                <div className=\"flex items-center gap-2\">\n                    {/* <div\n                        className={classNames(\n                            'rounded-lg border-2 border-gray-200 shadow-sm text-xl group-hover:shadow h-10 w-10 flex items-center justify-center bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100',\n                        )}\n                    >\n                        {icon && navigationIcon[icon]}\n                    </div> */}\n                    <div className=\"text-gray-900 dark:text-gray-300\">\n                        <Highlighter\n                            autoEscape\n                            highlightClassName={classNames(\n                                'text-primary',\n                                'underline bg-transparent font-semibold dark:text-white',\n                            )}\n                            searchWords={[keyWord]}\n                            textToHighlight={makeBreadcrumbs(breadcrumbs)}\n                        />\n                    </div>\n                </div>\n                <HiChevronRight className=\"text-lg\" />\n            </div>\n        </Link>\n    )\n}\n\ntype NavigationTreeFlat = NavigationTree & { parents: string[] }\n\nconst _Search = ({ className }: { className?: string }) => {\n    const [loading, setLoading] = useState(false)\n    const [searchDialogOpen, setSearchDialogOpen] = useState(false)\n    const [searchResult, setSearchResult] = useState<SearchResult[]>([])\n    const [noResult, setNoResult] = useState(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const handleReset = () => {\n        setNoResult(false)\n        setSearchResult([])\n    }\n\n    const handleSearchOpen = () => {\n        setSearchDialogOpen(true)\n    }\n\n    const handleSearchClose = () => {\n        setSearchDialogOpen(false)\n        handleReset()\n    }\n\n    const debounceFn = debounce(handleDebounceFn, 750)\n\n    const { t } = useTranslation()\n\n    const flatNavTree = useMemo(() => {\n        const arr: NavigationTreeFlat[] = []\n\n        const makeflat = (item: NavigationTree, parents: string[]) => {\n            if (Array.isArray(item.subMenu) && item.subMenu.length > 0) {\n                item.subMenu.forEach((item) =>\n                    makeflat(item, [...parents, t(item.translateKey)]),\n                )\n            }\n            arr.push({ ...item, parents })\n        }\n\n        navigationConfig.forEach(function f(item) {\n            makeflat(item, [t(item.translateKey)])\n        })\n        return arr\n    }, [navigationConfig, t])\n\n    const filterNavigationTreeFlat = (\n        text: string,\n        tree: NavigationTreeFlat[],\n    ): NavigationTreeFlat[] => {\n        const results = tree.filter(\n            (item) =>\n                item.type === NAV_ITEM_TYPE_ITEM &&\n                item.parents.join().toUpperCase().includes(text.toUpperCase()),\n        )\n\n        return results\n    }\n\n    function navTreeFlatToSearchResult(\n        tree: NavigationTreeFlat[],\n    ): SearchResult[] {\n        const navTreeSearchResult: SearchResult = {\n            title: t('base.layout.search.results.navTree'),\n            data: [],\n        }\n        tree.forEach((item) => {\n            navTreeSearchResult.data.push({\n                category: item.path,\n                categoryTitle: item.title,\n                icon: item.icon,\n                key: item.key,\n                path: item.path,\n                title: t(item.translateKey, item.title),\n                breadcrumbs: item.parents,\n            })\n        })\n        return [navTreeSearchResult]\n    }\n\n    async function handleDebounceFn(query: string) {\n        if (!query) {\n            setLoading(false)\n            setSearchResult([])\n            return\n        }\n\n        if (noResult) {\n            setNoResult(false)\n        }\n\n        const res = await filterNavigationTreeFlat(query, flatNavTree)\n\n        if (res) {\n            if (res.length === 0) {\n                setNoResult(true)\n                setSearchResult([])\n            } else {\n                setSearchResult(navTreeFlatToSearchResult(res))\n            }\n        }\n\n        setLoading(false)\n    }\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setLoading(true)\n        debounceFn(e.target.value)\n    }\n\n    useEffect(() => {\n        if (searchDialogOpen) {\n            const timeout = setTimeout(() => inputRef.current?.focus(), 100)\n            return () => {\n                clearTimeout(timeout)\n            }\n        }\n    }, [searchDialogOpen])\n\n    const handleNavigate = () => {\n        handleSearchClose()\n    }\n\n    return (\n        <>\n            <div\n                className={classNames(className, 'text-2xl')}\n                onClick={handleSearchOpen}\n            >\n                <PiMagnifyingGlassDuotone />\n            </div>\n            <Dialog\n                contentClassName=\"p-0\"\n                isOpen={searchDialogOpen}\n                closable={false}\n                onRequestClose={handleSearchClose}\n            >\n                <div>\n                    <div className=\"flex items-center justify-between border-b border-gray-200 px-4 dark:border-gray-600\">\n                        <div className=\"flex items-center\">\n                            <HiOutlineSearch className=\"text-xl\" />\n                            <input\n                                ref={inputRef}\n                                className=\"block w-full bg-transparent p-4 text-base text-gray-900 outline-none ring-0 dark:text-gray-100\"\n                                placeholder={t('common.input.placeholder.search')}\n                                onChange={handleSearch}\n                            />\n                        </div>\n                        <Button size=\"xs\" onClick={handleSearchClose}>\n                            Esc\n                        </Button>\n                    </div>\n                    <div className=\"px-5 py-6\">\n                        {loading ? (\n                            <div\n                                className={classNames(\n                                    'flex items-center justify-center',\n                                )}\n                            >\n                                <Spinner size={40} />\n                            </div>\n                        ) : (\n                            <>\n                                <ScrollBar className=\"max-h-[350px] overflow-y-auto\">\n                                    {searchResult.map((result) => (\n                                        <div\n                                            key={result.title}\n                                            className=\"mb-4\"\n                                        >\n                                            <h6 className=\"mb-3\">\n                                                {result.title}\n                                            </h6>\n                                            {result.data.map((data, index) => (\n                                                <ListItem\n                                                    key={data.title + index}\n                                                    icon={data.icon}\n                                                    breadcrumbs={\n                                                        data.breadcrumbs\n                                                    }\n                                                    label={data.title}\n                                                    url={data.path}\n                                                    keyWord={\n                                                        inputRef.current\n                                                            ?.value || ''\n                                                    }\n                                                    onNavigate={handleNavigate}\n                                                />\n                                            ))}\n                                        </div>\n                                    ))}\n                                    {searchResult.length === 0 && noResult && (\n                                        <div className=\"my-10 text-center text-lg\">\n                                            <span className=\"pr-1\">\n                                                {t(\n                                                    'common.status.noResultsFor',\n                                                )}\n                                            </span>\n                                            <span className=\"heading-text\">\n                                                {`'`}\n                                                {inputRef.current?.value}\n                                                {`'`}\n                                            </span>\n                                        </div>\n                                    )}\n                                </ScrollBar>\n                            </>\n                        )}\n                    </div>\n                </div>\n            </Dialog>\n        </>\n    )\n}\n\nconst Search = withHeaderItem(_Search)\n\nexport default Search\n"],"names":["ListItem","props","icon","label","url","keyWord","onNavigate","breadcrumbs","makeBreadcrumbs","jsx","Link","jsxs","classNames","Highlighter","HiChevronRight","_Search","className","loading","setLoading","useState","searchDialogOpen","setSearchDialogOpen","searchResult","setSearchResult","noResult","setNoResult","inputRef","useRef","handleReset","handleSearchOpen","handleSearchClose","debounceFn","debounce","handleDebounceFn","t","useTranslation","flatNavTree","useMemo","arr","makeflat","item","parents","navigationConfig","filterNavigationTreeFlat","text","tree","NAV_ITEM_TYPE_ITEM","navTreeFlatToSearchResult","navTreeSearchResult","query","res","handleSearch","e","useEffect","timeout","handleNavigate","Fragment","PiMagnifyingGlassDuotone","Dialog","HiOutlineSearch","Button","Spinner","ScrollBar","result","data","index","Search","withHeaderItem"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../../../lib/@ecme/components/template/Search.tsx"],"sourcesContent":["import { NavigationTree } from '@/@types/navigation'\nimport Button from '@/components/ui/Button'\nimport Dialog from '@/components/ui/Dialog'\nimport ScrollBar from '@/components/ui/ScrollBar'\nimport navigationIcon from '@/configs/navigation-icon.config'\nimport navigationConfig from '@/configs/navigation.config'\nimport { NAV_ITEM_TYPE_ITEM } from '@/constants/navigation.constant'\nimport {\n    GUIDE_PREFIX_PATH,\n    UI_COMPONENTS_PREFIX_PATH,\n} from '@/constants/route.constant'\nimport classNames from '@/utils/classNames'\nimport withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport {\n    filterDeep,\n    findDeep,\n    findPathDeep,\n    findValueDeep,\n} from 'deepdash-es/standalone'\nimport { flatten, flattenDeep } from 'lodash'\nimport debounce from 'lodash/debounce'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport Highlighter from 'react-highlight-words'\nimport { useTranslation } from 'react-i18next'\nimport { HiChevronRight, HiOutlineSearch } from 'react-icons/hi'\nimport { PiMagnifyingGlassDuotone } from 'react-icons/pi'\nimport { Link } from 'react-router-dom'\nimport { Spinner } from '../ui'\n\ntype SearchData = {\n    key: string\n    path: string\n    title: string\n    icon: string\n    category: string\n    categoryTitle: string\n    breadcrumbs: string[]\n}\n\ntype SearchResult = {\n    title: string\n    data: SearchData[]\n}\n\nconst ListItem = (props: {\n    icon: string\n    label: string\n    url: string\n    isLast?: boolean\n    keyWord: string\n    breadcrumbs: string[]\n    onNavigate: () => void\n}) => {\n    const { icon, label, url = '', keyWord, onNavigate, breadcrumbs } = props\n\n    const makeBreadcrumbs = (breadcrumbs: string[]) => {\n        return breadcrumbs.join(' / ')\n    }\n\n    return (\n        <Link to={url} onClick={onNavigate}>\n            <div\n                className={classNames(\n                    'flex items-center justify-between rounded-xl p-3 cursor-pointer user-select',\n                    'hover:bg-gray-100 dark:hover:bg-gray-700',\n                )}\n            >\n                <div className=\"flex items-center gap-2\">\n                    {/* <div\n                        className={classNames(\n                            'rounded-lg border-2 border-gray-200 shadow-sm text-xl group-hover:shadow h-10 w-10 flex items-center justify-center bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100',\n                        )}\n                    >\n                        {icon && navigationIcon[icon]}\n                    </div> */}\n                    <div className=\"text-gray-900 dark:text-gray-300\">\n                        <Highlighter\n                            autoEscape\n                            highlightClassName={classNames(\n                                'text-primary',\n                                'underline bg-transparent font-semibold dark:text-white',\n                            )}\n                            searchWords={[keyWord]}\n                            textToHighlight={makeBreadcrumbs(breadcrumbs)}\n                        />\n                    </div>\n                </div>\n                <HiChevronRight className=\"text-lg\" />\n            </div>\n        </Link>\n    )\n}\n\ntype NavigationTreeFlat = NavigationTree & { parents: string[] }\n\nconst _Search = ({ className }: { className?: string }) => {\n    const [loading, setLoading] = useState(false)\n    const [searchDialogOpen, setSearchDialogOpen] = useState(false)\n    const [searchResult, setSearchResult] = useState<SearchResult[]>([])\n    const [noResult, setNoResult] = useState(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const handleReset = () => {\n        setNoResult(false)\n        setSearchResult([])\n    }\n\n    const handleSearchOpen = () => {\n        setSearchDialogOpen(true)\n    }\n\n    const handleSearchClose = () => {\n        setSearchDialogOpen(false)\n        handleReset()\n    }\n\n    const debounceFn = debounce(handleDebounceFn, 750)\n\n    const { t } = useTranslation()\n\n    const flatNavTree = useMemo(() => {\n        const arr: NavigationTreeFlat[] = []\n\n        const makeflat = (item: NavigationTree, parents: string[]) => {\n            if (Array.isArray(item.subMenu) && item.subMenu.length > 0) {\n                item.subMenu.forEach((item) =>\n                    makeflat(item, [...parents, t(item.translateKey)]),\n                )\n            }\n            arr.push({ ...item, parents })\n        }\n\n        navigationConfig.forEach(function f(item) {\n            makeflat(item, [t(item.translateKey)])\n        })\n        return arr\n    }, [navigationConfig, t])\n\n    const filterNavigationTreeFlat = (\n        text: string,\n        tree: NavigationTreeFlat[],\n    ): NavigationTreeFlat[] => {\n        const results = tree.filter(\n            (item) =>\n                item.type === NAV_ITEM_TYPE_ITEM &&\n                item.parents.join().toUpperCase().includes(text.toUpperCase()),\n        )\n\n        return results\n    }\n\n    function navTreeFlatToSearchResult(\n        tree: NavigationTreeFlat[],\n    ): SearchResult[] {\n        const navTreeSearchResult: SearchResult = {\n            title: t('base.layout.search.results.navTree'),\n            data: [],\n        }\n        tree.forEach((item) => {\n            navTreeSearchResult.data.push({\n                category: item.path,\n                categoryTitle: item.title,\n                icon: item.icon,\n                key: item.key,\n                path: item.path,\n                title: t(item.translateKey, item.title),\n                breadcrumbs: item.parents,\n            })\n        })\n        return [navTreeSearchResult]\n    }\n\n    async function handleDebounceFn(query: string) {\n        if (!query) {\n            setLoading(false)\n            setSearchResult([])\n            return\n        }\n\n        if (noResult) {\n            setNoResult(false)\n        }\n\n        const res = await filterNavigationTreeFlat(query, flatNavTree)\n\n        if (res) {\n            if (res.length === 0) {\n                setNoResult(true)\n                setSearchResult([])\n            } else {\n                setSearchResult(navTreeFlatToSearchResult(res))\n            }\n        }\n\n        setLoading(false)\n    }\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setLoading(true)\n        debounceFn(e.target.value)\n    }\n\n    useEffect(() => {\n        if (searchDialogOpen) {\n            const timeout = setTimeout(() => inputRef.current?.focus(), 100)\n            return () => {\n                clearTimeout(timeout)\n            }\n        }\n    }, [searchDialogOpen])\n\n    const handleNavigate = () => {\n        handleSearchClose()\n    }\n\n    return (\n        <>\n            <div\n                className={classNames(className, 'text-2xl')}\n                onClick={handleSearchOpen}\n            >\n                <PiMagnifyingGlassDuotone />\n            </div>\n            <Dialog\n                contentClassName=\"p-0\"\n                isOpen={searchDialogOpen}\n                closable={false}\n                onRequestClose={handleSearchClose}\n            >\n                <div>\n                    <div className=\"flex items-center justify-between border-b border-gray-200 px-4 dark:border-gray-600\">\n                        <div className=\"flex items-center\">\n                            <HiOutlineSearch className=\"text-xl\" />\n                            <input\n                                ref={inputRef}\n                                className=\"block w-full bg-transparent p-4 text-base text-gray-900 outline-none ring-0 dark:text-gray-100\"\n                                placeholder={t('common.input.placeholder.search')}\n                                onChange={handleSearch}\n                            />\n                        </div>\n                        <Button size=\"xs\" onClick={handleSearchClose}>\n                            Esc\n                        </Button>\n                    </div>\n                    <div className=\"px-5 py-6\">\n                        {loading ? (\n                            <div\n                                className={classNames(\n                                    'flex items-center justify-center',\n                                )}\n                            >\n                                <Spinner size={40} />\n                            </div>\n                        ) : (\n                            <>\n                                <ScrollBar className=\"max-h-[350px] overflow-y-auto\">\n                                    {searchResult.map((result) => (\n                                        <div\n                                            key={result.title}\n                                            className=\"mb-4\"\n                                        >\n                                            <h6 className=\"mb-3\">\n                                                {result.title}\n                                            </h6>\n                                            {result.data.map((data, index) => (\n                                                <ListItem\n                                                    key={data.title + index}\n                                                    icon={data.icon}\n                                                    breadcrumbs={\n                                                        data.breadcrumbs\n                                                    }\n                                                    label={data.title}\n                                                    url={data.path}\n                                                    keyWord={\n                                                        inputRef.current\n                                                            ?.value || ''\n                                                    }\n                                                    onNavigate={handleNavigate}\n                                                />\n                                            ))}\n                                        </div>\n                                    ))}\n                                    {searchResult.length === 0 && noResult && (\n                                        <div className=\"my-10 text-center text-lg\">\n                                            <span className=\"pr-1\">\n                                                {t(\n                                                    'common.status.noResultsFor',\n                                                )}\n                                            </span>\n                                            <span className=\"heading-text\">\n                                                {`'`}\n                                                {inputRef.current?.value}\n                                                {`'`}\n                                            </span>\n                                        </div>\n                                    )}\n                                </ScrollBar>\n                            </>\n                        )}\n                    </div>\n                </div>\n            </Dialog>\n        </>\n    )\n}\n\nconst Search = withHeaderItem(_Search)\n\nexport default Search\n"],"names":["breadcrumbs","item"],"mappings":"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"}

package/dist/@ecme/components/template/SideNav.js

@@ -1,76 +1,82 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import r from "../../utils/classNames.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "../../utils/classNames.js";
 import "../ui/ScrollBar/index.js";
-import y from "./Logo.js";
+import Logo from "./Logo.js";
 import "./VerticalMenuContent/index.js";
-import { useThemeStore as i } from "../../store/themeStore.js";
-import { useSessionUser as T } from "../../store/authStore.js";
-import { useRouteKeyStore as g } from "../../store/routeKeyStore.js";
-import E from "../../configs/navigation.config/index.js";
-import a from "../../configs/app.config.js";
-import { Link as S } from "react-router-dom";
-import { SIDE_NAV_WIDTH as n, SIDE_NAV_COLLAPSED_WIDTH as m, SIDE_NAV_CONTENT_GUTTER as _, LOGO_X_GUTTER as x, HEADER_HEIGHT as C } from "../../constants/theme.constant.js";
-import { getLogoFilename as A } from "../../../base/utils/logo.js";
-import D from "../ui/ScrollBar/ScrollBar.js";
-import I from "./VerticalMenuContent/VerticalMenuContent.js";
-const L = {
-  width: n,
-  minWidth: n
-}, R = {
-  width: m,
-  minWidth: m
-}, q = ({
-  translationSetup: l = a.activeNavTranslation,
-  background: d = !0,
-  className: c,
-  contentClass: p,
-  mode: H,
-  linkRenderer: u
+import { useThemeStore } from "../../store/themeStore.js";
+import { useSessionUser } from "../../store/authStore.js";
+import { useRouteKeyStore } from "../../store/routeKeyStore.js";
+import navigationConfig from "../../configs/navigation.config/index.js";
+import appConfig from "../../configs/app.config.js";
+import { Link } from "react-router-dom";
+import { SIDE_NAV_WIDTH, SIDE_NAV_COLLAPSED_WIDTH, SIDE_NAV_CONTENT_GUTTER, LOGO_X_GUTTER, HEADER_HEIGHT } from "../../constants/theme.constant.js";
+import { getLogoFilename } from "../../../base/utils/logo.js";
+import ScrollBar from "../ui/ScrollBar/ScrollBar.js";
+import VerticalMenuContent from "./VerticalMenuContent/VerticalMenuContent.js";
+const sideNavStyle = {
+  width: SIDE_NAV_WIDTH,
+  minWidth: SIDE_NAV_WIDTH
+};
+const sideNavCollapseStyle = {
+  width: SIDE_NAV_COLLAPSED_WIDTH,
+  minWidth: SIDE_NAV_COLLAPSED_WIDTH
+};
+const SideNav = ({
+  translationSetup = appConfig.activeNavTranslation,
+  background = true,
+  className,
+  contentClass,
+  mode,
+  linkRenderer
 }) => {
-  const f = i((e) => e.mode), s = i((e) => e.direction), t = i(
-    (e) => e.layout.sideNavCollapse
-  ), h = g((e) => e.currentRouteKey), v = T((e) => e.user.authority);
-  return /* @__PURE__ */ N(
+  const defaultMode = useThemeStore((state) => state.mode);
+  const direction = useThemeStore((state) => state.direction);
+  const sideNavCollapse = useThemeStore(
+    (state) => state.layout.sideNavCollapse
+  );
+  const currentRouteKey = useRouteKeyStore((state) => state.currentRouteKey);
+  const userAuthority = useSessionUser((state) => state.user.authority);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      style: t ? R : L,
-      className: r(
+      style: sideNavCollapse ? sideNavCollapseStyle : sideNavStyle,
+      className: classNames(
         "side-nav",
-        d && "side-nav-bg",
-        !t && "side-nav-expand",
-        c
+        background && "side-nav-bg",
+        !sideNavCollapse && "side-nav-expand",
+        className
       ),
       children: [
-        /* @__PURE__ */ o(
-          S,
+        /* @__PURE__ */ jsx(
+          Link,
           {
-            to: a.authenticatedEntryPath,
+            to: appConfig.authenticatedEntryPath,
             className: "side-nav-header flex flex-col justify-center",
-            style: { height: C },
-            children: /* @__PURE__ */ o(
-              y,
+            style: { height: HEADER_HEIGHT },
+            children: /* @__PURE__ */ jsx(
+              Logo,
               {
                 imgClass: "max-h-8",
-                name: A(t, f),
-                className: r(
+                name: getLogoFilename(sideNavCollapse, defaultMode),
+                className: classNames(
                   "",
-                  t && "ltr:ml-[11.5px] ltr:mr-[11.5px]",
-                  t ? _ : x
+                  sideNavCollapse && "ltr:ml-[11.5px] ltr:mr-[11.5px]",
+                  sideNavCollapse ? SIDE_NAV_CONTENT_GUTTER : LOGO_X_GUTTER
                 )
               }
             )
           }
         ),
-        /* @__PURE__ */ o("div", { className: r("side-nav-content", p), children: /* @__PURE__ */ o(D, { style: { height: "100%" }, direction: s, children: /* @__PURE__ */ o(
-          I,
+        /* @__PURE__ */ jsx("div", { className: classNames("side-nav-content", contentClass), children: /* @__PURE__ */ jsx(ScrollBar, { style: { height: "100%" }, direction, children: /* @__PURE__ */ jsx(
+          VerticalMenuContent,
           {
-            collapsed: t,
-            navigationTree: E,
-            routeKey: h,
-            direction: s,
-            translationSetup: l,
-            userAuthority: v || [],
-            linkRenderer: u
+            collapsed: sideNavCollapse,
+            navigationTree: navigationConfig,
+            routeKey: currentRouteKey,
+            direction,
+            translationSetup,
+            userAuthority: userAuthority || [],
+            linkRenderer
           }
         ) }) })
       ]
@@ -78,6 +84,6 @@ const L = {
   );
 };
 export {
-  q as default
+  SideNav as default
 };
 //# sourceMappingURL=SideNav.js.map

package/dist/@ecme/components/template/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sources":["../../../../lib/@ecme/components/template/SideNav.tsx"],"sourcesContent":["import classNames from \"@/utils/classNames\";\nimport ScrollBar from \"@/components/ui/ScrollBar\";\nimport Logo from \"@/components/template/Logo\";\nimport VerticalMenuContent from \"@/components/template/VerticalMenuContent\";\nimport { useThemeStore } from \"@/store/themeStore\";\nimport { useSessionUser } from \"@/store/authStore\";\nimport { useRouteKeyStore } from \"@/store/routeKeyStore\";\nimport navigationConfig from \"@/configs/navigation.config\";\nimport appConfig from \"@/configs/app.config\";\nimport { Link } from \"react-router-dom\";\nimport {\n  SIDE_NAV_WIDTH,\n  SIDE_NAV_COLLAPSED_WIDTH,\n  SIDE_NAV_CONTENT_GUTTER,\n  HEADER_HEIGHT,\n  LOGO_X_GUTTER,\n} from \"@/constants/theme.constant\";\nimport type { Mode } from \"@/@types/theme\";\nimport { getLogoFilename } from \"@base/utils/logo\";\nimport { LinkRenderer } from \"../layouts/Layouts\";\n\ntype SideNavProps = {\n  translationSetup?: boolean;\n  background?: boolean;\n  className?: string;\n  contentClass?: string;\n  mode?: Mode;\n  linkRenderer?: LinkRenderer;\n};\n\nconst sideNavStyle = {\n  width: SIDE_NAV_WIDTH,\n  minWidth: SIDE_NAV_WIDTH,\n};\n\nconst sideNavCollapseStyle = {\n  width: SIDE_NAV_COLLAPSED_WIDTH,\n  minWidth: SIDE_NAV_COLLAPSED_WIDTH,\n};\n\nconst SideNav = ({\n  translationSetup = appConfig.activeNavTranslation,\n  background = true,\n  className,\n  contentClass,\n  mode,\n  linkRenderer,\n}: SideNavProps) => {\n  const defaultMode = useThemeStore((state) => state.mode);\n  const direction = useThemeStore((state) => state.direction);\n  const sideNavCollapse = useThemeStore(\n    (state) => state.layout.sideNavCollapse\n  );\n\n  const currentRouteKey = useRouteKeyStore((state) => state.currentRouteKey);\n\n  const userAuthority = useSessionUser((state) => state.user.authority);\n\n  return (\n    <div\n      style={sideNavCollapse ? sideNavCollapseStyle : sideNavStyle}\n      className={classNames(\n        \"side-nav\",\n        background && \"side-nav-bg\",\n        !sideNavCollapse && \"side-nav-expand\",\n        className\n      )}\n    >\n      <Link\n        to={appConfig.authenticatedEntryPath}\n        className=\"side-nav-header flex flex-col justify-center\"\n        style={{ height: HEADER_HEIGHT }}\n      >\n        <Logo\n          imgClass=\"max-h-8\"\n          name={getLogoFilename(sideNavCollapse, defaultMode)}\n          className={classNames(\n            \"\",\n            sideNavCollapse && \"ltr:ml-[11.5px] ltr:mr-[11.5px]\",\n            sideNavCollapse ? SIDE_NAV_CONTENT_GUTTER : LOGO_X_GUTTER\n          )}\n        />\n      </Link>\n      <div className={classNames(\"side-nav-content\", contentClass)}>\n        <ScrollBar style={{ height: \"100%\" }} direction={direction}>\n          <VerticalMenuContent\n            collapsed={sideNavCollapse}\n            navigationTree={navigationConfig}\n            routeKey={currentRouteKey}\n            direction={direction}\n            translationSetup={translationSetup}\n            userAuthority={userAuthority || []}\n            linkRenderer={linkRenderer}\n          />\n        </ScrollBar>\n      </div>\n    </div>\n  );\n};\n\nexport default SideNav;\n"],"names":["sideNavStyle","SIDE_NAV_WIDTH","sideNavCollapseStyle","SIDE_NAV_COLLAPSED_WIDTH","SideNav","translationSetup","appConfig","background","className","contentClass","mode","linkRenderer","defaultMode","useThemeStore","state","direction","sideNavCollapse","currentRouteKey","useRouteKeyStore","userAuthority","useSessionUser","jsxs","classNames","jsx","Link","HEADER_HEIGHT","Logo","getLogoFilename","SIDE_NAV_CONTENT_GUTTER","LOGO_X_GUTTER","ScrollBar","VerticalMenuContent","navigationConfig"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAMA,IAAe;AAAA,EACnB,OAAOC;AAAA,EACP,UAAUA;AACZ,GAEMC,IAAuB;AAAA,EAC3B,OAAOC;AAAA,EACP,UAAUA;AACZ,GAEMC,IAAU,CAAC;AAAA,EACf,kBAAAC,IAAmBC,EAAU;AAAA,EAC7B,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AACF,MAAoB;AAClB,QAAMC,IAAcC,EAAc,CAACC,MAAUA,EAAM,IAAI,GACjDC,IAAYF,EAAc,CAACC,MAAUA,EAAM,SAAS,GACpDE,IAAkBH;AAAA,IACtB,CAACC,MAAUA,EAAM,OAAO;AAAA,EAC1B,GAEMG,IAAkBC,EAAiB,CAACJ,MAAUA,EAAM,eAAe,GAEnEK,IAAgBC,EAAe,CAACN,MAAUA,EAAM,KAAK,SAAS;AAGlE,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOL,IAAkBd,IAAuBF;AAAA,MAChD,WAAWsB;AAAA,QACT;AAAA,QACAf,KAAc;AAAA,QACd,CAACS,KAAmB;AAAA,QACpBR;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIlB,EAAU;AAAA,YACd,WAAU;AAAA,YACV,OAAO,EAAE,QAAQmB,EAAc;AAAA,YAE/B,UAAA,gBAAAF;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,MAAMC,EAAgBX,GAAiBJ,CAAW;AAAA,gBAClD,WAAWU;AAAA,kBACT;AAAA,kBACAN,KAAmB;AAAA,kBACnBA,IAAkBY,IAA0BC;AAAA,gBAAA;AAAA,cAC9C;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,QACC,gBAAAN,EAAA,OAAA,EAAI,WAAWD,EAAW,oBAAoBb,CAAY,GACzD,UAAC,gBAAAc,EAAAO,GAAA,EAAU,OAAO,EAAE,QAAQ,UAAU,WAAAf,GACpC,UAAA,gBAAAQ;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,WAAWf;AAAA,YACX,gBAAgBgB;AAAA,YAChB,UAAUf;AAAA,YACV,WAAAF;AAAA,YACA,kBAAAV;AAAA,YACA,eAAec,KAAiB,CAAC;AAAA,YACjC,cAAAR;AAAA,UAAA;AAAA,WAEJ,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"SideNav.js","sources":["../../../../lib/@ecme/components/template/SideNav.tsx"],"sourcesContent":["import classNames from \"@/utils/classNames\";\nimport ScrollBar from \"@/components/ui/ScrollBar\";\nimport Logo from \"@/components/template/Logo\";\nimport VerticalMenuContent from \"@/components/template/VerticalMenuContent\";\nimport { useThemeStore } from \"@/store/themeStore\";\nimport { useSessionUser } from \"@/store/authStore\";\nimport { useRouteKeyStore } from \"@/store/routeKeyStore\";\nimport navigationConfig from \"@/configs/navigation.config\";\nimport appConfig from \"@/configs/app.config\";\nimport { Link } from \"react-router-dom\";\nimport {\n  SIDE_NAV_WIDTH,\n  SIDE_NAV_COLLAPSED_WIDTH,\n  SIDE_NAV_CONTENT_GUTTER,\n  HEADER_HEIGHT,\n  LOGO_X_GUTTER,\n} from \"@/constants/theme.constant\";\nimport type { Mode } from \"@/@types/theme\";\nimport { getLogoFilename } from \"@base/utils/logo\";\nimport { LinkRenderer } from \"../layouts/Layouts\";\n\ntype SideNavProps = {\n  translationSetup?: boolean;\n  background?: boolean;\n  className?: string;\n  contentClass?: string;\n  mode?: Mode;\n  linkRenderer?: LinkRenderer;\n};\n\nconst sideNavStyle = {\n  width: SIDE_NAV_WIDTH,\n  minWidth: SIDE_NAV_WIDTH,\n};\n\nconst sideNavCollapseStyle = {\n  width: SIDE_NAV_COLLAPSED_WIDTH,\n  minWidth: SIDE_NAV_COLLAPSED_WIDTH,\n};\n\nconst SideNav = ({\n  translationSetup = appConfig.activeNavTranslation,\n  background = true,\n  className,\n  contentClass,\n  mode,\n  linkRenderer,\n}: SideNavProps) => {\n  const defaultMode = useThemeStore((state) => state.mode);\n  const direction = useThemeStore((state) => state.direction);\n  const sideNavCollapse = useThemeStore(\n    (state) => state.layout.sideNavCollapse\n  );\n\n  const currentRouteKey = useRouteKeyStore((state) => state.currentRouteKey);\n\n  const userAuthority = useSessionUser((state) => state.user.authority);\n\n  return (\n    <div\n      style={sideNavCollapse ? sideNavCollapseStyle : sideNavStyle}\n      className={classNames(\n        \"side-nav\",\n        background && \"side-nav-bg\",\n        !sideNavCollapse && \"side-nav-expand\",\n        className\n      )}\n    >\n      <Link\n        to={appConfig.authenticatedEntryPath}\n        className=\"side-nav-header flex flex-col justify-center\"\n        style={{ height: HEADER_HEIGHT }}\n      >\n        <Logo\n          imgClass=\"max-h-8\"\n          name={getLogoFilename(sideNavCollapse, defaultMode)}\n          className={classNames(\n            \"\",\n            sideNavCollapse && \"ltr:ml-[11.5px] ltr:mr-[11.5px]\",\n            sideNavCollapse ? SIDE_NAV_CONTENT_GUTTER : LOGO_X_GUTTER\n          )}\n        />\n      </Link>\n      <div className={classNames(\"side-nav-content\", contentClass)}>\n        <ScrollBar style={{ height: \"100%\" }} direction={direction}>\n          <VerticalMenuContent\n            collapsed={sideNavCollapse}\n            navigationTree={navigationConfig}\n            routeKey={currentRouteKey}\n            direction={direction}\n            translationSetup={translationSetup}\n            userAuthority={userAuthority || []}\n            linkRenderer={linkRenderer}\n          />\n        </ScrollBar>\n      </div>\n    </div>\n  );\n};\n\nexport default SideNav;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,uBAAuB;AAAA,EAC3B,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,UAAU,CAAC;AAAA,EACf,mBAAmB,UAAU;AAAA,EAC7B,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoB;AAClB,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,IAAI;AACvD,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAAU,MAAM,OAAO;AAAA,EAC1B;AAEA,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAgB,eAAe,CAAC,UAAU,MAAM,KAAK,SAAS;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,kBAAkB,uBAAuB;AAAA,MAChD,WAAW;AAAA,QACT;AAAA,QACA,cAAc;AAAA,QACd,CAAC,mBAAmB;AAAA,QACpB;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,UAAU;AAAA,YACd,WAAU;AAAA,YACV,OAAO,EAAE,QAAQ,cAAc;AAAA,YAE/B,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,MAAM,gBAAgB,iBAAiB,WAAW;AAAA,gBAClD,WAAW;AAAA,kBACT;AAAA,kBACA,mBAAmB;AAAA,kBACnB,kBAAkB,0BAA0B;AAAA,gBAAA;AAAA,cAC9C;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,WAAW,oBAAoB,YAAY,GACzD,UAAC,oBAAA,WAAA,EAAU,OAAO,EAAE,QAAQ,UAAU,WACpC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YACX,gBAAgB;AAAA,YAChB,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,eAAe,iBAAiB,CAAC;AAAA,YACjC;AAAA,UAAA;AAAA,WAEJ,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/@ecme/components/template/SideNavToggle.js

@@ -1,15 +1,19 @@
-import { jsx as e, Fragment as m } from "react/jsx-runtime";
-import n from "../../utils/hoc/withHeaderItem.js";
-import { useThemeStore as d } from "../../store/themeStore.js";
-import p from "../../utils/hooks/useResponsive.js";
-import c from "../shared/NavToggle.js";
-const g = ({ className: t }) => {
-  const { layout: l, setSideNavCollapse: r } = d((i) => i), o = l.sideNavCollapse, { larger: s } = p(), a = () => {
-    r(!o);
+import { jsx, Fragment } from "react/jsx-runtime";
+import withHeaderItem from "../../utils/hoc/withHeaderItem.js";
+import { useThemeStore } from "../../store/themeStore.js";
+import useResponsive from "../../utils/hooks/useResponsive.js";
+import NavToggle from "../shared/NavToggle.js";
+const _SideNavToggle = ({ className }) => {
+  const { layout, setSideNavCollapse } = useThemeStore((state) => state);
+  const sideNavCollapse = layout.sideNavCollapse;
+  const { larger } = useResponsive();
+  const onCollapse = () => {
+    setSideNavCollapse(!sideNavCollapse);
   };
-  return /* @__PURE__ */ e(m, { children: s.md && /* @__PURE__ */ e("div", { className: t, role: "button", onClick: a, children: /* @__PURE__ */ e(c, { className: "text-2xl", toggled: o }) }) });
-}, h = n(g);
+  return /* @__PURE__ */ jsx(Fragment, { children: larger.md && /* @__PURE__ */ jsx("div", { className, role: "button", onClick: onCollapse, children: /* @__PURE__ */ jsx(NavToggle, { className: "text-2xl", toggled: sideNavCollapse }) }) });
+};
+const SideNavToggle = withHeaderItem(_SideNavToggle);
 export {
-  h as default
+  SideNavToggle as default
 };
 //# sourceMappingURL=SideNavToggle.js.map

package/dist/@ecme/components/template/SideNavToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavToggle.js","sources":["../../../../lib/@ecme/components/template/SideNavToggle.tsx"],"sourcesContent":["import withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport { useThemeStore } from '@/store/themeStore'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport NavToggle from '@/components/shared/NavToggle'\nimport type { CommonProps } from '@/@types/common'\n\nconst _SideNavToggle = ({ className }: CommonProps) => {\n    const { layout, setSideNavCollapse } = useThemeStore((state) => state)\n\n    const sideNavCollapse = layout.sideNavCollapse\n\n    const { larger } = useResponsive()\n\n    const onCollapse = () => {\n        setSideNavCollapse(!sideNavCollapse)\n    }\n\n    return (\n        <>\n            {larger.md && (\n                <div className={className} role=\"button\" onClick={onCollapse}>\n                    <NavToggle className=\"text-2xl\" toggled={sideNavCollapse} />\n                </div>\n            )}\n        </>\n    )\n}\n\nconst SideNavToggle = withHeaderItem(_SideNavToggle)\n\nexport default SideNavToggle\n"],"names":["_SideNavToggle","className","layout","setSideNavCollapse","useThemeStore","state","sideNavCollapse","larger","useResponsive","onCollapse","jsx","NavToggle","SideNavToggle","withHeaderItem"],"mappings":";;;;;AAMA,MAAMA,IAAiB,CAAC,EAAE,WAAAC,QAA6B;AACnD,QAAM,EAAE,QAAAC,GAAQ,oBAAAC,EAAA,IAAuBC,EAAc,CAACC,MAAUA,CAAK,GAE/DC,IAAkBJ,EAAO,iBAEzB,EAAE,QAAAK,EAAO,IAAIC,EAAc,GAE3BC,IAAa,MAAM;AACrB,IAAAN,EAAmB,CAACG,CAAe;AAAA,EACvC;AAEA,gCAES,UAAOC,EAAA,MACH,gBAAAG,EAAA,OAAA,EAAI,WAAAT,GAAsB,MAAK,UAAS,SAASQ,GAC9C,4BAACE,GAAU,EAAA,WAAU,YAAW,SAASL,GAAiB,GAC9D,EAER,CAAA;AAER,GAEMM,IAAgBC,EAAeb,CAAc;"}
+{"version":3,"file":"SideNavToggle.js","sources":["../../../../lib/@ecme/components/template/SideNavToggle.tsx"],"sourcesContent":["import withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport { useThemeStore } from '@/store/themeStore'\nimport useResponsive from '@/utils/hooks/useResponsive'\nimport NavToggle from '@/components/shared/NavToggle'\nimport type { CommonProps } from '@/@types/common'\n\nconst _SideNavToggle = ({ className }: CommonProps) => {\n    const { layout, setSideNavCollapse } = useThemeStore((state) => state)\n\n    const sideNavCollapse = layout.sideNavCollapse\n\n    const { larger } = useResponsive()\n\n    const onCollapse = () => {\n        setSideNavCollapse(!sideNavCollapse)\n    }\n\n    return (\n        <>\n            {larger.md && (\n                <div className={className} role=\"button\" onClick={onCollapse}>\n                    <NavToggle className=\"text-2xl\" toggled={sideNavCollapse} />\n                </div>\n            )}\n        </>\n    )\n}\n\nconst SideNavToggle = withHeaderItem(_SideNavToggle)\n\nexport default SideNavToggle\n"],"names":[],"mappings":";;;;;AAMA,MAAM,iBAAiB,CAAC,EAAE,gBAA6B;AACnD,QAAM,EAAE,QAAQ,mBAAA,IAAuB,cAAc,CAAC,UAAU,KAAK;AAErE,QAAM,kBAAkB,OAAO;AAEzB,QAAA,EAAE,OAAO,IAAI,cAAc;AAEjC,QAAM,aAAa,MAAM;AACrB,uBAAmB,CAAC,eAAe;AAAA,EACvC;AAEA,yCAES,UAAO,OAAA,MACH,oBAAA,OAAA,EAAI,WAAsB,MAAK,UAAS,SAAS,YAC9C,8BAAC,WAAU,EAAA,WAAU,YAAW,SAAS,iBAAiB,GAC9D,EAER,CAAA;AAER;AAEM,MAAA,gBAAgB,eAAe,cAAc;"}

package/dist/@ecme/components/template/SidePanel/SidePanel.js

@@ -1,46 +1,56 @@
-import { jsxs as p, Fragment as f, jsx as o } from "react/jsx-runtime";
-import u from "classnames";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 import "../../ui/Drawer/index.js";
-import { PiGearDuotone as x } from "react-icons/pi";
-import h from "./SidePanelContent.js";
-import P from "../../../utils/hoc/withHeaderItem.js";
-import { useThemeStore as n } from "../../../store/themeStore.js";
-import { useTranslation as C } from "react-i18next";
-import w from "../../ui/Drawer/Drawer.js";
-const k = (s) => {
-  const { className: l, ...a } = s, i = n((e) => e.panelExpand), c = n((e) => e.direction), r = n((e) => e.setPanelExpand), m = () => {
-    r(!0);
-  }, t = () => {
-    if (r(!1), document) {
-      const e = document.body.classList;
-      e.contains("drawer-lock-scroll") && e.remove("drawer-lock-scroll", "drawer-open");
+import { PiGearDuotone } from "react-icons/pi";
+import SidePanelContent from "./SidePanelContent.js";
+import withHeaderItem from "../../../utils/hoc/withHeaderItem.js";
+import { useThemeStore } from "../../../store/themeStore.js";
+import { useTranslation } from "react-i18next";
+import Drawer from "../../ui/Drawer/Drawer.js";
+const _SidePanel = (props) => {
+  const { className, ...rest } = props;
+  const panelExpand = useThemeStore((state) => state.panelExpand);
+  const direction = useThemeStore((state) => state.direction);
+  const setPanelExpand = useThemeStore((state) => state.setPanelExpand);
+  const openPanel = () => {
+    setPanelExpand(true);
+  };
+  const closePanel = () => {
+    setPanelExpand(false);
+    if (document) {
+      const bodyClassList = document.body.classList;
+      if (bodyClassList.contains("drawer-lock-scroll")) {
+        bodyClassList.remove("drawer-lock-scroll", "drawer-open");
+      }
     }
-  }, { t: d } = C();
-  return /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ o(
+  };
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: u("text-2xl", l),
-        onClick: m,
-        ...a,
-        children: /* @__PURE__ */ o(x, {})
+        className: classNames("text-2xl", className),
+        onClick: openPanel,
+        ...rest,
+        children: /* @__PURE__ */ jsx(PiGearDuotone, {})
       }
     ),
-    /* @__PURE__ */ o(
-      w,
+    /* @__PURE__ */ jsx(
+      Drawer,
       {
-        title: d("base.layout.themeConfig.title"),
-        isOpen: i,
-        placement: c === "rtl" ? "left" : "right",
+        title: t("base.layout.themeConfig.title"),
+        isOpen: panelExpand,
+        placement: direction === "rtl" ? "left" : "right",
         width: 375,
-        onClose: t,
-        onRequestClose: t,
-        children: /* @__PURE__ */ o(h, { callBackClose: t })
+        onClose: closePanel,
+        onRequestClose: closePanel,
+        children: /* @__PURE__ */ jsx(SidePanelContent, { callBackClose: closePanel })
       }
     )
   ] });
-}, L = P(k);
+};
+const SidePanel = withHeaderItem(_SidePanel);
 export {
-  L as default
+  SidePanel as default
 };
 //# sourceMappingURL=SidePanel.js.map

package/dist/@ecme/components/template/SidePanel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../../../../../lib/@ecme/components/template/SidePanel/SidePanel.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport Drawer from '@/components/ui/Drawer'\nimport { PiGearDuotone } from 'react-icons/pi'\nimport SidePanelContent, { SidePanelContentProps } from './SidePanelContent'\nimport withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport { useThemeStore } from '@/store/themeStore'\nimport type { CommonProps } from '@/@types/common'\nimport { useTranslation } from 'react-i18next'\n\ntype SidePanelProps = SidePanelContentProps & CommonProps\n\nconst _SidePanel = (props: SidePanelProps) => {\n    const { className, ...rest } = props\n\n    const panelExpand = useThemeStore((state) => state.panelExpand)\n    const direction = useThemeStore((state) => state.direction)\n    const setPanelExpand = useThemeStore((state) => state.setPanelExpand)\n\n    const openPanel = () => {\n        setPanelExpand(true)\n    }\n\n    const closePanel = () => {\n        setPanelExpand(false)\n\n        if (document) {\n            const bodyClassList = document.body.classList\n            if (bodyClassList.contains('drawer-lock-scroll')) {\n                bodyClassList.remove('drawer-lock-scroll', 'drawer-open')\n            }\n        }\n    }\n\n    const { t } = useTranslation()\n\n    return (\n        <>\n            <div\n                className={classNames('text-2xl', className)}\n                onClick={openPanel}\n                {...rest}\n            >\n                <PiGearDuotone />\n            </div>\n            <Drawer\n                title={t('base.layout.themeConfig.title')}\n                isOpen={panelExpand}\n                placement={direction === 'rtl' ? 'left' : 'right'}\n                width={375}\n                onClose={closePanel}\n                onRequestClose={closePanel}\n            >\n                <SidePanelContent callBackClose={closePanel} />\n            </Drawer>\n        </>\n    )\n}\n\nconst SidePanel = withHeaderItem(_SidePanel)\n\nexport default SidePanel\n"],"names":["_SidePanel","props","className","rest","panelExpand","useThemeStore","state","direction","setPanelExpand","openPanel","closePanel","bodyClassList","t","useTranslation","jsxs","Fragment","jsx","classNames","PiGearDuotone","Drawer","SidePanelContent","SidePanel","withHeaderItem"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAa,CAACC,MAA0B;AAC1C,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF,GAEzBG,IAAcC,EAAc,CAACC,MAAUA,EAAM,WAAW,GACxDC,IAAYF,EAAc,CAACC,MAAUA,EAAM,SAAS,GACpDE,IAAiBH,EAAc,CAACC,MAAUA,EAAM,cAAc,GAE9DG,IAAY,MAAM;AACpB,IAAAD,EAAe,EAAI;AAAA,EACvB,GAEME,IAAa,MAAM;AAGrB,QAFAF,EAAe,EAAK,GAEhB,UAAU;AACJ,YAAAG,IAAgB,SAAS,KAAK;AAChC,MAAAA,EAAc,SAAS,oBAAoB,KAC7BA,EAAA,OAAO,sBAAsB,aAAa;AAAA,IAC5D;AAAA,EAER,GAEM,EAAE,GAAAC,EAAE,IAAIC,EAAe;AAE7B,SAEQ,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAW,YAAYf,CAAS;AAAA,QAC3C,SAASO;AAAA,QACR,GAAGN;AAAA,QAEJ,4BAACe,GAAc,CAAA,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,OAAOP,EAAE,+BAA+B;AAAA,QACxC,QAAQR;AAAA,QACR,WAAWG,MAAc,QAAQ,SAAS;AAAA,QAC1C,OAAO;AAAA,QACP,SAASG;AAAA,QACT,gBAAgBA;AAAA,QAEhB,UAAA,gBAAAM,EAACI,GAAiB,EAAA,eAAeV,EAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjD,GACJ;AAER,GAEMW,IAAYC,EAAetB,CAAU;"}
+{"version":3,"file":"SidePanel.js","sources":["../../../../../lib/@ecme/components/template/SidePanel/SidePanel.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport Drawer from '@/components/ui/Drawer'\nimport { PiGearDuotone } from 'react-icons/pi'\nimport SidePanelContent, { SidePanelContentProps } from './SidePanelContent'\nimport withHeaderItem from '@/utils/hoc/withHeaderItem'\nimport { useThemeStore } from '@/store/themeStore'\nimport type { CommonProps } from '@/@types/common'\nimport { useTranslation } from 'react-i18next'\n\ntype SidePanelProps = SidePanelContentProps & CommonProps\n\nconst _SidePanel = (props: SidePanelProps) => {\n    const { className, ...rest } = props\n\n    const panelExpand = useThemeStore((state) => state.panelExpand)\n    const direction = useThemeStore((state) => state.direction)\n    const setPanelExpand = useThemeStore((state) => state.setPanelExpand)\n\n    const openPanel = () => {\n        setPanelExpand(true)\n    }\n\n    const closePanel = () => {\n        setPanelExpand(false)\n\n        if (document) {\n            const bodyClassList = document.body.classList\n            if (bodyClassList.contains('drawer-lock-scroll')) {\n                bodyClassList.remove('drawer-lock-scroll', 'drawer-open')\n            }\n        }\n    }\n\n    const { t } = useTranslation()\n\n    return (\n        <>\n            <div\n                className={classNames('text-2xl', className)}\n                onClick={openPanel}\n                {...rest}\n            >\n                <PiGearDuotone />\n            </div>\n            <Drawer\n                title={t('base.layout.themeConfig.title')}\n                isOpen={panelExpand}\n                placement={direction === 'rtl' ? 'left' : 'right'}\n                width={375}\n                onClose={closePanel}\n                onRequestClose={closePanel}\n            >\n                <SidePanelContent callBackClose={closePanel} />\n            </Drawer>\n        </>\n    )\n}\n\nconst SidePanel = withHeaderItem(_SidePanel)\n\nexport default SidePanel\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,aAAa,CAAC,UAA0B;AAC1C,QAAM,EAAE,WAAW,GAAG,KAAA,IAAS;AAE/B,QAAM,cAAc,cAAc,CAAC,UAAU,MAAM,WAAW;AAC9D,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,YAAY,MAAM;AACpB,mBAAe,IAAI;AAAA,EACvB;AAEA,QAAM,aAAa,MAAM;AACrB,mBAAe,KAAK;AAEpB,QAAI,UAAU;AACJ,YAAA,gBAAgB,SAAS,KAAK;AAChC,UAAA,cAAc,SAAS,oBAAoB,GAAG;AAChC,sBAAA,OAAO,sBAAsB,aAAa;AAAA,MAAA;AAAA,IAC5D;AAAA,EAER;AAEM,QAAA,EAAE,EAAE,IAAI,eAAe;AAE7B,SAEQ,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,WAAW,YAAY,SAAS;AAAA,QAC3C,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ,8BAAC,eAAc,CAAA,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,OAAO,EAAE,+BAA+B;AAAA,QACxC,QAAQ;AAAA,QACR,WAAW,cAAc,QAAQ,SAAS;AAAA,QAC1C,OAAO;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAEhB,UAAA,oBAAC,kBAAiB,EAAA,eAAe,WAAY,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjD,GACJ;AAER;AAEM,MAAA,YAAY,eAAe,UAAU;"}

package/dist/@ecme/components/template/SidePanel/SidePanelContent.js

@@ -1,8 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "../ThemeConfigurator/index.js";
-import t from "../ThemeConfigurator/ThemeConfigurator.js";
-const i = (o) => /* @__PURE__ */ r(t, { ...o });
+import ThemeConfigurator from "../ThemeConfigurator/ThemeConfigurator.js";
+const SidePanelContent = (props) => {
+  return /* @__PURE__ */ jsx(ThemeConfigurator, { ...props });
+};
 export {
-  i as default
+  SidePanelContent as default
 };
 //# sourceMappingURL=SidePanelContent.js.map

package/dist/@ecme/components/template/SidePanel/SidePanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContent.js","sources":["../../../../../lib/@ecme/components/template/SidePanel/SidePanelContent.tsx"],"sourcesContent":["import ThemeConfigurator from '@/components/template/ThemeConfigurator'\nimport type { ThemeConfiguratorProps } from '@/components/template/ThemeConfigurator'\n\nexport type SidePanelContentProps = ThemeConfiguratorProps\n\nconst SidePanelContent = (props: SidePanelContentProps) => {\n    return <ThemeConfigurator {...props} />\n}\n\nexport default SidePanelContent\n"],"names":["SidePanelContent","props","jsx","ThemeConfigurator"],"mappings":";;;AAKM,MAAAA,IAAmB,CAACC,MACf,gBAAAC,EAACC,GAAmB,EAAA,GAAGF,EAAO,CAAA;"}
+{"version":3,"file":"SidePanelContent.js","sources":["../../../../../lib/@ecme/components/template/SidePanel/SidePanelContent.tsx"],"sourcesContent":["import ThemeConfigurator from '@/components/template/ThemeConfigurator'\nimport type { ThemeConfiguratorProps } from '@/components/template/ThemeConfigurator'\n\nexport type SidePanelContentProps = ThemeConfiguratorProps\n\nconst SidePanelContent = (props: SidePanelContentProps) => {\n    return <ThemeConfigurator {...props} />\n}\n\nexport default SidePanelContent\n"],"names":[],"mappings":";;;AAKM,MAAA,mBAAmB,CAAC,UAAiC;AAChD,SAAA,oBAAC,mBAAmB,EAAA,GAAG,MAAO,CAAA;AACzC;"}

package/dist/@ecme/components/template/SidePanel/index.js

@@ -1,5 +1,5 @@
-import a from "./SidePanel.js";
+import SidePanel from "./SidePanel.js";
 export {
-  a as default
+  SidePanel as default
 };
 //# sourceMappingURL=index.js.map

package/dist/@ecme/components/template/StackedSideNav/StackedSideNav.js

@@ -1,77 +1,99 @@
-import { jsx as i, Fragment as T, jsxs as k } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { SPLITTED_SIDE_NAV_MINI_WIDTH as A, STACKED_SIDE_NAV_SECONDARY_WIDTH as S, DIR_LTR as R, DIR_RTL as _ } from "../../../constants/theme.constant.js";
-import C from "./StackedSideNavMini.js";
-import I from "./StackedSideNavSecondary.js";
-import E from "../../../utils/hooks/useResponsive.js";
-import { useThemeStore as v } from "../../../store/themeStore.js";
-import { useRouteKeyStore as $ } from "../../../store/routeKeyStore.js";
-import { useSessionUser as x } from "../../../store/authStore.js";
-import L from "../../../configs/navigation.config/index.js";
-import M from "../../../configs/app.config.js";
-import f from "lodash/isEmpty";
-import { useTranslation as V } from "../../../utils/hooks/useTranslation.js";
-const j = {
-  width: A
-}, J = ({
-  translationSetup: n = M.activeNavTranslation
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SPLITTED_SIDE_NAV_MINI_WIDTH, STACKED_SIDE_NAV_SECONDARY_WIDTH, DIR_LTR, DIR_RTL } from "../../../constants/theme.constant.js";
+import StackedSideNavMini from "./StackedSideNavMini.js";
+import StackedSideNavSecondary from "./StackedSideNavSecondary.js";
+import useResponsive from "../../../utils/hooks/useResponsive.js";
+import { useThemeStore } from "../../../store/themeStore.js";
+import { useRouteKeyStore } from "../../../store/routeKeyStore.js";
+import { useSessionUser } from "../../../store/authStore.js";
+import navigationConfig from "../../../configs/navigation.config/index.js";
+import appConfig from "../../../configs/app.config.js";
+import isEmpty from "lodash/isEmpty";
+import { useTranslation } from "../../../utils/hooks/useTranslation.js";
+const stackedSideNavDefaultStyle = {
+  width: SPLITTED_SIDE_NAV_MINI_WIDTH
+};
+const StackedSideNav = ({
+  translationSetup = appConfig.activeNavTranslation
 }) => {
-  const { t: a } = V(!n), [t, c] = y({}), [p, d] = y([]), s = v((e) => e.mode), o = v((e) => e.direction), m = $((e) => e.currentRouteKey), l = x((e) => e.user.authority), { larger: h } = E(), u = (e, r) => `${e}-${r}`, N = (e) => {
-    c(e);
-  }, g = () => {
-    c({}), d([]);
-  }, D = (e) => {
-    d(e);
-  }, K = () => {
-    let e = {};
-    const r = `${-S}px`;
-    return o === R && (e = { marginLeft: r }), o === _ && (e = { marginRight: r }), e;
+  const { t } = useTranslation(!translationSetup);
+  const [selectedMenu, setSelectedMenu] = useState({});
+  const [activeKeys, setActiveKeys] = useState([]);
+  const mode = useThemeStore((state) => state.mode);
+  const direction = useThemeStore((state) => state.direction);
+  const currentRouteKey = useRouteKeyStore((state) => state.currentRouteKey);
+  const userAuthority = useSessionUser((state) => state.user.authority);
+  const { larger } = useResponsive();
+  const navColor = (navType, mode2) => {
+    return `${navType}-${mode2}`;
+  };
+  const handleChange = (selected) => {
+    setSelectedMenu(selected);
+  };
+  const handleCollpase = () => {
+    setSelectedMenu({});
+    setActiveKeys([]);
+  };
+  const handleSetActiveKey = (key) => {
+    setActiveKeys(key);
+  };
+  const stackedSideNavSecondaryDirStyle = () => {
+    let style = {};
+    const marginValue = `${-STACKED_SIDE_NAV_SECONDARY_WIDTH}px`;
+    if (direction === DIR_LTR) {
+      style = { marginLeft: marginValue };
+    }
+    if (direction === DIR_RTL) {
+      style = { marginRight: marginValue };
+    }
+    return style;
   };
-  return /* @__PURE__ */ i(T, { children: h.md && /* @__PURE__ */ k("div", { className: "stacked-side-nav", children: [
-    /* @__PURE__ */ i(
-      C,
+  return /* @__PURE__ */ jsx(Fragment, { children: larger.md && /* @__PURE__ */ jsxs("div", { className: `stacked-side-nav`, children: [
+    /* @__PURE__ */ jsx(
+      StackedSideNavMini,
       {
-        className: `stacked-side-nav-mini ${u(
+        className: `stacked-side-nav-mini ${navColor(
           "stacked-side-nav-mini",
-          s
+          mode
         )}`,
-        style: j,
-        routeKey: m,
-        activeKeys: p,
-        mode: s,
-        direction: o,
-        navigationTree: L,
-        userAuthority: l || [],
-        selectedMenu: t,
-        t: a,
-        onChange: N,
-        onSetActiveKey: D
+        style: stackedSideNavDefaultStyle,
+        routeKey: currentRouteKey,
+        activeKeys,
+        mode,
+        direction,
+        navigationTree: navigationConfig,
+        userAuthority: userAuthority || [],
+        selectedMenu,
+        t,
+        onChange: handleChange,
+        onSetActiveKey: handleSetActiveKey
       }
     ),
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: `stacked-side-nav-secondary ${u(
+        className: `stacked-side-nav-secondary ${navColor(
           "stacked-side-nav-secondary",
-          s
+          mode
         )}`,
         style: {
-          width: S,
-          ...f(t) ? K() : {}
+          width: STACKED_SIDE_NAV_SECONDARY_WIDTH,
+          ...isEmpty(selectedMenu) ? stackedSideNavSecondaryDirStyle() : {}
         },
-        children: !f(t) && /* @__PURE__ */ i(
-          I,
+        children: !isEmpty(selectedMenu) && /* @__PURE__ */ jsx(
+          StackedSideNavSecondary,
           {
-            title: a(
-              t.translateKey,
-              t.title
+            title: t(
+              selectedMenu.translateKey,
+              selectedMenu.title
             ),
-            menu: t.menu,
-            routeKey: m,
-            direction: o,
-            translationSetup: n,
-            userAuthority: l || [],
-            onCollapse: g
+            menu: selectedMenu.menu,
+            routeKey: currentRouteKey,
+            direction,
+            translationSetup,
+            userAuthority: userAuthority || [],
+            onCollapse: handleCollpase
           }
         )
       }
@@ -79,6 +101,6 @@ const j = {
   ] }) });
 };
 export {
-  J as default
+  StackedSideNav as default
 };
 //# sourceMappingURL=StackedSideNav.js.map