adminforth 1.0.66 → 1.0.68

package/dist/index.js

@@ -52,6 +52,7 @@ class AdminForth {
         ;
     }
     validateConfig() {
+        var _b;
         if (this.config.rootUser) {
             if (!this.config.rootUser.username) {
                 throw new Error('rootUser.username is required');
@@ -83,11 +84,17 @@ class AdminForth {
         if (!this.config.baseUrl) {
             this.config.baseUrl = '';
         }
-        if (!this.config.brandName) {
-            this.config.brandName = 'AdminForth';
+        if (!((_b = this.config) === null || _b === void 0 ? void 0 : _b.customization.brandName)) {
+            this.config.customization.brandName = 'AdminForth';
         }
-        if (!this.config.datesFormat) {
-            this.config.datesFormat = 'MMM D, YYYY HH:mm:ss';
+        if (this.config.customization.brandLogo) {
+            if (!this.config.customization.brandLogo.startsWith('@@/')) {
+                errors.push(`Brand logo must start with @@ and be placed in custom directory`);
+            }
+            // todo check file exist
+        }
+        if (!this.config.customization.datesFormat) {
+            this.config.customization.datesFormat = 'MMM D, YYYY HH:mm:ss';
         }
         if (this.config.resources) {
             this.config.resources.forEach((res) => {
@@ -399,10 +406,10 @@ class AdminForth {
                 const resource = this.config.resources.find((res) => res.resourceId === this.config.auth.resourceId);
                 const usernameColumn = resource.columns.find((col) => col.name === usernameField);
                 return {
-                    brandName: this.config.brandName,
+                    brandName: this.config.customization.brandName,
                     usernameFieldName: usernameColumn.label,
                     loginBackgroundImage: this.config.auth.loginBackgroundImage,
-                    title: (_e = this.config) === null || _e === void 0 ? void 0 : _e.title,
+                    title: (_e = this.config.customization) === null || _e === void 0 ? void 0 : _e.title,
                 };
             }),
         });
@@ -446,12 +453,13 @@ class AdminForth {
                     })),
                     menu: this.config.menu,
                     config: {
-                        brandName: this.config.brandName,
-                        datesFormat: this.config.datesFormat,
+                        brandName: this.config.customization.brandName,
+                        brandLogo: this.config.customization.brandLogo,
+                        datesFormat: this.config.customization.datesFormat,
                         deleteConfirmation: this.config.deleteConfirmation,
                         auth: this.config.auth,
                         usernameField: this.config.auth.usernameField,
-                        title: (_g = this.config) === null || _g === void 0 ? void 0 : _g.title,
+                        title: (_g = this.config.customization) === null || _g === void 0 ? void 0 : _g.title,
                     },
                     adminUser,
                     version: ADMINFORTH_VERSION,
@@ -563,9 +571,6 @@ class AdminForth {
                         item[col.name] = targetDataMap[item[col.name]];
                     });
                 })));
-                data.data.forEach((item) => {
-                    item._label = resource.itemLabel(item);
-                });
                 for (const hook of getFunctionList((_o = (_m = resource.hooks) === null || _m === void 0 ? void 0 : _m[source]) === null || _o === void 0 ? void 0 : _o.afterDatasourceResponse)) {
                     const resp = yield hook({ resource, response: data.data, adminUser });
                     if (!resp || (!resp.ok && !resp.error)) {
@@ -583,6 +588,9 @@ class AdminForth {
                         }
                     });
                 });
+                data.data.forEach((item) => {
+                    item._label = resource.itemLabel(item);
+                });
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
         });

package/dist/modules/codeInjector.js

@@ -87,6 +87,7 @@ class CodeInjector {
             let routerComponents = '';
             const collectAssetsFromMenu = (menu) => {
                 menu.forEach((item) => {
+                    var _a, _b, _c, _d;
                     if (item.icon) {
                         icons.push(item.icon);
                     }
@@ -97,6 +98,7 @@ class CodeInjector {
               path: '${item.path}',
               name: '${item.path}',
               component: () => import('${item.component}'),
+              meta: { title: '${(_a = item === null || item === void 0 ? void 0 : item.meta) === null || _a === void 0 ? void 0 : _a.title}'}
             },\n`;
                             }
                             else {
@@ -104,6 +106,7 @@ class CodeInjector {
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
+                meta: { title: '${(_b = item === null || item === void 0 ? void 0 : item.meta) === null || _b === void 0 ? void 0 : _b.title}'}
               },\n`;
                                 const componentName = `${getComponentNameFromPath(item.component)}`;
                                 routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -115,6 +118,7 @@ class CodeInjector {
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
+                meta: { title: '${(_c = item === null || item === void 0 ? void 0 : item.meta) === null || _c === void 0 ? void 0 : _c.title}'}
               },\n`;
                                 const componentName = `${getComponentNameFromPath(item.component)}`;
                                 routerComponents += `import ${componentName} from '${item.component}';\n`;
@@ -123,7 +127,8 @@ class CodeInjector {
                                 routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
-                component: () => import('${item.component}'),
+                component: () => import('${item.component}'),}
+                meta: { title: '${(_d = item === null || item === void 0 ? void 0 : item.meta) === null || _d === void 0 ? void 0 : _d.title}'
               },\n`;
                             }
                         }
@@ -214,7 +219,7 @@ class CodeInjector {
                 const componentName = getComponentNameFromPath(filePath);
                 this.allComponentNames[filePath] = componentName;
             });
-            console.log('🔧 Injecting code into Vue sources...', this.allComponentNames);
+            // console.log('🔧 Injecting code into Vue sources...', this.allComponentNames);
             let customComponentsImports = '';
             for (const [targetPath, component] of Object.entries(this.allComponentNames)) {
                 customComponentsImports += `import ${component} from '${targetPath}';\n`;
@@ -258,6 +263,11 @@ class CodeInjector {
             const routerVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'router', 'index.ts');
             let routerVueContent = yield fs.promises.readFile(routerVuePath, 'utf-8');
             routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES IMPORTS */', routerComponents);
+            // inject title to index.html
+            const indexHtmlPath = path.join(CodeInjector.SPA_TMP_PATH, 'index.html');
+            let indexHtmlContent = yield fs.promises.readFile(indexHtmlPath, 'utf-8');
+            indexHtmlContent = indexHtmlContent.replace('/* IMPORTANT:ADMINFORTH TITLE */', `${this.adminforth.config.customization.title || 'AdminForth'}`);
+            yield fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
             /* generate custom routes */
             const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
             let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });

package/dist/servers/express.js

