adminforth 1.0.80 → 1.0.82

package/dist/index.js

@@ -76,6 +76,13 @@ class AdminForth {
         if (!this.config.customization.customComponentsDir) {
             this.config.customization.customComponentsDir = './custom';
         }
+        try {
+            // check customComponentsDir exists
+            fs.accessSync(this.config.customization.customComponentsDir, fs.constants.R_OK);
+        }
+        catch (e) {
+            this.config.customization.customComponentsDir = undefined;
+        }
         if (this.config.auth) {
             if (!this.config.auth.resourceId) {
                 throw new Error('No config.auth.resourceId defined');
@@ -852,6 +859,12 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
                 }
+                if (!record) {
+                    return { error: `Record with ${body['primaryKey']} not found` };
+                }
+                if (resource.options.allowedActions.delete === false) {
+                    return { error: `Resource '${resource.resourceId}' does not allow delete action` };
+                }
                 // execute hook if needed
                 for (const hook of getFunctionList((_10 = (_9 = resource.hooks) === null || _9 === void 0 ? void 0 : _9.delete) === null || _10 === void 0 ? void 0 : _10.beforeSave)) {
                     const resp = yield hook({ resource, record, adminUser });

package/dist/modules/codeInjector.js

@@ -17,6 +17,7 @@ import path from 'path';
 import { promisify } from 'util';
 import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 import { getComponentNameFromPath } from './utils.js';
+import { styles } from '../styles.js';
 let TMP_DIR;
 try {
     TMP_DIR = os.tmpdir();
@@ -290,6 +291,12 @@ class CodeInjector {
                 tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
                 yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
             }
+            else {
+                let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
+                let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
+                tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', styles());
+                yield fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
+            }
             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);
@@ -394,12 +401,7 @@ class CodeInjector {
     watchCustomComponentsForCopy(_a) {
         return __awaiter(this, arguments, void 0, function* ({ verbose }) {
             const customComponentsDir = this.adminforth.config.customization.customComponentsDir;
-            // check dir exists
-            try {
-                yield fs.promises.access(customComponentsDir, fs.constants.F_OK);
-            }
-            catch (e) {
-                console.log(`Custom components dir "${customComponentsDir}" does not exist, feel free to create it place custom assets and Vue files there`);
+            if (!customComponentsDir) {
                 return;
             }
             // check if folder exists

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

@@ -63,7 +63,7 @@
     :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="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800 border-r">
 
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />

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

@@ -121,9 +121,6 @@
                         <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
                         <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
                     </button>
-
-
-
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
 
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
@@ -197,7 +194,11 @@ const columnError = (column) => {
       for (let i = 0; i < validationArray.length; i++) {
         if (validationArray[i].regExp) {
           const regExp = new RegExp(validationArray[i].regExp);
-          if (!regExp.test(currentValues.value[column.name])) {
+          let value = currentValues.value[column.name];
+          if (value === undefined || value === null) {
+            value = '';
+          }
+          if (!regExp.test(value)) {
             return validationArray[i].message;
           }
         }

package/dist/spa/spa/src/stores/core.ts

@@ -85,6 +85,7 @@ export const useCoreStore = defineStore('core', () => {
     } else {
       resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
+      resourceOptions.value = res.resource.options;
     }
   }
 

package/dist/spa/spa/src/utils.ts

@@ -2,6 +2,7 @@ import { onMounted, ref, resolveComponent } from 'vue';
 import type {  CoreConfig } from './spa_types/core';
 
 import router from "./router";
+import { useRouter } from 'vue-router';
 import { useCoreStore } from './stores/core';
 
 export async function callApi({path, method, body=undefined} ) {
@@ -80,3 +81,14 @@ export function checkEmptyValues(value: any, viewType:'show' | 'list' ) {
   }
   return value;
 }
+
+export function checkAcessByAllowedActions(allowedActions:any, action:any ) {
+  if (!allowedActions) {
+    console.warn('allowedActions not set');
+    return;
+  }
+  if(allowedActions[action] === false) {
+    console.warn(`Action ${action} is not allowed`);
+    router.back();
+  }
+}

package/dist/spa/spa/src/views/CreateView.vue

@@ -23,6 +23,7 @@
     </BreadcrumbsWithButtons>
 
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
+
     
     <ResourceForm 
       v-else
@@ -35,6 +36,7 @@
     >
     </ResourceForm>
 
+
   </div>
 </template>
 
@@ -45,11 +47,12 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+
 const isValid = ref(false);
 const validating = ref(false);
 
@@ -81,6 +84,7 @@ onMounted(async () => {
       return acc;
     }, {});
   loading.value = false;
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'create');
 });
 
 async function saveRecord() {

package/dist/spa/spa/src/views/EditView.vue

@@ -41,7 +41,7 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi, getCustomComponent } from '@/utils';
+import { callAdminForthApi, getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -79,6 +79,7 @@ const editableRecord = computed(() => {
 })
 
 onMounted(async () => {
+
   loading.value = true;
 
   await coreStore.fetchResourceFull({
@@ -88,6 +89,7 @@ onMounted(async () => {
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
 
   editComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.edit) {

package/dist/spa/spa/src/views/ListView.vue

@@ -65,7 +65,7 @@
     </BreadcrumbsWithButtons>
 
     <!-- table -->
-    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	  rounded-default">
+    <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden  rounded-default">
 
 
       <!-- skelet loader -->
@@ -208,6 +208,7 @@
           <td class=" items-center px-6 py-4">
             <div class="flex">
             <RouterLink
+              v-if="allowedActions.show"
               :to="{ name: 'resource-show', params: { resourceId: $route.params.resourceId, primaryKey: row._primaryKeyValue } }"
               class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
               :data-tooltip-target="`tooltip-show-${rowI}`"

package/dist/spa/spa/src/views/ShowView.vue

@@ -8,7 +8,7 @@
         Edit
       </RouterLink>
 
-      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
+      <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="showDeleteModal"
         class="flex items-center py-1 px-3 mb-2 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconTrashBinSolid class="w-4 h-4" />
@@ -83,20 +83,26 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import { useCoreStore } from '@/stores/core';
-import { getCustomComponent } from '@/utils';
+import { useModalStore } from '@/stores/modal';
+import { getCustomComponent,checkAcessByAllowedActions } from '@/utils';
 import { IconPenSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
 import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute,useRouter } from 'vue-router';
+import {callAdminForthApi} from '@/utils';
 
 
 const item = ref(null);
 const route = useRoute();
+const router = useRouter();
 const loading = ref(false);
 let showComponentsPerColumn = {};
 let showRowComponentsPerColumn = {};
 
+console.log(route.params,'showWiev');
+
 
 const coreStore = useCoreStore();
+const modalStore = useModalStore();
 
 onMounted(async () => {
   loading.value = true;
@@ -107,6 +113,8 @@ onMounted(async () => {
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
   });
+  checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
+
   showComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
       if (column.component?.show) {
           acc[column.name] = getCustomComponent(column.component.show);
@@ -123,4 +131,40 @@ onMounted(async () => {
   loading.value = false;
 });
 
+function showDeleteModal(row) {
+  if (!coreStore.config?.deleteConfirmation) {
+    return deleteRecord(row);
+  }
+  modalStore.setModalContent({
+    content: 'Are you sure you want to delete this item?',
+    acceptText: 'Delete',
+    cancelText: 'Cancel',
+  });
+  modalStore.setOnAcceptFunction(() => {
+    return deleteRecord(row)
+  })
+  modalStore.togleModal();
+  
+
+}
+
+async function deleteRecord(row) {
+  try{
+    await callAdminForthApi({
+      path: '/delete_record',
+      method: 'POST',
+      body: {
+        resourceId: route.params.resourceId,
+        primaryKey: route.params.primaryKey,
+        recordId: route.params.primaryKey
+      }
+    });
+    router.push({ name: 'resource-list', params: { resourceId: route.params.resourceId } });
+  } catch (error) {
+    console.log(error);
+  }
+
+  modalStore.resetmodalState()
+}
+
 </script>

package/documentation/docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'AdminForth',
-  tagline: 'AdminForth Open-Source Vue-driven Next-Gen Admin Panel',
+  tagline: 'OpenSource Dashboard on Tailwind UI extendable with Vue3 ',
   favicon: 'img/favicon.png',
 
   // Set the production url of your site here
@@ -16,7 +16,7 @@ const config: Config = {
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
   organizationName: 'devforth', // Usually your GitHub org/user name.
-  projectName: 'adminforth', // Usually your repo name.
+  projectName: 'devforth.github.io', // Usually your repo name.
 
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
@@ -58,7 +58,7 @@ const config: Config = {
     [
       "docusaurus-plugin-typedoc",
       {
-        entryPoints: "../index.ts",
+        entryPoints: ["../types/AdminForthConfig.ts"],
         plugin: ["./typedoc-plugin.mjs"],
         readme: "none",
         indexFormat: "table",
@@ -96,7 +96,7 @@ const config: Config = {
           position: 'left',
           label: 'API',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        // {to: '/blog', label: 'Blog', position: 'left'},
         {
           href: 'https://github.com/devforth/adminforth',
           label: 'GitHub',
@@ -112,45 +112,53 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro',
+              to: '/docs/Getting%20Started',
             },
           ],
         },
+        // {
+        //   title: 'Community',
+        //   items: [
+        //     {
+        //       label: 'Stack Overflow',
+        //       href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+        //     },
+        //     {
+        //       label: 'Discord',
+        //       href: 'https://discordapp.com/invite/docusaurus',
+        //     },
+        //     {
+        //       label: 'Twitter',
+        //       href: 'https://twitter.com/docusaurus',
+        //     },
+        //   ],
+        // },
         {
-          title: 'Community',
+          title: 'More',
           items: [
+            // {
+            //   label: 'Blog',
+            //   to: '/blog',
+            // },
             {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-            },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
-            },
-            {
-              label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
+              label: 'DevForth.io',
+              href: 'https://devforth.io',
             },
-          ],
-        },
-        {
-          title: 'More',
-          items: [
             {
-              label: 'Blog',
-              to: '/blog',
+              label: 'We can develop dashboard for you',
+              href: 'https://devforth.io/contact',
             },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/devforth/adminforth',
             },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} Devforth sp. z o.o.`,
     },
     prism: {
-      theme: prismThemes.github,
+      theme: prismThemes.vsLight,
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,

package/documentation/package.json

@@ -8,7 +8,7 @@
     "start": "docusaurus start",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
+    "deploy": "DEPLOYMENT_BRANCH=main docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",

package/documentation/src/components/HomepageFeatures/index.tsx

@@ -4,48 +4,46 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  img: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    title: 'CRUD Out of the Box',
+    img: require('@site/static/img/db2.png').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Initialize AdminForth with your database URL and get a full-fledged admin panel to
+        List, Create, Update, Filter and Delete data with ease.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Vue3 Driven',
+    img: require('@site/static/img/vue.png').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Extend easily by creating own Vue3 components and pages
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Tailwind Look',
+    img: require('@site/static/img/css.png').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Look is based on TailwindCSS, with a themes customization and dark mode available
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, img, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <img src={img} alt={title} style={{borderRadius: '50px', width: 250}} />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>

package/documentation/src/pages/index.module.css

@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-color: #48C5FF;
 }
 
 @media screen and (max-width: 996px) {

package/documentation/src/pages/index.tsx

@@ -19,8 +19,8 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            to="/docs/Getting%20Started">
+            AdminForth Tutorial - 5min ⏱️
           </Link>
         </div>
       </div>

package/documentation/static/img/gen.sh

@@ -0,0 +1,24 @@
+DO_N_TIME=10
+
+for i in $(seq 1 $DO_N_TIME)
+do
+  # curl https://api.openai.com/v1/images/generations \
+  #   -H "Content-Type: application/json" \
+  #   -H "Authorization: Bearer $OPENAI_TOKEN" \
+  #   -d '{
+  #     "model": "dall-e-3",
+  #     "prompt": "A photorealistic image of a cute kitty lying on top of a database symbol. Kitty should have eyes open. The database should be represented as a cylindrical shape, and the kitty should look relaxed and content, possibly curled up or stretched out.",
+  #     "n": 1,
+  #     "size": "1024x1024"
+  #   }'
+
+  curl https://api.openai.com/v1/images/generations \
+    -H "Content-Type: application/json" \
+    -H "Authorization: Bearer $OPENAI_TOKEN" \
+    -d '{
+      "model": "dall-e-3",
+      "prompt": "A photorealistic image of a cute kitty playing with nice rectangle box. Box is rounded and has CSS on it. The kitty should look playful and curious",
+      "n": 1,
+      "size": "1024x1024"
+    }'
+done

package/index.ts

@@ -98,6 +98,13 @@ class AdminForth implements AdminForthClass {
       this.config.customization.customComponentsDir = './custom';
     }
 
+    try {
+      // check customComponentsDir exists
+      fs.accessSync(this.config.customization.customComponentsDir, fs.constants.R_OK);
+    } catch (e) {
+      this.config.customization.customComponentsDir = undefined;
+    }
+
     if (this.config.auth) {
       if (!this.config.auth.resourceId) {
         throw new Error('No config.auth.resourceId defined');
@@ -959,6 +966,12 @@ class AdminForth implements AdminForthClass {
             if (!resource) {
                 return { error: `Resource '${body['resourceId']}' not found` };
             }
+            if (!record){
+                return { error: `Record with ${body['primaryKey']} not found` };
+            }
+            if (resource.options.allowedActions.delete === false) {
+                return { error: `Resource '${resource.resourceId}' does not allow delete action` };
+            }
 
             // execute hook if needed
             for (const hook of getFunctionList(resource.hooks?.delete?.beforeSave)) {

package/modules/codeInjector.ts

@@ -9,6 +9,8 @@ import { promisify } from 'util';
 import AdminForth from '../index.js';
 import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 import { getComponentNameFromPath } from './utils.js';
+import { styles } from '../styles.js'
+
 
 
 
@@ -327,6 +329,11 @@ class CodeInjector {
       let tailwindConfigContent = await fs.promises.readFile(tailwindConfigPath, 'utf-8');
       tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */', stylesText);
       await fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
+    } else {
+      let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
+      let tailwindConfigContent = await fs.promises.readFile(tailwindConfigPath, 'utf-8');
+      tailwindConfigContent = tailwindConfigContent.replace('/* IMPORTANT:ADMINFORTH TAILWIND STYLES */',styles());
+      await fs.promises.writeFile(tailwindConfigPath, tailwindConfigContent);
     }
 
 
@@ -456,14 +463,9 @@ async watchForReprepare({ verbose }) {
 
   async watchCustomComponentsForCopy({ verbose }) {
     const customComponentsDir = this.adminforth.config.customization.customComponentsDir;
-    // check dir exists
-    try {
-      await fs.promises.access(customComponentsDir, fs.constants.F_OK);
-    } catch (e) {
-      console.log(`Custom components dir "${customComponentsDir}" does not exist, feel free to create it place custom assets and Vue files there`);
+    if (!customComponentsDir) {
       return;
     }
-
     // check if folder exists
     try {
       await fs.promises.access(customComponentsDir, fs.constants.F_OK);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "adminforth",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "rollout": "tsc && cp -r spa dist/spa && npm version patch  && npm publish",
+    "rollout": "tsc && cp -r spa dist/spa && npm version patch  && npm publish && cd documentation && npm run deploy",
     "docs": "typedoc"
   },
   "author": "devforth.io",

package/spa/src/App.vue

@@ -63,7 +63,7 @@
     :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="h-full px-3 pb-4 overflow-y-auto bg-nav-menu-bg dark:bg-gray-800 border-r">
 
       <div class="flex ms-2 md:me-24  m-4  ">
         <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />