BUDI-8831 gives users options to resize the logo

packages/bbui/src/Typography/Heading.svelte

@@ -20,6 +20,7 @@
 <style>
   h1 {
     font-family: var(--font-accent);
+    border: 1px solid blue;
   }
 
   h1 {

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

@@ -33,7 +33,13 @@
     { value: "Center", barIcon: "TextAlignCenter" },
     { value: "Right", barIcon: "TextAlignRight" },
   ]
+  const alignLogoOptions = [
+    { value: "Left", barIcon: "AlignLeft" },
+    { value: "Center", barIcon: "AlignCenter" },
+    { value: "Right", barIcon: "AlignRight" },
+  ]
   const widthOptions = ["Max", "Large", "Medium", "Small"]
+  const logoSizeOptions = ["18px", "24px", "36px", "48px", "72px", "96px"]
 
   $: bindings = getBindableProperties(
     $selectedScreen,
@@ -130,6 +136,12 @@
               options: alignmentOptions,
             }}
           />
+          <PropertyControl
+            label="Title below logo"
+            control={Checkbox}
+            onChange={textBelow => update("textBelow", textBelow)}
+            value={$nav.textBelow}
+          />
         {/if}
         <PropertyControl
           label="Background"
@@ -171,6 +183,36 @@
               updateOnChange: false,
             }}
           />
+          <PropertyControl
+            label="Logo size"
+            control={DrawerBindableCombobox}
+            value={$nav.logoSize}
+            onChange={logoSize => update("logoSize", logoSize)}
+            {bindings}
+            props={{
+              updateOnChange: true,
+              options: logoSizeOptions,
+              appendBindingsAsOptions: false,
+            }}
+          />
+          <PropertyControl
+            label="Logo alignment"
+            control={BarButtonList}
+            onChange={logoAlign => update("logoAlign", logoAlign)}
+            value={$nav.logoAlignment}
+            props={{
+              options: alignLogoOptions,
+            }}
+          />
+
+          <!-- label="Text align"
+           control={BarButtonList}
+           onChange={align => update("textAlign", align)}
+           value={$nav.textAlign}
+           props={{
+             options: alignmentOptions,
+           }} -->
+
           <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: "36px",
   logoUrl: null,
   hideTitle: null,
   textAlign: "Left",
+  textBelow: false,
   navBackground: null,
   navWidth: null,
   navTextColor: null,

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

@@ -34,8 +34,11 @@
   export let navWidth
   export let pageWidth
   export let logoLinkUrl
+  export let logoSize
   export let openLogoLinkInNewTab
   export let textAlign
+  export let textBelow
+  export let logoAlign
   export let embedded = false
 
   const NavigationClasses = {
@@ -242,28 +245,58 @@
                   />
                 </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"
+                style="flex-direction: {textBelow
+                  ? 'column'
+                  : 'row'}; max-width: {navigation === 'Left'
+                  ? '165px'
+                  : '95%'};
+                  align-items: {navigation === 'Left' ? 'center' : 'left'};"
+              >
+                <div style="text-align: {logoAlign};">
+                  <p>{logoAlign}</p>
+                  {#if !hideLogo}
+                    {#if logoLinkUrl && isInternal(logoLinkUrl) && !openLogoLinkInNewTab}
+                      <a
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                        use:linkable
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          style="--logo-size: {logoSize};
+                          align"
+                        />
+                      </a>
+                    {:else if logoLinkUrl}
+                      <a
+                        target={openLogoLinkInNewTab ? "_blank" : "_self"}
+                        href={getSanitizedUrl(
+                          logoLinkUrl,
+                          openLogoLinkInNewTab
+                        )}
+                      >
+                        <img
+                          src={logoUrl || "/builder/bblogo.png"}
+                          alt={title}
+                          style="--logo-size: {logoSize};"
+                        />
+                      </a>
+                    {:else}
+                      <img
+                        src={logoUrl || "/builder/bblogo.png"}
+                        alt={title}
+                        style="--logo-size: {logoSize};"
+                      />
+                    {/if}
                   {/if}
-                {/if}
+                </div>
                 {#if !hideTitle && title}
-                  <Heading size="S" {textAlign}>{title}</Heading>
+                  <Heading size="S" {textAlign} style="">{title}</Heading>
                 {/if}
               </div>
               {#if !embedded}
@@ -517,20 +550,21 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
     gap: var(--spacing-m);
     flex: 1 1 auto;
+    border: 1px solid red;
   }
   .logo img {
-    height: 36px;
+    width: var(--logo-size);
+    height: var(--logo-size);
   }
   .logo :global(h1) {
     font-weight: 600;
     flex: 1 1 auto;
-    width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 100%;
   }
   .portal {
     display: grid;