feat: add showBrandLogoInSidebar option to customization and update related components

Author: NoOne7135

adminforth/commands/createApp/templates/index.ts.hbs

@@ -30,7 +30,8 @@ export const admin = new AdminForth({
     brandLogo: '@@/assets/logo.svg',
     datesFormat: 'DD MMM',
     timeFormat: 'HH:mm a',
-    showBrandNameInSidebar: true,
+  showBrandNameInSidebar: true,
+  showBrandLogoInSidebar: true,
     emptyFieldPlaceholder: '-',
     styles: {
       colors: {

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -54,6 +54,18 @@ showBrandNameInSidebar: false,
 
 `brandName` will still be used in the other places e.g. login form.
 
+## Removing brand logo from sidebar
+
+If you want to hide the logo image in the sidebar while keeping the brand name text (or vice versa), disable the logo with:
+
+```ts title='./index.ts'
+brandName: 'My App',
+//diff-add
+showBrandLogoInSidebar: false,
+```
+
+By default, the logo is shown when available. This flag controls the sidebar logo only and does not affect the login page.
+
 ## Theming
 
 AdminForth uses TailwindCSS for styling. You are able to customize the look of the application by changing the TailwindCSS configuration.

adminforth/modules/configValidator.ts

@@ -178,6 +178,9 @@ export default class ConfigValidator implements IConfigValidator {
     if (customization.showBrandNameInSidebar === undefined) {
       customization.showBrandNameInSidebar = true;
     }
+    if (customization.showBrandLogoInSidebar === undefined) {
+      customization.showBrandLogoInSidebar = true;
+    }
     if (customization.favicon) {
       errors.push(...this.checkCustomFileExists(customization.favicon));
     }

adminforth/modules/restApi.ts

@@ -364,6 +364,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
 
         const loggedInPart = {
           showBrandNameInSidebar: this.adminforth.config.customization.showBrandNameInSidebar,
+          showBrandLogoInSidebar: this.adminforth.config.customization.showBrandLogoInSidebar,
           brandLogo: this.adminforth.config.customization.brandLogo,
           datesFormat: this.adminforth.config.customization.datesFormat,
           timeFormat: this.adminforth.config.customization.timeFormat,

adminforth/spa/src/App.vue

@@ -78,7 +78,7 @@
     >
       <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
         <div class="af-logo-title-wrapper flex ms-2 m-4">
-          <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
+          <img v-if="coreStore.config?.showBrandLogoInSidebar !== false" :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3"  />
           <span 
             v-if="coreStore.config?.showBrandNameInSidebar"
             class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"

adminforth/types/Back.ts

@@ -647,6 +647,12 @@ interface AdminForthInputConfigCustomization {
    */
   showBrandNameInSidebar?: boolean,
 
+  /**
+   * Whether to show brand logo in sidebar
+   * default is true
+   */
+  showBrandLogoInSidebar?: boolean,
+
   /**
    * Path to your app logo
    * 

adminforth/types/Common.ts

@@ -1074,6 +1074,7 @@ export interface AdminForthConfigForFrontend {
   },
   rememberMeDays: number,
   showBrandNameInSidebar: boolean,
+  showBrandLogoInSidebar: boolean,
   brandLogo?: string,
   singleTheme?: 'light' | 'dark',
   datesFormat: string,