Allow users the ability to resize the logo

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte

@@ -34,6 +34,7 @@
     { value: "Right", barIcon: "TextAlignRight" },
   ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
+  const logoSizeOptions = ["18", "24", "36", "48", "72", "96"]
 
   $: bindings = getBindableProperties(
     $selectedScreen,
@@ -121,15 +122,25 @@
               updateOnChange: false,
             }}
           />
-          <PropertyControl
-            label="Text align"
-            control={BarButtonList}
-            onChange={align => update("textAlign", align)}
-            value={$nav.textAlign}
-            props={{
-              options: alignmentOptions,
-            }}
-          />
+          {#if (!$nav.textBelow && $nav.navigation === "Left") || $nav.navigation === "Top"}
+            <PropertyControl
+              label="Text align"
+              control={BarButtonList}
+              onChange={align => update("textAlign", align)}
+              value={$nav.textAlign}
+              props={{
+                options: alignmentOptions,
+              }}
+            />
+          {/if}
+          {#if $nav.navigation !== "Top"}
+            <PropertyControl
+              label="Title below logo"
+              control={Checkbox}
+              onChange={textBelow => update("textBelow", textBelow)}
+              value={$nav.textBelow}
+            />
+          {/if}
         {/if}
         <PropertyControl
           label="Background"
@@ -171,6 +182,18 @@
               updateOnChange: false,
             }}
           />
+          <PropertyControl
+            label="Logo size (px)"
+            control={DrawerBindableCombobox}
+            value={$nav.logoSize}
+            onChange={logoSize => update("logoSize", logoSize)}
+            {bindings}
+            props={{
+              updateOnChange: true,
+              options: logoSizeOptions,
+              appendBindingsAsOptions: false,
+            }}
+          />
           <PropertyControl
             label="Logo link URL"
             control={DrawerBindableCombobox}

packages/builder/src/stores/builder/navigation.js

@@ -9,9 +9,11 @@ export const INITIAL_NAVIGATION_STATE = {
   title: null,
   sticky: null,
   hideLogo: null,
+  logoSize: "36",
   logoUrl: null,
   hideTitle: null,
   textAlign: "Left",
+  textBelow: false,
   navBackground: null,
   navWidth: null,
   navTextColor: null,

packages/client/src/components/app/Layout.svelte

@@ -34,8 +34,10 @@
   export let navWidth
   export let pageWidth
   export let logoLinkUrl
+  export let logoSize
   export let openLogoLinkInNewTab
   export let textAlign
+  export let textBelow
   export let embedded = false
 
   const NavigationClasses = {
@@ -196,6 +198,25 @@
     return url
   }
 
+  const getSanitizedLogoSize = logoSize => {
+    let sanitizedSize = 36
+
+    try {
+      const result = Function('"use strict"; return (' + logoSize + ")")()
+      if (typeof result === "number" && isFinite(result)) {
+        sanitizedSize = result
+      }
+    } catch (error) {
+      sanitizedSize = 36
+    }
+
+    if (sanitizedSize > 165) {
+      sanitizedSize = 165
+    }
+
+    return sanitizedSize + "px"
+  }
+
   const handleClickLink = () => {
     mobileOpen = false
     sidePanelStore.actions.close()
@@ -242,28 +263,60 @@
                   />
                 </div>
               {/if}
-              <div class="logo">
-                {#if !hideLogo}
-                  {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
-                    <a
-                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
-                      use:linkable
-                    >
-                      <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
-                    </a>
-                  {:else if logoLinkUrl}
-                    <a
-                      target={openLogoLinkInNewTab ? "_blank" : "_self"}
-                      href={getSanitizedUrl(logoLinkUrl, openLogoLinkInNewTab)}
-                    >
-                      <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
-                    </a>
-                  {:else}
-                    <img src={logoUrl || "/builder/bblogo.png"} alt={title} />
+              <div
+                class="logo {navigation === 'Left'
+                  ? 'left-nav'
+                  : ''} {navigation === 'Left' && textBelow
+                  ? 'text-below-left-nav'
+                  : ''}"
+                style={navigation === "Top" && hideLogo ? "column-gap: 0;" : ""}
+              >
+                <div>
+                  {#if !hideLogo}
+                    {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
+                      <a
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                        use:linkable
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          class="logo-image"
+                          style="--logoSize: {getSanitizedLogoSize(logoSize)}"
+                        />
+                      </a>
+                    {:else if logoLinkUrl}
+                      <a
+                        target={openLogoLinkInNewTab ? "_blank" : "_self"}
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          class="logo-image"
+                          style="--logoSize: {getSanitizedLogoSize(logoSize)}"
+                        />
+                      </a>
+                    {:else}
+                      <img
+                        src={logoUrl || "/builder/bblogo.png"}
+                        alt={title}
+                        class="logo-image"
+                        style="--logoSize: {getSanitizedLogoSize(logoSize)}"
+                      />
+                    {/if}
                   {/if}
-                {/if}
+                </div>
                 {#if !hideTitle && title}
-                  <Heading size="S" {textAlign}>{title}</Heading>
+                  <div id="heading">
+                    <Heading size="S" {textAlign}>{title}</Heading>
+                  </div>
                 {/if}
               </div>
               {#if !embedded}
@@ -517,20 +570,33 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
     gap: var(--spacing-m);
     flex: 1 1 auto;
+    align-items: center;
   }
-  .logo img {
-    height: 36px;
+  .logo-image {
+    max-width: var(--logoSize);
+    max-height: var(--logoSize);
   }
   .logo :global(h1) {
     font-weight: 600;
     flex: 1 1 auto;
-    width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    max-width: 100%;
+  }
+  #heading {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    max-width: 100%;
+  }
+  .left-nav {
+    max-width: 165px;
+  }
+  .text-below-left-nav {
+    flex-direction: column !important; /* Over-rides row setting in .logo*/
   }
   .portal {
     display: grid;

yarn.lock

@@ -20612,6 +20612,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6"
   integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==
 
+[email protected]:
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6"
+  integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==
+
 "typescript@>=3 < 6":
   version "5.5.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"