@@ -126,7 +126,7 @@ class ExpressServer {
                     fileExists = false;
                 }
                 if (!fileExists) {
-                    res.status(500).send(respondNoServer(`${this.adminforth.config.brandName} is still warming up`, 'Please wait a moment...'));
+                    res.status(500).send(respondNoServer(`${this.adminforth.config.customization.brandName} is still warming up`, 'Please wait a moment...'));
                     return;
                 }
                 res.sendFile(fullPath, {

package/dist/spa/index.html

@@ -16,8 +16,8 @@
   </script> -->
 
   </head>
-  <body class=" ">
-    <div id="app" class="min-h-screen bg-html-bg dark:bg-gray-800"></div>
+  <body>
+    <div id="app" class="min-h-screen dark:bg-gray-800"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package/dist/spa/package-lock.json

@@ -9,17 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
-        "@unhead/vue": "^1.9.12",
-        "@vueuse/core": "^10.10.0",
         "dayjs": "^1.11.11",
-        "debounce": "^2.1.0",
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
-        "unhead": "^1.9.12",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0",
-        "vue-slider-component": "^4.1.0-beta.7"
+        "vue-router": "^4.3.0"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
@@ -955,11 +950,6 @@
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
@@ -1151,58 +1141,6 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
-    "node_modules/@unhead/dom": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.12.tgz",
-      "integrity": "sha512-3MY1TbZmEjGNZapi3wvJW0vWNS2CLKHt7/m57sScDHCNvNBe1mTwrIOhtZFDgAndhml2EVQ68RMa0Vhum/M+cw==",
-      "dependencies": {
-        "@unhead/schema": "1.9.12",
-        "@unhead/shared": "1.9.12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
-    "node_modules/@unhead/schema": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.12.tgz",
-      "integrity": "sha512-ue2FKyIZKsuZDpWJBMlBGwMm4s+vFeU3NUWsNt8Z+2JkOUIqO/VG43LxNgY1M595bOS71Gdxk+G9VtzfKJ5uEA==",
-      "dependencies": {
-        "hookable": "^5.5.3",
-        "zhead": "^2.2.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
-    "node_modules/@unhead/shared": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.12.tgz",
-      "integrity": "sha512-72wlLXG3FP3sXUrwd42Uv8jYpHSg4R6IFJcsl+QisRjKM89JnjOFSw1DqWO4IOftW5xOxS4J5v7SQyJ4NJo7Bw==",
-      "dependencies": {
-        "@unhead/schema": "1.9.12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
-    "node_modules/@unhead/vue": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.9.12.tgz",
-      "integrity": "sha512-keE4EuswgzCqVU7zmZprU+ToMvNWc3s8NoLreH5AtJd2u0FgBygD8sxRVyEnZw1KwFYOJ2C7yD2TChSKZioPGQ==",
-      "dependencies": {
-        "@unhead/schema": "1.9.12",
-        "@unhead/shared": "1.9.12",
-        "hookable": "^5.5.3",
-        "unhead": "1.9.12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      },
-      "peerDependencies": {
-        "vue": ">=2.7 || >=3"
-      }
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -1392,89 +1330,6 @@
       "integrity": "sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==",
       "dev": true
     },
-    "node_modules/@vueuse/core": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
-      "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.10.0",
-        "@vueuse/shared": "10.10.0",
-        "vue-demi": ">=0.14.7"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
-      "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
-      "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
-      "dependencies": {
-        "vue-demi": ">=0.14.7"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1861,17 +1716,6 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
-    "node_modules/debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.1.0.tgz",
-      "integrity": "sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2525,11 +2369,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hookable": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
-      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
-    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3973,20 +3812,6 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
-    "node_modules/unhead": {
-      "version": "1.9.12",
-      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.12.tgz",
-      "integrity": "sha512-s6VxcTV45hy8c/IioKQOonFnAO+kBOSpgDfqEHhnU0YVSQYaRPEp9pzW1qSPf0lx+bg9RKeOQyNNbSGGUP26aQ==",
-      "dependencies": {
-        "@unhead/dom": "1.9.12",
-        "@unhead/schema": "1.9.12",
-        "@unhead/shared": "1.9.12",
-        "hookable": "^5.5.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
@@ -4145,11 +3970,6 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-slider-component": {
-      "version": "4.1.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
-      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
-    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
@@ -4333,14 +4153,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zhead": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
-      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
-      "funding": {
-        "url": "https://github.com/sponsors/harlan-zw"
-      }
     }
   }
 }

package/dist/spa/package.json

@@ -13,17 +13,12 @@
   },
   "dependencies": {
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
-    "@unhead/vue": "^1.9.12",
-    "@vueuse/core": "^10.10.0",
     "dayjs": "^1.11.11",
-    "debounce": "^2.1.0",
     "flowbite": "^2.3.0",
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
-    "unhead": "^1.9.12",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0",
-    "vue-slider-component": "^4.1.0-beta.7"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",

package/dist/spa/spa/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>/* IMPORTANT:ADMINFORTH TITLE */</title>
 <!--     
     <script>
       // On page load or when changing themes, best to add inline in `head` to avoid FOUC

package/dist/spa/spa/package-lock.json

@@ -36,7 +36,7 @@
         "sass": "^1.77.2",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.4.0",
-        "vite": "^5.2.12",
+        "vite": "^5.2.13",
         "vue-tsc": "^2.0.11"
       }
     },
@@ -4033,9 +4033,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "5.2.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
-      "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
+      "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",

package/dist/spa/spa/package.json

@@ -40,7 +40,7 @@
     "sass": "^1.77.2",
     "tailwindcss": "^3.4.3",
     "typescript": "~5.4.0",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vue-tsc": "^2.0.11"
   }
 }

package/dist/spa/spa/src/App.vue

@@ -5,7 +5,8 @@
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
         <div class="flex items-center justify-start rtl:justify-end">
-          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
+          <button @click="sideBarOpen = !sideBarOpen"
+           type="button" class="inline-flex items-center p-2 text-sm  rounded-lg sm:hidden hover:bg-nav-menu-bg-hover focus:outline-none focus:ring-2 focus:ring-nav-menu-devider dark:text-nav-menu-icons dark:hover:bg-nav-menu-bg-hover dark:focus:ring-nav-menu-devider">
               <span class="sr-only">Open sidebar</span>
               <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
@@ -58,15 +59,18 @@
 
     v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady"
 
-    id="logo-sidebar" class="fixed border-none top-0 left-0 z-40 w-64 h-screen  transition-transform -translate-x-full bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
+    id="logo-sidebar" class="fixed border-none top-0 left-0 z-50 w-64 h-screen  transition-transform bg-nav-menu-bg border-r border-  sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" 
+    :class="{ '-translate-x-full': !sideBarOpen, 'transform-none': sideBarOpen }"
+    aria-label="Sidebar"
+  >
     <div class="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800">
 
       <div class="flex ms-2 md:me-24  m-4  ">
-            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
-            <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
-              {{ coreStore.config?.brandName }}
-            </span>
-          </div>
+        <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" alt="logo" class="w-8 h-8 mr-2" />
+        <span class="self-center text-header-text-size font-semibold sm:text-header-text-size whitespace-nowrap dark:text-header-text text-header-logo-color">
+          {{ coreStore.config?.brandName }}
+        </span>
+      </div>
         <ul class="space-y-2 font-medium">
           <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
             <div v-if="item.type === 'divider'" class="border-t border-nav-menu-devider dark:border-gray-700"></div>
@@ -101,7 +105,8 @@
         </ul>
     </div>
   </aside>
-    
+  
+
   <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn && routerIsReady && loginRedirectCheckIsReady">
     <div class="p-0 dark:border-gray-700 mt-14">
         <RouterView/>     
@@ -119,6 +124,11 @@
   </div>
   <AcceptModal />
 
+  <div v-if="sideBarOpen" 
+  @click="sideBarOpen = false"
+  
+  drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"></div>
+
 </template>
 
 <style scoped>
@@ -141,14 +151,42 @@ import { createHead } from 'unhead'
 const coreStore = useCoreStore();
 
 
-createHead()
+const splitAtLast = (str: string, separator: string) => {
+  const index = str.lastIndexOf(separator);
+  return [str.slice(0, index), str.slice(index + 1)];
+}
+
+const loadFile = (file: string) => {
+  let path;
+  let baseUrl = '';
+  if (file.startsWith('@/')) {
+    path = file.replace('@/', '');
+    baseUrl = new URL(`./${path}`, import.meta.url).href;
+  } else if (file.startsWith('@@/')) {
+    path = file.replace('@@/', '');
+    baseUrl = new URL(`./custom/${path}`, import.meta.url).href;
+  } else {
+    baseUrl = new URL(`./${file}`, import.meta.url).href;
+  }
+  return baseUrl;
+}
 
 
+createHead()
 
 
+const sideBarOpen = ref(false);
+
 
 
 const route = useRoute();
+watch(route, () => {
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  useHead({
+  title: title.value,
+})
+});
+
 const router = useRouter();
 const title = ref('');
 //create a ref to store the opened menu items with ts type;
@@ -197,17 +235,7 @@ onMounted(async () => {
     }, 100); 
   await coreStore.fetchMenuAndResource();
   loginRedirectCheckIsReady.value = true;
-  title.value = coreStore.config?.title || 'AdminForth';
-  useHead({
-  title: title.value,
-  link: [
-    {
-      rel: 'icon',
-      href: coreStore.config.favicon || '/favicon.ico',
-    },
-  ],
-  
-})
+ 
 coreStore.menu.forEach((item, i) => {
   if (item.open) {
     opened.value.push(i);

package/dist/spa/spa/src/assets/logo.svg

@@ -1 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_8)">
+<path d="M8.034 6.006V13H6.097V12.194C5.59433 12.8007 4.86633 13.104 3.913 13.104C3.25433 13.104 2.65633 12.9567 2.119 12.662C1.59033 12.3673 1.17433 11.947 0.871 11.401C0.567667 10.855 0.416 10.2223 0.416 9.503C0.416 8.78367 0.567667 8.151 0.871 7.605C1.17433 7.059 1.59033 6.63867 2.119 6.344C2.65633 6.04933 3.25433 5.902 3.913 5.902C4.80567 5.902 5.50333 6.18367 6.006 6.747V6.006H8.034ZM4.264 11.44C4.77533 11.44 5.2 11.2667 5.538 10.92C5.876 10.5647 6.045 10.0923 6.045 9.503C6.045 8.91367 5.876 8.44567 5.538 8.099C5.2 7.74367 4.77533 7.566 4.264 7.566C3.744 7.566 3.315 7.74367 2.977 8.099C2.639 8.44567 2.47 8.91367 2.47 9.503C2.47 10.0923 2.639 10.5647 2.977 10.92C3.315 11.2667 3.744 11.44 4.264 11.44Z" fill="url(#paint0_linear_1_8)"/>
+<path d="M13.317 5.538C12.589 5.538 12.0387 5.69833 11.666 6.019C11.2933 6.331 11.107 6.80333 11.107 7.436V7.995H14.851V9.685H11.107V13H9.001V7.449C9.001 6.279 9.365 5.369 10.093 4.719C10.8297 4.069 11.8567 3.744 13.174 3.744C13.694 3.744 14.1837 3.80033 14.643 3.913C15.1023 4.017 15.501 4.173 15.839 4.381L15.189 6.045C14.669 5.707 14.045 5.538 13.317 5.538Z" fill="url(#paint1_linear_1_8)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1_8" x1="1.5" y1="6.93333" x2="7.31883" y2="11.8926" gradientUnits="userSpaceOnUse">
+<stop stop-color="#656E7A"/>
+<stop offset="1" stop-color="#99A6B8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1_8" x1="12.5" y1="3.73333" x2="9.68642" y2="12.7016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48C5FF"/>
+<stop offset="1" stop-color="#A1E1FF"/>
+</linearGradient>
+<clipPath id="clip0_1_8">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/spa/spa/src/components/ShowTableItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <td class="px-6 py-4 whitespace-nowrap">
+      {{ column.label }}
+  </td>
+  <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
+    <ValueRenderer :column="column" :row="row" />
+  </td>
+</template>
+
+<script setup>
+import ValueRenderer from '@/components/ValueRenderer.vue';
+
+defineProps(['column', 'row']);
+</script>